Theming mit SASS
Eingetragen von AndyLicht (260)am 21.11.2016 - 15:01 Uhr in
Hallo Forum,
ich habe mit D7 meine Themes meistens mit Omega gemacht. Jetzt bei D8 habe ich mein erstes Testtheme einfach von Grund auf geschrieben (noch ohne Styling). Ist in der Theorie und Praxis auch kein Problem, jedoch fehlen mir die Vorzüge eines Gridsystems und von SASS. Ich würde gerne sowenig wie möglich Overhead nutzen wollen, daher meine Fragen:
Kann ich ein Gridsystem ohne extra Theme nutzen?
Bietet mir SASS von Haus aus ein Gridsystem (kann ich doch sicherlich über Variablen definieren)?
Muss ich SASS extra installieren (habe da was von PHPsass gelesen)?
Brauche ich Compass, damit die css-Dateien erzeugt werden?
vielen Dank für die Hilfe
mfg
Andy
- Anmelden oder Registrieren um Kommentare zu schreiben
Zen, Foundation, Bootstrap ...
am 22.11.2016 - 01:14 Uhr
Im Prinzip kannst Du jedes Gridsystem auch ohne Basistheme einbinden. Aber man muss sich ja nicht unnötig Arbeit machen. Das Schöne an Grid-Frameworks ist, dass man sich keinen Kopf mehr um das Funktionieren des Layout machen muss, einschließlich Weiterentwicklung und Updates. Die zugehörigen Basisthemes sind, auch wenn sie schwergewichtiger aussehen, eigentlich nur Boilerplates.
Ich nutze derzeit Zen, hatte aber auch schon Foundation und Bootstrap. Ich habe mir das Subtheme so aufbereitet, dass ich für ein neues Projekt eine Kopie ziehe und diese dann verändere. Damit habe ich die für mich sinnvollen Voreinstellungen, bin aber gleichzeitig maximal flexibel.
Wenn Du Compass installierst, bekommst Du SASS mitgeliefert. Übrigens hat Compass auch eine ziemlich ausgedehnte Mixin-Bibliothek.
Viele Grüße
kissmedve
Das Zen-Theme-Framework
am 22.11.2016 - 07:11 Uhr
Das Zen-Theme-Framework schaut sehr interessant aus, leider ist dieses auch noch nicht in einem stable-release zu erhalten. Ich werde es dennoch einmal ausgiebig testen. vielen Dank
Hi, ich habe jetzt ein Theme
am 23.11.2016 - 14:52 Uhr
Hi, ich habe jetzt ein Theme mit folgender Ordnerstruktur:
Name
-config
--install
---name.settings.yml
-css
--base
---theme.css
---theme.css.map
-scss
--theme
---theme.scss
-templates
--name.html.twig
--page.html.twig
-name.info.yml
-name.libraries.yml
-logo.png
Hier die Inhalte der Dateien:
#name.settings.ymllogo:
path: 'themes/hemcau/logo.png'
use_default: false
#name.info.ymlname: name
description: Mein erstes D8 Theme.
type: theme
core: 8.x
libraries-override:
core/normalize: false
system/base:
css:
component:
css/components/clearfix.module.css: false
classy/base:
css:
component:
css/components/breadcrumb.css: false
css/components/button.css: false
css/components/more-link.css: false
css/components/pager.css: false
css/components/tabs.css: false
# Define regions
regions:
header: 'Header'
content: 'Main content'
footer: 'Footer'
#name.libraries.ymlglobal:
version: 0.1
css:
theme:
css/theme/theme.css: {}
js:
js/modernizr.js: {}
Templatedateien:
#name.html.twig
{%
set classes = [
'region',
'region-' ~ region|clean_class,
]
%}
{% if content %}
<div{{ attributes.addclass(classes) }}>
{{ content }}
{% endif %}
{# page.html.twig #}<div class=page">
{% if page.header %}
<header>
HEADER
{{page.header}}
</header>
{% endif %}
{% if page.content %}
<main>
MAIN
{{page.content}}
</main>
{% endif %}
{% if page.footer %}
<footer>
FOOOOOOTER
{{page.footer}}
</footer>
{% endif %}
</div>
und meine scss-Datei
@import "compass";html
{
background-color: yellow;
}
header
{
background-color: blue;
}
Die Header und Foooter Ausgaben werden übernommen und auch ausgegeben. Aus der SCSS-Datei werden auch css-Dateien generiert, leider haben die keinerlei Wirkung auf das System. Ich vermute, dass ich die Struktur mit der libraries.yml nicht verstanden habe.
Es wäre nett , wenn mich jemand von euch aufklären könnte.
besten Dank
Andy
Lösung:
am 23.11.2016 - 15:57 Uhr
entscheidend sind hier die letzten zwei Zeilen!!!!
#name.info.ymlname: name
description: Mein erstes D8 Theme.
type: theme
core: 8.x
libraries-override:
core/normalize: false
system/base:
css:
component:
css/components/clearfix.module.css: false
classy/base:
css:
component:
css/components/breadcrumb.css: false
css/components/button.css: false
css/components/more-link.css: false
css/components/pager.css: false
css/components/tabs.css: false
# Define regions
regions:
header: 'Header'
content: 'Main content'
footer: 'Footer'
libraries:
- name/global
Wäre vielleicht Bourbon Neat
am 29.12.2016 - 14:36 Uhr
Wäre vielleicht Bourbon Neat sowas (http://neat.bourbon.io/)? Das "Basic"-Theme verwendet das zum Beispiel + Bourbon (http://bourbon.io) für zusätzliche Mixins.
Wenn du keine zusätzlichen Umwandlungen/Task brauchst (imagemin, uglify, browsersync, etc.), würde ich Node.js und node-sass installieren.
Und wie hier schon gesagt wurde, die Mühe lohnt sich meistens wirklich nicht, ein Theme von Grund auf neu zu erstellen. Bzw. man kann sich dann auch gleich die Templates aus den Core Themes Stable oder Classy ziehen, weil eins von beiden sowieso als Basis-Theme verwendet wird. Ich habe früher auch Zen verwendet, da es aber noch keine für D8 verwendbare Version gibt, bin ich auf "Basic" umgestiegen.