Objektorientiertes CSS
EFFEKTIVER UMGANG MIT CSS-KLASSEN / LESS
WORKLOW-VERBESSERUNG BEI DER ARBEIT MIT CHUNKS
Übersicht
 Über mich
 HTML Working Grid
 Wiederkehrende HTML Elemente / Chunks
 CSS objektorientiert / LESS
Florian Gutwald
www.frontend-mercenary.com
 36 Jahre
 Ausbildung zum Schriftsetzer
 Erste Zeilen HTML 1996
 Weiterbild...
HTML Working Grid &
CSS Klassen Strukturierung
<html class=“browserengine os etc“>
<body class=“pageHome“>
<div class=“sit...
Wiederkehrendes HTML definieren
<html>
<body>
<div class=“site“>
<div class=“gridContent gridContentMainCol“>
<div class=“...
Chunks effektiv einsetzen
<html>
<body>
<div class=“site“>
<div class=“gridContent gridContentMainCol“>
[[$moduleContentBo...
CSS Objektorientiert / LESS
Vielen Dank für eure
Aufmerksamkeit!
Nächste SlideShare
Wird geladen in …5
×

Objektorientiertes CSS

466 Aufrufe

Veröffentlicht am

Vortrag zu

Veröffentlicht in: Business, Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Objektorientiertes CSS

  1. 1. Objektorientiertes CSS EFFEKTIVER UMGANG MIT CSS-KLASSEN / LESS WORKLOW-VERBESSERUNG BEI DER ARBEIT MIT CHUNKS
  2. 2. Übersicht  Über mich  HTML Working Grid  Wiederkehrende HTML Elemente / Chunks  CSS objektorientiert / LESS
  3. 3. Florian Gutwald www.frontend-mercenary.com  36 Jahre  Ausbildung zum Schriftsetzer  Erste Zeilen HTML 1996  Weiterbildung zum Medienfachwirt Print  Über medieneutrale Datenhaltung / XML / XSL zu HTML/CSS  2000 bis 2006 zahlreiche Flash-Projekte realisiert, sowie diverse Usertreffen in München und Stuttgart  7 Jahre Werbeagentur als Schusterjunge und Pixelschieber  Seit 2007 als Freelancer an zahlenreichen Webprojekten beteiligt, u.A. Relaunch ADAC , ARD Mediathek, Relaunch BW Bank Website
  4. 4. HTML Working Grid & CSS Klassen Strukturierung <html class=“browserengine os etc“> <body class=“pageHome“> <div class=“site container12“> <section class=“gridContent gridContentMainCol grid8“> <div class=“moduleContentBox moduleContentBoxBlog grid4“> <div class=“innerModuleContent“> <header class=“gridHeader“> <aside class=“gridMarginalCol grid4“> <footer class=“gridFooter“>
  5. 5. Wiederkehrendes HTML definieren <html> <body> <div class=“site“> <div class=“gridContent gridContentMainCol“> <div class=“moduleContentBox moduleContentBoxBlog“> <div class=“innerModuleContent“> <ul> <li class=“boxListItem“> <div class=“boxImage“> <img src=“..“ /> </div> <div class=“boxContent“> some content </div> <div class=“moduleContentBox moduleContentBoxNews“> <div class=“innerModuleContent“> <ul> <li class=“boxListItem“> <div class=“boxImage“> <img src=“..“ /> </div> <div class=“boxContent“> some content </div>
  6. 6. Chunks effektiv einsetzen <html> <body> <div class=“site“> <div class=“gridContent gridContentMainCol“> [[$moduleContentBox? &additionalClass=`moduleContentBoxBlog` &gridClass=`grid4` &boxHeaderText=`Blog` &scrollContent=`innerModuleScrollPane` &parentsId = `2` &tplRow = `tpl.row.HeadlineH3WithText` ]] <div class=“moduleContentBox moduleContentBoxBlog grid4“> <div class=“innerModuleContent innerModuleScrollPane“> <ul> <li class=“boxListItem“> <div class=“boxImage“> <img src=“..“ /> </div> <div class=“boxContent“> some content </div> $tpl.row.HeadlineH3WithText $moduleContentBox
  7. 7. CSS Objektorientiert / LESS
  8. 8. Vielen Dank für eure Aufmerksamkeit!

×