Readme - SASS

[fenepedia]

Hallo Andreas,

danke für dein boilerplate.
Ich wollte heute die scss Dateien anstatt css verwenden.

Kannst Du dazu vielleicht die README ergänzen, damit klar ist, welche Styles man wo einbinden muss und welche bereits automatisch per import geladen werden?

Sehe ich es richtig, dass alle mit "_" markierten Files automatisch geladen werden? Damit wäre es gleich wie bei den css-Files oder?

Wäre es sinnvoll alle nötigen Files per import einzubinden, so dass nur noch die style.scss als einzige Datei ins Layout hinzugefügt werden muss?

[andreasisaak]

Hi, ich bin da eigentlich noch nicht ganz am Ende ;) Ich wollte noch eine Grunt Unterstützung einbauen. Dann kann man es sich aussuchen welchen Weg man am Ende geht:

• Jede einzelne SCSS-Datei in Contao einbinden
• Jede einzelne (generierte oder originale) CSS-Datei in Contao einbinden, z.B. mit Theme+
• Die mit Grunt zusammengefasste Datei in Contao einbinden

Alternativ kann ich noch eine base.scss erstellen, wo alle in der richtigen Reihenfolge importiert werden. Ob man die dann einbindet, bleibt einem selbst überlassen. Ich persönlich nutze Variante 2 oder 3.

[fenepedia]

Hi, was Du vor hast klingt gut! Mit Grunt muss ich mich allerdings erst beschäftigen.

Finde Dein boilerplate super und ist echt ne Erleichterung.
Ich will allerdings noch ein paar kleinere Änderungen/Ergänzungen machen.

Bin auf GitHub ebenfalls noch nicht so ganz fit.

Spontan fällt mir folgende Möglichkeiten ein:

• eigenen Fork erstellen
• Änderungen irgendwie extra notieren und dann bei Bedarf einfügen
• eigene scss-Datei anlegen und dann per Import hinzufügen
• wir reden darüber, ob es Sinn macht irgendwelche Punkte die ich so verwende zu integrieren

Ich hab z.B. das Thema font-size und Responsive etwas anders gelöst und noch ein paar Kleinigkeiten ergänzt.

Mir wäre schon wichtig, dass ich so nah wie möglich bei Deinem Original bleibe. Mein Versuch vor ein paar Monaten einen eigenen LESS-Fork zu erstellen war nicht gut, da dieser zu weit von Deinem Stil weg war.

[andreasisaak]

Wie hast du die Themen "font-size" und "responsive" denn gelöst? Hast du da was, was man sich anschauen könnte?

[fenepedia]

font-size

Hier arbeite ich mit rem und einem Fallback für IE8.
Ich setze das html-element auf 62.5%. Was im Normalfall 10px entspricht. Es ist also dann 1 rem = 10px

siehe auch:
http://snook.ca/archives/html_and_css/font-size-with-rem

Responsive

Hier gehe ich mobil-first und hab dazu dann bereits ein paar feste Breakpoints definiert.
jeder Breakpoint ist dann in einer extra scss datei.

Kannst ja mal in meinen LESS Fork schauen -> https://github.com/feneblog/contao-boilerplate/tree/master/(tl_)files/standard/layout/css/less

Allerdings möchte ich wie gesagt ganz nah bei Deinem bleiben. Eine gute Version die von mehreren genutzt und gepflegt wird finde ich einfach besser.

[andreasisaak]

Ein REM Mixin ist in der Boilerplate ja bereits enthalten. Das wollte ich in naher Zukunft noch komplett einbauen, aber bei mir wird die Standardschriftgröße 16px sein. 10px wäre mir viel zu klein und entspricht auch nicht dem Browserstandard.

Mobilefirst kannst du mit meinem mitgelieferten Breakpoint Mixin ja auch. Aber deinen Weg mit den einzelnen Dateien pro Mediaquery sagt mir so gar nicht zu. Wir hatten lange Zeit eine media.css und diesen Weg will ich mit SCSS komplett verlassen. Das Mediaquery hat für mich bei dem jeweiligen Element zu stehen, sonst sucht man sich doof.

[fenepedia]

Danke für den Hinweis. Dann werde ich mir das mit dem Mixin und deinem Breakpoint-Ansatz noch mal genauer ansehen.

Als Alternative kann ich ja immer noch nen Fork von Deinem Projekt machen.