Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
Webseiten modular entwickeln
Jens Grochtdreis
Ziele
‣ Mehrere Personen arbeiten an einem Projekt.
‣ Einzelne Seitenbestandteile können in anderen Projekten wiederverwendet werden.
‣ Theming
‣ Dokumentation in einem Living Styleguide
‣ Arbeit in einem Living Styleguide
http://upload.wikimedia.org/wikipedia/commons/3/32/Lego_Color_Bricks.jpg
Seite ist eine Ansammlung von Modulen
http://daverupert.com/2013/04/responsive-deliverables/
Platzierung sollte egal sein
http://www.studiobonito.co.uk/work/youth-for-christ-website-design-development-birmingham/
Wichtigste Grundbedingung
Die Module müssen für sich selber stehen!
Möglichst wenige Ebenen!
Styleguides
http://codeforamerica.clearleft.com/
http://codeforamerica.clearleft.com/
http://ux.mailchimp.com/patterns/tables
http://rackerlabs.github.io/canon/ui-components/#tables
https://medium.com/@operatino/living-style-guide-tools-in-depth-overview-28cfffb92d05
Mein aktueller Ansatz
Nächste Modifikation
inc/ sass/
Richtiger Umgang mit Klassen
https://github.com/stubbornella/oocss/wiki
Modifikator
http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
1. Base
2. Layout
3. Module
4. State (Zustand)
5. Theme
Die einzelnen Bestandteile
Block, Element, Modifier
Namenskonventionen
http://snap.kapowaz.net/loloocss.png https://twitter.com/kapowaz/status/474195847694274561
https://twitter.com/oknoblich/status/472320546202742784
http://codepen.io/team/css-tricks/pen/226a65c8f7d64615aabd45048d1d3b6d
1 2 3
1
http://sassmeister.com/gist/c608e47ffd21f2166c56
Ab Sass 3.3
NCSS
https://github.com/redaxmedia/ncss
Strukturelle Klassen
Typ-Klassen
Modifikator-Klassen
Funktionale Klassen
Namespace-Klassen
Zusammenfassen und Ausnahmen gestalten
Unpraktische Klassennamen
Jens Grochtdreis
http://grochtdreis.dehttp://twitter.com/Flockehttps://github.com/jensgrohttp://webkrauts.dehttp://slideshare.net/Flocke669https://speakerdeck.com/flocke