Questions & Answers

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

Type a product name