Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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!
Upcoming SlideShare
Loading in …5
×

Objektorientiertes CSS

474 views

Published on

Vortrag zu

Published in: Business, Technology
  • Be the first to comment

  • Be the first to like this

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!

×