Theme Frameworks / Grid System
am 10.09.2014 - 15:32 Uhr in
Hallo zusammen,
ich bin gerade dabei ein neues Projekt zu starten und wollte wie gewohnt gerne ein Basis Theme dafür verwenden. Vor einiger Zeit kam ich immer recht gut mit dem Zen Theme zurecht. Dies aber alles noch unter Drupal 6.x.
Mittlerweile hat sich einiges getan, HTML5, SASS, Responsive, etc.
Also las ich mich erstmal wieder ins neue Zen ein und somit auch in Omega, Bootstrap, Adaptive Theme
Je mehr ich las, desto verrückter wurde ich natürlich. Derzeit teste ich die einzelnen Frameworks aber ich denke mal dass man sich nicht zu 100% so schnell für eins entscheiden kann. Daher wird es wohl Zen werden, einfach aus dem Grund dass es zu viel ist.
Somit beschäftigte ich mich auch mit SASS, mietete mir einen vServer, installierte ruby, sass, compass auf einem Server, ohne jemals ne Komandozeile genutzt zu haben :)
Bis ich mich dann fragte. Wozu eigenlich SASS? Klappt doch wunderbar mit dem normalen CSS. Nunja ich probiere gerne Neues aus aber ist es der Aufwand wirklich wert? Paar nette Sachen gibt es ja unter Sass.
Das größte Problem ist jedoch Grids und somit z.B. das Zen Grids System dessen Nutzung nahe liegt da Zen Theme dies bereits gut unterstüzt.
Hier blicke ich jedoch noch gar nicht durch, ich lese immer nur wie einfach das sein soll. Davon habe ich jedoch noch nichts bemerkt.
Ich kenne noch das fixed Layout damals im Zen, das war einfach.
Die Frage ist doch eher, ich baue eine Seite dessen Layout sich wenig bis gar nicht ändert. Im Rahmen der Entwicklung wird es sicher hier und da zu Änderungen in den Maßen der Seite geben, Positionierungsänderungen etc.
Aber ist sie dann mal fertig, dann bleibt es so. Nur Responsiv soll sie sein.
Ist es in diesem Fall nicht einfacher auf Zen Grid zu verzichten ?
Oder kann mir jemand Hilfestellung leisten, wie ich mit dem Thema warm werde und die Vorteile von Zen Grids nutzen kann, es vielleicht sogar toll finde und die Vorteile sehe :) ?
Derzeit stecke ich zumindest in einer Sackgasse und weiß nicht so recht weiter.
Für eure Zeit bedanke ich mich im Voraus.
- Anmelden oder Registrieren um Kommentare zu schreiben
Würde mich ehrlich gesagt
am 10.09.2014 - 16:26 Uhr
Würde mich ehrlich gesagt auch alles interessieren - ich schreibe meine Templates stets selbst, so richtig per Hand. Ich halte CSS jetzt nicht für so überaus komplex, dass Frameworks wirklich nötig sind. Das mag bei großen Agenturen oder Teams mit mehreren Personen vorteilhafter sein, wenn Frameworks genutzt werden, aber Dank Firebug und entsprechenden Browserfunktionen sollte es eigentlich auch da kein Problem sein, in fremden CSS-Definitionen klarzukommen (mag jemand widersprechen, der hier andere Erfahrungen gesammelt hat).
Wenn ich dann noch sehe, dass Bootstrap z.B. alleine schon 6200 Zeilen und 130 KB hat, halte ich das für völlig übertrieben - wenn ich eigene Templates schreibe, haben selbst komplexe Layouts nicht mehr als 4000 Zeilen und vielleicht 90 KB - und das ist dann Code, der wirklich sehr individuell zusammengestellt ist und nicht - wie bei Bootstrap & Co - einfach mal alles beinhaltet, was man irgendwann mal gebrauchen kann.
Genauso sehe ich das bei den Theme Frameworks bei Drupal. Hat man so ein Framework/ Basis-Theme aufgesetzt, hat man erstmal locker mit an die (oder gar über) 100 Dateien zu tun, die dann im eigenen Theme munter überschrieben werden. Auch hier frage ich mich ernsthaft, ob das wirklich ein Gewinn ist, so vorzugehen.
Das ist natürlich eine
am 10.09.2014 - 16:40 Uhr
Das ist natürlich eine Grundsatzfrage, wie man entwickeln möchte.
Ich mag bestimmte Richtungen und Grundsätze von z.B. Zen.
Als ich damals damit angefangen habe wäre ich aufgeschmissen gewesen. Allein auf die rafinierten Selektoren bzw. Klassen zu verzichten, war für mich nicht möglich.
Aber das Thema mit vielen Zeilen Code und zig Templates die man auch nie benötigt, beschäftigte mich sofort als ich erste mal den Zen Ordner öffnete.
Mittlerweile sind bei Zen die Template und css Ordner leer und nichts wird überschrieben, benötigt man dann ein eigenes Template, kopiert man dieses aus dem Base Theme. Dank Sass werden nicht genutze Selektoren in der CSS Datei gar nicht ausgegeben und bei Bedarf kann man diese natürlich raus schmeissen.
Aber naja, es wird immer eine Glaubensfrage sein :) Ich persönlich bin zumindest deutlich schneller mit einer Basis wie Zen, wenn man sie kennt. Jetzt ist der Umstieg von Version 6 auf 7 natürlich mit anfänglichen Aufwand verbunden.
Es dauert ein paar Tage, bis
am 10.09.2014 - 16:49 Uhr
Es dauert ein paar Tage, bis man sich mit Sass und Compass angefreundet hat, aber ich möchte es nicht mehr missen. Ich fahre Sass/Compass lokal auf meinem Entwicklungssystem und nicht auf dem Server.
In einem CSS-File kommen leicht tausend Zeilen zusammen und mit Sass hat man einfach einen besseren Überblick über seinen CSS-Code. Außerdem ist er lesbarer, da ich die Anweisungen strukturiert schreiben kann. Die Umsetzung in CSS erfolgt automatisch.
Ein einfaches Beispiel für die Möglichkeiten ist etwa die Benutzung von Variablen für Farbwerte. Die stehen dann an einer Stelle und eine Änderung einer Variablen zieht sich dann durch alle abhängigen CSS-Dateien. Außerdem bieten die "Mixins" so viele Erleichterungen, daß einem schier die Augen aus dem Kopf fallen.
Bei leveluptuts.com sollte man sich mal die Videos zu Sass und Compass ansehen, es lohnt sich.
Zen liefert einem übrigens bereits die Sass-Dateien mit.
.
Werner
drupal-training.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *
Ich verwende seit über einem
am 10.09.2014 - 17:05 Uhr
Ich verwende seit über einem Jahr in allen Projekten SASS/Compass. Man kann nach einer kurzen Einarbeitungszeit viel Zeit beim Theming/CSS sparen.
Hier einige Beispiel was man so machen kann:
Variablen definieren und immer wieder verwenden. Änderung nur noch an einer Stelle nötig:
$lightBlue: #1f9cd9;
$darkBlue: #1171b7;
$veryLightBlue: #e7f2fb;
$invert: #FFFFFF;
$LightGrey: #CCCCCC;
$mediumGrey: #999999;
$darkGrey: #444444;
Verschachteln:
.quicksearch {
padding-top: 40px;
.startseite & {
display: none;
}
.glyphicon-search {
color: $invert;
}
}
Sticky Footer erstellen mit einer einzigen Zeile:
@include sticky-footer(72px, "#main", "#layout_footer", "#footer");
Cross Browser Border Radius:
.detailWrapper {
@include border-radius(25px);
}
Mathematische Funktionen und Schleifen:
.eqRating {
@for $i from 1 through 100 {
.eq-#{$i} {
background: url(../images/background/indicator.png) no-repeat;
position: relative;
top: -5px;
display: block;
height: 20px;
background-position: 1% * ($i);
}
}
}
WEBTRANSFORMER
Danke für die Antwort. Der
am 10.09.2014 - 17:06 Uhr
Danke für die Antwort. Der Link ist wirklich nett, werde ich mir heute Abend mal anschauen.
Mit Sass habe ich mich schon abgefunden, allein schon Variablen habe ich mir immer gewünscht :)
Primär drehe ich mich jedoch mit dem Grid / Layout Systemen im Kreis.
Also Responsive ist ja eigentlich nix anderes als ein fluid Layout, wie es damals auch schon in Zen enthalten war. Omega, Zen, Adaptive etc. sind ja mittlerweile alle responsive. http://mobiletest.me/ nutze ich für tests.
Die Grid Systeme ermöglichen mir nur an zentraler Stelle Änderungen am Layout durchzuführen. Das heisst, ich benötige es nicht zwingend wenn ich an meiner Seite eh keine Änderungen vornehme? In diesem Fall kann ich mir das mit dem Grid doch sparen oder?
Das adaptivethemes hat wirklich nette Möglichkeiten zur Einstellung des Layouts abhängig vom Endgerät. Wie erreiche ich dies im Zen Theme?
eine generelle frage: was
am 11.09.2014 - 07:22 Uhr
eine generelle frage: was bringt das?
ein beispiel
Verschachtelung
Sass erlaubt das Verschachteln von CSS-Regeln. Damit kann die Verschachtelung der Regeln die Verschachtelung der Elemente im HTML-DOM widerspiegeln. Beispiel:
.tabs {
height: 27px;
padding: 0 10px;
li {
float: left;
height: 23px;
overflow: hidden;
padding: 5px 2px 0;
&.active {
height: 24px;
padding: 4px 1px 0;
a {
background: white;
padding: 4px 12px 5px;
}
}
}
}
Der Selektor einer verschachtelten Regel wird mit dem Selektor der darüberliegenden Regeln kombiniert, sodass in der Regel ein Nachfahrensselektor entsteht. Der obige SCSS-Code wird in folgende vier CSS-Regeln übersetzt:
.tabs {…}
.tabs li {…}
.tabs li.active {…}
.tabs li.active a {…}
es ist doch einfacher das css direkt an den browser auszuliefern als über skripte die auf dem host installiert sind....
C.A.W. Webdesign
Also gerade von der
am 11.09.2014 - 08:41 Uhr
Also gerade von der Verschachtelung bin ich auch kein großer Fan in SASS - ich habe damit noch nicht gearbeitet, das muss ich einschränkend dazu sagen... aber mir erscheint die einfache CSS-schreibweise auch einleuchtender und übersichtlicher. Wo die Verschachtelung echt gut ist, sind die wohl möglichen verschachtelten Media-Queries. Beispiel von Wikipedia:
#header{
color: red
@media (min-width: 400px){
color: blue;
}
}
Dies wird kompiliert zu:
#header {
color: red;
}
@media (min-width: 400px){
#header {
color: blue;
}
}
DAS ist nun wirklich cool - gerade das Überschreiben von Eigenschaften für das responsive Design an anderer Stelle ist in CSS etwas unübersichtlicher. Aber bisher hatte ich keine Projekte, wo das nicht auch mit reinem CSS, einigen Kommentaren und ein bisschen Struktur in der Datei zu managen war.
Was ich mir schon ganz cool vorstellen kann sind die Variablen... aber so wahnsinnig wild ist der Austausch eines Farbwerts jetzt eigentlich auch nicht. Jeder Editor bietet "Suchen&Ersetzen" an - ob das jetzt den Aufwand rechtfertigt, Ruby und SASS zu installieren und SASS zu lernen, bezweifle ich irgendwie.
Bleiben die Mixins... auch das kann an manchen Stellen die Übersicht und Arbeit erleichtern, kann ich mir vorstellen. Vor allem auch Änderungen an irgendwelchen Standard-Formatierungen, die auf verschiedene Selektoren angewendet werden sollen, sind damit sicher erheblich einfacher. Aber mit ein bisschen Organisation und Struktur in der eigenen Arbeit mit CSS und HTML sowie mit Klassen und Ids ist das eigentlich auch nicht so das wahnsinns Problem.
Also irgendwie bleibe ich dabei: CSS ist nun wirklich kein Hexenwerk und wenn ein CSS-Layout so komplex wird, dass man Variablen und Mixins braucht, sollte man vielleicht noch mal grundlegend etwas an dem CSS ändern. Wenn man sie nicht braucht, braucht man auch kein SASS (denke ich....)
Natürlich kommt man mit CSS
am 11.09.2014 - 15:53 Uhr
Natürlich kommt man mit CSS aus, das denke ich ja auch die ganze Zeit. Die Welt kommt ja fast 20 Jahre damit aus :)
Die Verschachtelung macht derzeit für mich auch noch keinen Sinn, zumindest spare ich mir dabei nichts.
Aber das bisschen was ich mit mixins und variablen gemacht habe, ich will es jetzt schon nicht mehr missen. Natürlich käme ich ohne aus, aber warum ? Für den Seitenbetrachter, Browser oder Server ist das doch völlig egal. Später ist und bleibt es CSS. Ob ich nun einmal compiliere oder nicht, wenn stört das?
Ich benötige z.B. für fast jede Unterseite eine andere Farbpalette. Da sind Variablen ein Segen.
Die mixins für CSS3 Eigenschaften (@include box-shadow) sind auch sehr nett. ODer ich definiere mir Formatierungen als Mixins.
Ich denke also Sass ist nett und ich werde es mal nutzen, bis ich einen Nachteil entdeckt habe.
Aber das mit dem Grid ist nun immer noch nicht beantwortet :)
Das Menü mache ich nun über Responsive Menus, eine wirklich nette Lösung.
Das schöne an Zen Grids ist
am 12.09.2014 - 10:31 Uhr
Das schöne an Zen Grids ist die Tatsache, dass man nicht mit vorgegebenen classes im HTML arbeiten muss, sondern im scss einfach jedes Element benutzen kann.
Beispiel:
#irgendeine-id {
@include zen-grid-container;
$zen-column-count: 16;
/* Das ist ein Container für ein Grid */
}
#logo {
@include zen-grid-item(4, 2);
/* 4 Spalten - Start in Spalte 2 */
}
#navigation {
@include zen-grid-item(6, 2);
}
Einfacher geht's nun wirklich nicht. Man kann natürlich noch viel mehr machen. Z.B. Container mit unterschiedlicher Anzahl von Spalten. Verschachtelte Grids usw. usw.
vg
md - DrupalCenter.de
mdwp* Drupal Consulting & Services
caw schrieb ... es ist doch
am 12.09.2014 - 10:52 Uhr
...
es ist doch einfacher das css direkt an den browser auszuliefern als über skripte die auf dem host installiert sind....
Man braucht auf dem Host keine Scripte, um scss zu kompilieren. Das macht man auf dem eigenen Rechner und lädt das kompilierte CSS auf den Webserver.
vg
md - DrupalCenter.de
mdwp* Drupal Consulting & Services
md schrieb caw
am 12.09.2014 - 11:09 Uhr
...
es ist doch einfacher das css direkt an den browser auszuliefern als über skripte die auf dem host installiert sind....
Man braucht auf dem Host keine Scripte, um scss zu kompilieren. Das macht man auf dem eigenen Rechner und lädt das kompilierte CSS auf den Webserver.
ja, ja aber das kompilierte muss ja zurückkompiliert werden...
C.A.W. Webdesign
Zurückkompiliert? nein, nein,
am 12.09.2014 - 11:18 Uhr
Zurückkompiliert? nein, nein, du schreibst deine *.scss Datei mit SASS. kompilierst dein SASS mit COMPASS und heraus kommt eine stinknormale CSS-Datei. Da muss ganz garantiert nichts zurückkompiliert werden. Und wie gesagt Mixins und variablen, aber auch die mathematischen Operationen sind ein wirklicher Segen.
So isses. Compass ist
am 12.09.2014 - 11:42 Uhr
So isses.
Compass ist allerdings nicht zwingend erforderlich, wenn auch sehr empfehlenswert.
vg
md - DrupalCenter.de
mdwp* Drupal Consulting & Services