Gibt es best practices für Layouts mit Box Modell?

[afr0kalypse]

Hi zusammen,
gibt es eigentlich sowas wie best practices bei der Nutzung des Box Model?

Was ich meine ist sowas wie: 'Einzelne Elemente bekommen immer nur einen Außenabstand nach unten'.

Um das Layout und das Verhalten einzelner Komponenten einheitlich zu halten, würde ich sowas gerne in einen Frontend Styleguide übernehmen. Gibt es da etwas was man zu dem Thema nachschlagen kann?

VG

 

[patrick_l]

Um das Layout und das Verhalten einzelner Komponenten einheitlich zu halten, würde ich sowas gerne in einen Frontend Styleguide übernehmen. Gibt es da etwas was man zu dem Thema nachschlagen kann?

Hi Alex, da ich ja weiß das du auch mit Sass arbeitest oder zumindest damit herum experimentierst, wäre alles rund um (Scalable and Modular Architecture for CSS) genau das richtige für dich. Hier mal exemplarisch (m)eine Verzeichnisstruktur für neue Projekte.

Projekt:

[builds]
- [development]
- - index.jade
- - [_jadefiles] base.jade, header.jade, section-(name).jade, mixins.jade, columns.jade
- - [assets]
- - > [css]   > tools, base, modules, sections, themes, print (importiert in main.sass)
- - > [img]   > brand, backgrouds, icons, favicons, sprites, slider, content
- - > [js]      > functions.js , vendor (jQuery), plugins (als functions.js kompiliert)
- - > [fonts] > fonts (src-files)

- [production]
- - index.html
- - [assets]
- - > [css]     > main.css
- - > [img]    > brand, backgrouds, favicons, sprites, slider, content
- - > [js]       > functions.min.js , jQuery
- - > [fonts]  > fonts (src-files)

[layout]
- [psd]         > base-layout.psd, desktop.psd, tablet.psd, smartphone.psd
- [mockup]  > wireframe.psd, wireframe.pdf
- [briefing]  > Alle vom Kunden gelieferte Dokumente und Dateien
- [src]         > images, graphics, sources.txt (Links zu den Quellen)

Zurück zu deiner Frage. Setz deine Website modular um. Splitte also alle Elemente auf und verwende einzelne Code-Schnipsel wieder, sofern du diese wieder benötigst. Arbeite mit Variablen und Mixins. Verwende fürs Markup ebenso eine Preprocessor wie Jade oder Haml. Ich bevorzuge Jade. Von der Syntax her, ähnlich wie Sass (SCSS). Jade selbst ist eine auf Node.js basierte Template Engine.

Wenn man so will, ebenso Superkräfte für HTML wie es bei Sass und CSS der Fall ist. Du kannst mit Variablen und Mixins arbeiten. Ebenso wie in Sass einzelne Bereiche auslagern und mit Hilfe von "include" inkludieren. Wenn du dich erst einmal mit dem modularen Aufbau angefreundet hast, möchtest du es sicher nicht mehr missen. Deine Projekte werden trotz mehrerer Dateien um längen übersichtlicher. Ebenso kannst du einzelne Snippets leicht auf und in andere Projekte übertragen.

Letzteres kannst du ein bisschen wie Bootstrap und/oder Foundation vergleichen. Dort gibt es ja auch fertige Komponenten die schnell über diverse Code-Schnipsel hinzugefügt werden können. Bei diesem modularen Aufbau es eigentlich nicht anders abläuft. Du hast eine sinnvolle Strukturierung und gliederst deine Seite in unterschiedliche Teile auf. Was wiederum der besseren Übersicht und Erweiterbarkeit zu gute kommt.

Liebe Grüße, Patrick

 

[afr0kalypse]

Hi Patrick_L,
danke für deine ausführliche Antwort. Aber diesmal hast du etwas über das Ziel hinaus geschossen
Mir ging es konkret um Fragen wie:
'Wenn ich eine wiederverwendbare Komponente baue und diese mit CSS/SASS Style, wie bestimme ich am Besten, an welcher Stelle die Komponente Abstände erhält?'

Theoretisch könnte ich sagen: 'Meine Komponenten erhalten alle keine Abstände. Abstände werden ausschließlich durch das Grid und dessen Spaltenabstände definiert, sowie durch Abstände aus den Grid-Zeilen'.

Ich weiß aber nicht ob das ein guter Ansatz / Best Practice wäre...

Ich hoffe das macht meine Frage etwas verständlicher

 

[patrick_l]

'Wenn ich eine wiederverwendbare Komponente baue und diese mit CSS/SASS Style, wie bestimme ich am Besten, an welcher Stelle die Komponente Abstände erhält?'

Eigentlich recht "simple". Du erstellst eine Komponente und verpasst dieser lediglich Default-Eigenschaften. Genau gesagt setzt du alles mit Hilfe eines "mixin" um und verwendest Variablen. Diesen Variablen bekommen einen Default-Wert mit.

/* --| Sass |------- */
=base-module($width:100%, $padding:0, $margin:0)
    width: $width
    padding: $padding
    margin: $margin
/* --| SCSS |------- */
@mixin base-module($width:100%, $padding:0, $margin:0){
    width: $width;
    padding: $padding;
    margin: $margin;
}

Jetzt verwendest du dein Modul vielleicht auch an anderer Stelle, benötigst jedoch andere Werte, die von den als default gesetzten abweichen. Mit nur einer Zeile und den nötigen Parametern dann schnell erledigt. Lediglich mixins inkludieren und Werte festlegen.

/* --| Sass |---------- */
+base-module(50%, 5px, 15px)
/* --| SCSS |---------- */
@include base-module(50%, 5px, 15px)

In dem verlinkten Artikel geht es zwar primär um den Null-Wert. Trotzdem passt dieser eigentlich ganz gut hierhin. Dort wird die Kombination Mixins und Variablen nochmal deutlich gezeigt. Also ruhig mal anschauen.
- Team Treehouse » Smarter Sass Mixins with Null

Hier solltest du auch mal ein Blick drauf werfen.
- GitHub » Sass - Dynamic variables and mixins

Ich hoffe das macht meine Frage etwas verständlicher

Ja, war deutlich genug. Ich hoffe ich konnte dieses mal deine Frage ausreichend beantworten. Der Schlüssel ist eigentlich eine Kombination aus sinnvoll (durchdachte) angelegten Mixins und Variablen.

Liebe Grüße, Patrick

 

[afr0kalypse]

Danke Patrick
Lustigerweise bin ich um 23:45 auf den gleichen Trichter gekommen und habe das auch schon ähnlich umgesetzt Allerdings noch nicht für Komponenten selber.
Manchmal braucht man den Wink mit dem Zaunpfahl