boesebeck
Crownpeak employee

CSS Entwicklung und FS

Hallo,

mich würde mal intressieren wie ihr mit FirstSpirit eure CSS entwickelt?

  • Was für Editoren benutzt ihr?
  • Habt ihr eine große CSS, oder abhängig von den jeweilgen Features innerhalb der Absätze einzelne CSS Dateien?
  • Generiert Ihr euch die CSS mittles Skripte und Projekteinstellungen?
  • Kann man den Prozess verbessern?

Gruß

Gerrit

12 Replies
witt
I'm new here

Hi Gerrit,

ich hab es mir mittlerweile angewöhnt, die CSS Inhalte in Formatvorlagen auszulagern, so dass ich mehrere Ziele damit annähernd erreichen kann:

a) Innerhalb von FirstSpirit kann ich das nach Bereich/Feature aufteilen

b) Während der Generierung inkludiere alle Formatvorlagen in eine CSS Datei mittels $CMS_RENDER(template:"....")$

c) Durch die Aufsplittung können mehrere Personen gleichzeitig an unterschiedlichen Teilen der CSS Datei arbeiten

d) Es gibt mehrere "Hüllen" in der Medienverwaltung die dann Bereichs spezifisch gefüllt werden

z) Ich persönlich glaube, dass ich somit auch Redundanzen schneller erkennen und vorbeugen kann.

Bei der Entwicklung eines HTML Prototypen bin ich privat mittlerweile auf Webstorm/Phpstorm umgestiegen.

0 Kudos
boesebeck
Crownpeak employee

Intressant, das könnte man auch für JavaScript nutzen. Kannst du dazu ein KB Blogbeitrag erstellen?

0 Kudos
arnbae
I'm new here

Hallo,

wir binden generell YAML (www.yaml.de bzw. builder.yaml.de) ein, weil es rein CSS-seitig eines der ausgereiftesten und am aktivsten gepflegten Frameworks darstellt. Die Modularität ermöglicht es, den YAML-Core im Medienpool zu halten, und dann die User-CSS-Dateien in einem anderen Bereich (bei uns ebenfalls im Medienpool, aber auch Formatvorlagen wären denkbar) zu halten.

Prinzipiell ist der YAML-Core damit update-fähig, wenn ... FS nicht wäre:

  • Es gibt momentan keine Möglichkeit (außer mit einem selbstgebauten Script), die bestehenden YAML-Dateien von Platte 1:1 mit einer neuen Version upzudaten
  • Das wäre auch schon im Sinne einer schnellen Entwicklung sinnvoll: Oft entwickle ich neue Versionen in einer generierten, statischen Version, und spiele dann die fertigen CSS wieder ins FS - momentan mit Copy & Paste
  • YAML ist bei uns generell im Masterpaket vorhanden. Ohne eine Updatemöglichkeit heißt das: Medien aus Paket nehmen, löschen, neue Medien in den Pool ziehen, schauen, ob die Referenznamen noch stimmen, wieder ins Paket nehmen, Paketupdate testen ... :smileycry:
  • Andere Schwierigkeiten: Zum Glück behält FS die Pfadrelationen zwischen den CSS-Dateien und auch die Dateinamen weitgehend bei, so dass man sich im YAML-Core sparen kann, jede Datei zu parsen (beispielweise, wenn sie eine Background-URL enthält), und URLs durch $CMS_REF$ zu ersetzen. Das müsste man nämlich nach jedem YAML-Update wieder neu machen.
  • Ansonsten stellt einen FS wegen des modularen Aufbaus vom YAML vor eine Herausforderung. Wenn man das aber gemeistert hat, hat man ein mächtiges Framework, welches vollständig und robust in FS-Projekte integriert ist
0 Kudos
boesebeck
Crownpeak employee

Hier könnt man überlegen einen Importer für diese CSS/JS zu schreiben, der die jeweilige CSS nach url:"" scannt und in ein passendes $CMS_VALUE(ref(media:"filename"))$ umwandelt, und dann die jeweiligen Medien in den Zielprojekten aktualisiert. Ich habe sowas schonmal bei einem Partner gesehen, evtl kann er dieses mal der Community zur Verfügung stellen.

rbitdd
Returning Responder

Oh, den Importer hätte ich gerne! 🙂

