Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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

482 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!

×