CSS anstatt Frames

[Jens-A. Koch]

Hi,

In der cssbuilder.ini habe ich zusätzlich die möglichkeit zum Import externer, also nicht im theme liegenden css-dateien hinzugefügt.

Das hab ich jetzt erst gesehn - ist super, denn damit kann man das CSS von jQuery einbinden.

@alle Mitglieder: Werft euch ins getümmel und bringt eure ideen zum wohle aller mit ein!
@thunder: ich würde mich freuen wenn du das ganze leiten und koordinieren würdest

Kann ich nur unterstreichen!

So mal eine kleine Ideenzusammenfassung, damit nichts verloren geht.

Ideenliste aus diesem Thread

1. CSS2 -> HTML5+CSS3

Ein zweites Projekt dann auf HTML5 + CSS3 zu gegebener Zeit, evtl. dafür dann
in der clansuite.config.php ein Flag ob CSS2 oder CSS3 Framework genutzt werden soll

2. CLI - Command Line Interface

@todo: Ideal wäre wenn man das CSS-Builder Provisorium bei gelegenheit als cli umfunktionieren würde, damit man den builder direkt, ohne umweg über den browser, starten kann.

3. Kompression
Eventuell CSSMin einsetzen, um die Enddatei zu komprimieren.

- minify (on the fly compression) für js und css

- CSS-Compressor https://github.com/codenothing/css-compressor
- CSSMin - http://code.google.com/p/cssmin/
- JSMin
- CSSMin+JSMin über Minify - https://github.com/jyggen/Minify

5. Angabe der CSS Dateien in der Konfigurationsdatei (.ini)
- denkbar auch steuerung über die theme_info.xml, Abschnitt <css/>

6. CssBuilder in Modul verwandeln
- evtl. mit in den Thememanager
- interaktiv über webinterface selektieren, welche CSS Dateien einbezogen werden sollen

Webinterface
1) theme auswählen
2) verzeichnis und dateien anzeigen
3) css liegen modular vor, auswählen welche zusammengefasst werden sollen
4) zusätzliche imports bestimmen (rückbezug aufs csfw und jquery css herstellbar)
5) zusammenfassen der dateien zu einer
6) komprimieren der datei
7) dateinamenskonvention: name des themes ist auch dateiname für die zu erzeugende css
abweichen davon, über eingabe eines dateinamens.

Gruß Jens

[paulbr]

3. Kompression
Eventuell CSSMin einsetzen, um die Enddatei zu komprimieren.

Der CssBuilder komprimiert jede einzelne css datei und schreibt diese danach
in eine einzige (one-file datei = enddatei) zusammen.
Jede css datei ist so eine zeile in der enddatei.
Zu importierende css, z.b. der core, wird am anfang importiert.
Ein nochmaliges komprimieren durch minify oder CSS-Compressor wird nicht benötigt.

Man sollte eine einheitliche struktur für die css in den themen ordnern anstreben.
z.B.

/standard
  /css
  /umcompressed
      /cssdatei1.css
      /cssdatei2.css
      /cssdatei3.css
      /cssdatei4.css
      /cssdatei5.css

  /cssbuilder.ini (builder konfigurationsdatei)
  /standard.css (import-datei für das template)

Die import.css bzw. standard.css ist dann jene welche immer ins template
geladen wird. Diese sollte einheitlich in jedem Theme gleich heissen.

Die css dateien 1-5 aus /umcompressed werden nun mittels CssBuilder einzeln komprimiert
und in die standard.css gespeichert. Der übersichtlichkeithalber jede css datei als einzelne
Zeile mit Header angaben zu jeder datei.

WICHTIG: imagepfadangaben in den uncompressed css dateien, müssen
eine ebene höher liegen, d.h. ausgehend von der import.css.
/css
  /umcompressed
      /cssdatei1.css
  /standard.css
/images

Pfadangeabe zu /images im cssdatei1.css nicht:
background: #fff url(../../images/css/fieldgrey.png);
sondern:
background: #fff url(../images/css/fieldgrey.png);
Ausschlaggebend ist der Pfad ausgehend von der import-datei.

Im Themenmanager wählt man das Thema aus, welches man bearbeiten möchte.
Konfiguriert es mittels Interface, die Änderungen werden in die cssbuilder.ini des jeweiligen
theme gespeichert.
Auf Knopfdruck kann man dann den CssBuilder für dieses Theme ausführen.

6. CssBuilder in Modul verwandeln
...
- interaktiv über webinterface selektieren, welche CSS Dateien einbezogen werden sollen

Hierbei ist die Reihenfolge zu beachten, manche css dateien müssen vor anderen geladen werden.
files = "
    admin.css,
    fieldset.css,
    vertical-tabs.css,
    about.css
"
Die Reihenfolge der Eintragung bestimmt die Gewichtung.
Childdefinitionen müssen nach den Elterndefinitionen geladen werden.

Aufzählung Punkt 5 und 6 sind gleich, da der builder jede css datei einliest, komprimiert und dann
in die gesamt datei speichert. Nochmaliges komprimieren selbiger, würde lediglich die Header Informationen löschen.
Denke diese machen Sinn, da sie den Namen der css-datei, ersteller datum etc... beinhaltet.

Das importieren von z.b. jquery css dateien ist da auch kein problem, man sollte diese allerdings
als Import ans ende der gesamt datei stellen, gefolgt von den spezifischen Änderungen.

1. @import core-css (framework)
2. themenspezifische änderungen der core-css
3. themenspezifische styles
4. ggfs. themenspezifische browser hacks
5. @import jquery-css
6. ggfs. themenspezifische änderungen der jquery css-definitionen

Die jquery css-dateien sollte man ebenfalls wie die core-css dateien des Frameworks
autark komprimieren und in eine one-file datei zusammenfassen (CssBuilder).

Kurz gesagt (Ziel erreicht):
Im Template braucht lediglich die standard.css zum laden angegeben werden.
Somit steht das core-framework, die themespezifischen styles und die jquery
core-css als auch dessen themenspezifische änderungen zur verfügung.


gruss
paul