Webseiten modular entwickeln · operatino/living-style-guide-tools-in-depth-overview-28cfffb92d05

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://styletil.es/

http://styletil.es/

http://styletil.es/

http://styletil.es/

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

http://styleguides.io/

Mein aktueller Ansatz

Nächste Modifikation

inc/ sass/

Richtiger Umgang mit Klassen

https://github.com/stubbornella/oocss/wiki

Modifikator

Das media-Element

http://jsbin.com/ipupew/2/

http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

https://smacss.com/

1. Base

2. Layout

3. Module

4. State (Zustand)

5. Theme

Die einzelnen Bestandteile

http://bem.info/method/

BEM

Block, Element, Modifier

Namenskonventionen

http://snap.kapowaz.net/loloocss.png https://twitter.com/kapowaz/status/474195847694274561

https://twitter.com/oknoblich/status/472320546202742784

https://css-tricks.com/bem-101/

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