Stylesheets aus HTML-Markup generieren: Bear CSS

Veröffentlicht am 14. Februar 2012 • 3 Kommentare • Themen: , ,
bear-css-logo

Die meisten Webdesigner werden beim Coding einer Seite ähnlich vorgehen. Sofern nicht direkt ein Template (z.B. Boilerplate) zum Einsatz kommt, schreibt man zunächst das HTML-Markup. Wenn die HTML-Struktur steht, wird die CSS-Datei angelegt und alles über das Stylesheet gestaltet.
Wenn auch ihr Websites nach diesem Muster umsetzt, kann Bear CSS euren Workflow spürbar beschleunigen.

Responsive Webdesign!

Mein neues Video-Training mit über 8 Stunden Laufzeit! Programmierung, Konzeption, Gestaltung – Webdesign für alle Geräte und Auflösungen.

Jetzt bei Amazon bestellen!

Was macht Bear CSS?

Bear CSS generiert CSS-Dokumente auf Grundlage einer HTML-Struktur. Nachdem Ihr das HTML-Gerüst erstellt habt, ladet ihr die Datei nach Bear CSS hoch und erhaltet als Ergebnis eine CSS-Datei, die alle notwendigen Selektoren bereits beinhaltet.

Wenn Ihr diese Beispiel-Datei verwendet: 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Titel der Seite</title>
</head>

<body>
<div id="container">
  <header> </header>
  <article class="content"></article>
  <footer></footer>
</div>
</body>
</html>

Erhaltet ihr im Austausch folgendes CSS-Dokument: 

html { }

body { }

/*******************************************************************
LAYOUT
*******************************************************************/

div { }

#container { }

header { }

footer { }

article { }

.content { }