Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Objektorientiertes CSS
Ähnlich wie Objektorientiertes CSS (20)
Objektorientiertes CSS
- 1. Objektorientiertes CSS EFFEKTIVER UMGANG MIT CSS-KLASSEN / LESS WORKLOW-VERBESSERUNG BEI DER ARBEIT MIT CHUNKS
- 2. Übersicht Über mich HTML Working Grid Wiederkehrende HTML Elemente / Chunks CSS objektorientiert / LESS
- 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. 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. 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. 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. CSS Objektorientiert / LESS
- 8. Vielen Dank für eure Aufmerksamkeit!