Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

CSS-Templates automatisch generieren mit BearCSS

Das kostenlose Online-Tool BearCSS ist eine große Hilfe dabei, Styles aus HTML-Dateien in eine separate CSS-Datei auszulagern. Es liest automatisch alle Style-Elemente einer bestehenden HTML-Seite aus und erstellt eine CSS-Datei, die dann heruntergeladen werden kann. Wir stellen Euch BearCSS kurz vor.

BearCSS Webseite

Elegante CSS-Styles auf Knopfdruck

Es ist nicht immer einfach, den effektivsten Weg bei der Webentwicklung zu finden. Man beginnt mit einer einzigen HTML-Datei, die den gesamten Quellcode enthält. So ist es oft mühselige Fleißarbeit, alle Styles nachträglich als ordentliches CSS-Template auszulagern. Mit BearCSS lässt sich in drei einfachen Schritten aus einer bestehenden HTML-Datei ein solides CSS-Template generieren, dass alle definierten HTML-Elemente, Klassen und IDs enthält. Man lädt seine HTML-Datei einfach hoch, das CSS-Template wird automatisch von BearCSS erzeugt und kann dann als einzelne CSS-Datei heruntergeladen werden.

BearCSS wurde von den beiden Belfaster Studenten Kyle Gawley und Jordan Henderson mit Hilfe der Webentwicklungsumgebung Coda für Mac entwickelt. Technisch basiert BearCS auf HTML5, CSS, jQuery und PHP.

BearCSS mag nicht für jeden Workflow geeignet sein. Aber das Tool kann sehr viel Zeit sparen, wenn man aus HTML nachträglich auf Knopfdruck gut strukturierte CSS-Templates erzeugen möchte.

Weiterführende Links:

Bitte beachte unsere Community-Richtlinien

8 Reaktionen
reraiseace

@Michael - der aus Berlin
Mhm, okay. Dann vermutlich nur CSS welches im body steht. Das kann bei alten Webseiten aber öfter noch der Fall sein. Wenn BearCSS keine Styles aus dem head ausliest ist es nochmal unbrauchbarer für die meisten. Die Idee könnte besser sein, muss vielleicht nur noch zu Ende gedacht werden.

Antworten
ernstzunehmend

Vielleicht nicht die beste Anwendung im Web, weil Inline CSS so was von 2001 ist, aber ein Blick auf die Internetseiten der Jungs zeigt nicht nur zwei schöne Seiten, sondern auch zwei Projekte die sich wohl noch in einer geschlossenen Beta Phase befinden, aber interessant klingen. Zum einen ein "online scrapbooking tool" und zum anderen ein "Event promotion & ticketing" Service. Kann man mal im Auge behalten.

--
Links:
Kyle Gawley: http://kylegawley.co.uk/

Antworten
Timo

Ich kenne wirklich niemanden, der so einen Workflow hat. Erst HTML mit Inline-CSS? Macht doch schon aufgrund sich wiederholender Klassen keinen Sinn, oder verstehe ich da was falsch?

Was den Artikel angeht:
Ich gehe mal davon aus, dass der Link am Ende der Seite eigentlich direkt zur Bear CSS Seite führen sollte und nicht auf den Originalartikel von thenextweb.com.
Nun ist es aber doch passiert und mir fällt auf, dass Frau Steinberg den englischen Originaltext von Harrison Weber nahezu eins zu eins ins Deutsche übersetzt hat.
Kann man machen, dann aber bitte mit Hinweis auf die Quelle/den Autor. So ist das ist meiner Meinung nach journalistisch nicht in Ordnung.

Antworten
Michael - der aus Berlin

@reraiseace das würde ja nur dann was bringen wenn das tool auch inlinestyles auslesen würde. Aber das tut das Tool ja scheinbar auch nicht. Auf jeden Fall keine CSS Styles aus dem HEAD die mit eingebunden wurden. Von daher erschliesst sich mir generell kein Sinn warum man auf dieses Tool setzten sollte, bzw. wo überhaupt der Mehrwert liegt.

Antworten
reraiseace

Die Seite bringt nur nachträglich was, wenn ein Projekt vorliegt, welches mit Inline-CSS gecodet wurde. Sonst sehe ich da keine Verwendung für. Normal trennt man HTML und CSS gleich voneinander. Wer ein CSS Framework verwendet, wird da auch nicht drum rum kommen.

Naja ich stell meinen PC auch gleich neben den Kühlschrank ;)

Antworten
belearas

Ja aber warum schreibt man sowas nicht gleich in eine css Datei? Wer arbeitet denn wirklich so??

Wäre das selbe wenn jemand eine Anleitung erstellt, wie entfernt man Fäkalien am WC weil man zu faul war um zu spülen *rolleyes*

Antworten
Markus

hab ich schon vor ca. 2 Wochen getestet... net so dolle :)
mach doch lieber mein eigenes zeug

Antworten
Martin

Kurzer Artikel der mir den Sinn dieses Tools nicht wirklich beschreibt.

Wer Arbeitet nicht gleich so, HTML -> CSS Datei?

Habe ich das richtig verstanden, wenn ich die klassen und div´s in der HTML styles angebe, das dieses Tool dann eine CSS Datei erstellt - das wars?

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.