kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Stylesheets aus HTML-Markup generieren: Bear CSS

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

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 { }

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

3 Kommentare

  1. Felix

    Verfasst am 14. Februar 2012 um 21:29 Uhr.

    Danke für den Tipp! Ist bestimmt ganz nützlich

  2. Anton

    Verfasst am 2. März 2012 um 10:15 Uhr.

    Guter Tipp! Danke!

  3. Benjamin

    Verfasst am 30. März 2012 um 11:42 Uhr.

    Gerade ausprobiert und schade: Verschachteln muss man trotzdem noch und was die Sortierung betrifft ist es einfach der Reihe nach gelistet – dabei könnten Styles für Klassen in Paragraphen einfach an den Anfang gestellt und Divs nacheinander sortiert werden.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.