Ich hab in den letzten drei Tagen x-mal das Stylesheet neu importieren und anpassen müssen, weil der HTML-er tausend Änderungen gemacht hat.

0 Kudos

Hallo zusammen,

ich verwende auch das YAML Framework für meine Projekte (YAML, PIE, PhPStorm, JQuery und noch allerlei andere nette Dinge). Meine Entwicklung sieht genauso aus, wie von Herrn Bär geschildert aus allerdings habe ich aktuell nicht allzu große Probleme die CSS von meinem lokalen System in das FirstSpirit Projekt zu bekommen.

Ich werde diesen Post in den kommenden Tagen um die notwendingen Infos anreichern. Smiley Happy:smileygrin::smileysilly:

Rückfrage:

>Ich hab in den letzten drei Tagen x-mal das Stylesheet neu importieren  und anpassen müssen, weil der HTML-er tausend Änderungen gemacht hat.

Warum werden die Dateien überspielt, oder wie von Herrn Bär geschrieben entfernt, importiert und Referenzen angepasst?

>YAML ist bei uns generell im Masterpaket vorhanden. Ohne eine  Updatemöglichkeit heißt das: Medien aus Paket nehmen, löschen, neue  Medien in den Pool ziehen, schauen, ob die Referenznamen noch stimmen,  wieder ins Paket nehmen, Paketupdate testen ...

Warum löschen sie die Dateien und überbügeln sie nicht nur einfach?

0 Kudos
rbitdd
Returning Responder

Daniel Witt schrieb:

Warum werden die Dateien überspielt, oder wie von Herrn Bär geschrieben entfernt, importiert und Referenzen angepasst?

Wie soll ich es denn sonst machen?

Warum löschen sie die Dateien und überbügeln sie nicht nur einfach?

Löschen? Ich lösche lediglich den Inhalt des Stylesheets. Nicht das ganze "Objekt".

Wie darf ich "überbügeln" verstehen? Kann es sein, das wir aneinander vorbeireden?

Ach ja, YAML ist mir übrigens gänzlich unbekannt. Aber es scheint ja empfehlenswert zu sein.

Werde mir das dann bei Gelegenheit zu Gemüte führen.

0 Kudos

Hallo,

ja, die Vorgehensweise von "überbügeln" würde mich auch interessieren (hab den entsprechenden Menüpunkt nicht gefunden, und traue mich nicht, beim Helpdesk anzufragen :smileylaugh:). Um mein Verständnis zu verdeutlichen: Mir geht es darum, ein ganzes Paket von Medien (CSS, Images ...), welches auf einem Server geändert wurde, auf einem anderen zu aktualisieren. Und zwar mit wenig Aufwand / auf einmal. Ein einzelnes CSS von einem statischen Entwicklungs-Prototypen in FS zu aktualisieren ist weniger das Problem.

Grüße,

Arndt Bär

0 Kudos
jpee
I'm new here

Hallo Gerrit,

bei uns liegen die CSS-Dateien im Medienpool und Bilder werden daraus per $CMS_REF und dem Datei parsen Häkchen referenziert. Die nötigen CSS Dateien werden in Abhängigkeit einer Seitenvariablen in den Seitenvorlagen mittels $CMS_SWITCH$ eingebunden. Wir haben also pro Website im Projekt 1 großes CSS.

Meine Arbeitsweise sieht meist so aus, falls Anpassungen im Layout gemacht werden müssen, dann schreibe ich sie erst mit Firebug in Firefox bis es passt. Wenn es passt dann füge ich die Änderungen in das Medium ein. Dann wird nochmal kurz in Firefox, IE und Chrome kontrolliert. Für das Einfügen benutze ich den Editor Notepad++, der besitzt alles was man eigentlich benötigt, Syntax-Highlighting und suchen und ersetzen.

Absätze und Formatvorlagen besitzt dann höchstens eine Klasse und keine Styleinformationen.

Dass mehrere Personen eine CSS-Datei bearbeiten kam bisher eigentlich gar nicht vor, da für unterschiedliche Websites, wie oben erwähnt, unterschiedliche CSS existieren. Es gibt zwar gewisse Ähnlichkeiten zwischen diesen CSS-Dateien aber Redundanzen sind bei uns weniger relevant, da die Websites unterschiedliche Produktlinien besitzen.

Viele Grüße aus Leipzig

Johannes Perlet

0 Kudos