Post on 22-May-2015
description
transcript
Webseiten modular entwickeln
Jens Grochtdreis
‣Frontendentwickler
‣seit 1999 Arbeit im und fürs Web
‣seit 2009 selbständig
‣Frontendentwicklung
‣Schulung
‣Beratung
‣twitter.com/Flocke
Seite ist eine Ansammlung von Modulen
‣ Jede Box hat eine obere Linie.
‣ Die Inhalte differieren, sind aber prinzipiell Listen.
‣ Eine Box kann eine Überschrift enthalten.
Platzierung sollte egal sein
Module entwickeln, nicht ganze Seiten!
Layout: Seitengrundgerüst
Module tragen Designinformationen
Umfangreiche Modulliste
Jedes dieser Module ist eine eigene Datei
Module richtig entwickeln
Das Modul ist sein eigenes Universum!
Trennung zwischen Layout und Design
Semantisch = HTML Design = CSS
http://jsfiddle.net/Flocke/psAwV/
Schnipsel im CSS dank Präprozessoren
CSS ist manchmal nervtötend unflexibel.
Einfacher wird es, wenn man CSS „programmiert“!
zentrales Stylesheet importiert Module und generiert ein CSS-File
Variablen
Module in Sass
‣ Ein Unterstrich vor der Dateiendung verhindert das rendern als einzelne Datei. Es entsteht ein „partial“. So kann man diese in eine zentrale Datei importieren und nachher gesammelt rendern lassen.
Richtiger Umgang mit Klassen
https://github.com/stubbornella/oocss/wiki
Styling über Klassen
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
Klassen sind manchmal sinnvoller, als
Kontextselektoren
Semantische Klassen?
Nein! Pflegbare!
CSS = OptikSemantik = HTML
Farben über Klassen zuweisen
CSS
SCSS
Variablen in Sass
‣ IDs wenn überhaupt dann nur für grundlegende Elemente des Layouts nutzen.
‣ #header, #main, #sidebar, #footer
‣ Und natürlich für Formularelemente!
‣ Optik von Modulen über separate Klassen modifizieren.
‣Weitere Trennung sinnvoll:
‣ Klassen nur für Layout
‣ Klassen nur für Design
‣ Grundaufbau
‣ Theme
‣ Zustand
‣ Klassen nur für Zugriff mittels JavaScript
Realistische Dummy-Inhalte
http://www.mangrove.com/blog/1079/death-to-lorem-ipsum
Navigation
http://www.blindtextgenerator.de/
Vorsicht bei horizontaler Navigation
http://grochtdreis.de/weblog/2009/10/18/schoener-navigationstitel/
Dummybilder
http://dummyimage.com/ http://lorempixel.com/
Jens Grochtdreis
http://grochtdreis.dehttp://twitter.com/Flockehttps://github.com/jensgrohttp://webkrauts.dehttp://slideshare.net/Flocke669https://speakerdeck.com/flocke