Contao und Bourbon / Bitters / Neat
Hallo,
das ist ja erschütternd, seit 2014 hat hier keiner mehr ein Tutorial zur Verfügung gestellt. Oagh! Na, dann werden wir das mal ändern.
Weil viele daran interessiert waren, hier eine kleine Anleitung, wie man Bourbon am Einfachsten in Conto einbindet. Wege gibt es aus meiner Sicht zwei:
- Einbinden der *.scss Dateien direkt in Contao und das Kompilieren via dem integrierten lessphp-Compiler
- Externes Kompilieren (z.B. CodeKit oder Prepros) und Einbinden des Ergebnisses
Methode 1 hat den Vorteil, dass man alles wie gewohnt in seiner Contao Installation liegen hat und somit quasi ortsunabhängig ist, während man bei Methode 2 immer darauf angewiesen ist, die Files lokal (oder in einem Repository) zu horten, diese abzuholen und dann eben von Hand aus zu erstellen. Methode 1 hat aber den Nachteil, dass nicht alles wie vorgesehen im finalen Stylesheet landet.
Ein Beispiel: ich habe Neat eingebunden und mir folgenden Code zurechtgelegt:
HTML-Code:
<footer role="contentinfo" class="footer" id="footer">
<div class="section-row">
<div class="impressum">
<h3>Impressum</h3>
</div>
</div>
</footer>
Code:
.footer {
.section-row {
@include outer-container();
}
.impressum {
@include shift(3 od 12);
@include span-columns(6);
}
a, a:hover, a:focus, a:link {
color: #bfbfbf;
}
}
Herausgekommen ist dabei immer ein margin-left von 0, wenn das mit dem integrierten Compiler in Contao erstellt wurde. Gleicher Code mit CodeKit ergab ein margin-left von 25.5894128995%.
Darum meine Empfehlung: wenn wer Neat mit ins Spiel nimmt, muss möglicherweise ein paar Abstriche in Kauf nehmen, oder eben auf selber Kompilieren umsteigen, also Methode 2. Ich hab mich für Tor #2 entschieden.
Wie binde ich nun Bourbon überhaupt ein? Das ist an sich die einfachste Sache. Man lädt sich Bourbon von https://github.com/thoughtbot/bourbon/releases herunter und entpackt die geladene Datei. Jetzt kommt es auf den persönlichen Geschmack an, wie man in Contao arbeitet. Ein guter Platz aus meiner Sicht wäre unter /assets/bourbon und dann im jeweiligen Unterverzeichnis bourbon, bitters und neat dazuzugeben. Andere wiederum arbeiten z.B. mit /files/theme/css/bourbon. etc. Also Möglichkeiten gibt es deren mehrere.
In seinem Thema-Ordner erstellt man dann eben wie bisher ein style.scss und gibt am Anfang folgende Zeilen ein (Beispiel):
Code:
// Import Bourbon
@import "assets/bourbon/bourbon";
// Import grid settings (Optional, nur wenn Neat in Verbindung mit Bitters verwendet werden soll)
@import "assets/bitters/grid-settings";
// Import Bitters (Optional)
@import "assets/bitters/base";
// Import Neat (Optional)
@import "assets/neat/neat";
Die Pfade sind dann natürlich dementsprechend an das jeweilige Environment anzupassen. Wer seine Bourbon-SCSS-Dateien wo anders parkt als z.B. im Unterverzeichnis, sollte hier unbedingt relative Pfade verwenden, also z.B. "../../../assets/bourbon/bourbon". Wer Neat und Bitters mit rein nimmt, sollte hier unbedingt den Tip auf der Github Seite von Bitters wahrnehmen:
Zitat:
Note: If you are using Bitters and Neat without Ruby on Rails, you need to change the import for neat-helpers inside _grid-settings.scss to "../neat/neat-helpers".
If you want to use Neat functions in Bitters, you can @import "grid-settings"; before Neat, remove @import "grid-settings"; from _base.scss and import the rest of bitters after. For example:
Das war es eigentlich auch schon. Danach sollten die Bourbon Mixins zur Verfügung stehen.
Guter Tipp am Rande: guter, wiederverwendbarer Code für recht schöne Designstücke finden sich auf Refills (http://refills.bourbon.io). Teils muss man dafür aber auch jQuery-Code einfügen.
Ansonsten, have fun, ich hoffe, das hilft ein wenig weiter.
Gruß, Thomas
