Gibt es ein Standard-HTML-Layout mit mehreren CSS-Stilen?

Question

Wenn es um Web-Design geht, bin ich schrecklich in der Herstellung etwas entfernt gut aussehend. Zum Glück gibt es eine Menge frei sources für designtemplates. Ein Problem bei diesen Designs besteht jedoch darin, dass sie nur eine Seite abdecken und nicht viele Anwendungsfälle. Wenn Sie sich CSS Zen Gardens ansehen, haben sie eine einzelne HTML-Datei und können sie radikal anders gestalten, indem Sie nur die CSS-Datei ändern.

Jetzt frage ich mich, ob es ein Standard-HTML-Layout (Tags und IDs) gibt, das viele Anwendungsfälle abdeckt und generisch mit verschiedenen CSS-Dateien wie Zen Garden thematisch sein kann. Was ich mir vorstelle, ist eine Reihe von Regeln, wie Sie Ihren HTML-Code schreiben und welche Boxen, Listen, Menüs und Stile Sie verwenden sollen. Eine Reihe von Standard-Test-Seiten für die verschiedenen Anwendungen können erstellt werden, und eine neue CSS-Datei, während alle verschiedenen Seiten in einer schönen Ansicht zu unterstützen.

Gibt es irgendwelche Projekte, die etwas abdecken, das dem ähnlich ist, was ich beschreibe?

Answer 1

Ich habe Bluprint CSS verwendet, es ist einfach und nützlich, wie Sie sehen werden. Es hat auch einige Ruby-Skripte, mit denen Sie die Anzahl der Spalten und die Entfernung zwischen ihnen ändern können. Standardmäßig ist es 950px für ein span-24-Element.

Answer 2

Überprüfen Sie die Grids framework von YUI. Besonders beeindruckend ist die Grid Builder. Außerdem haben sie eine Reihe von CSS-Dateien für Zurücksetzen, Basis und Schriftart, die Ihnen eine gute Grundlage für das Erstellen bieten.

Answer 3

Ich versuche im Allgemeinen nur die Richtlinien zu befolgen, die vom HTML-Standard selbst festgelegt wurden.

Überschriften gehen in "h" -Tags (also ein H1-Tag für die Hauptüberschrift, dann ein oder mehrere H2-Tags darunter usw.).

Freitext wird in Absätzen in P-Tags gruppiert.

Logisch gruppierte Abschnitte von Informationen gehen in DIV-Tags.

Jede Art von Liste (sogar Menüs, die Sie eventuell horizontal angelegt haben möchten) gehören in Listen-Tags wie UL, OL oder DL.

Tabellen von Informationen gehen in TABLE-Tags. Verwenden Sie keine Tabellen-Tags für das Layout.

Seien Sie schlau mit Ihren ID- und CLASS-Attributen. Halten Sie IDs eindeutig und weisen Sie sie Elementen zu, von denen Sie wissen, dass sie etwas Einzigartiges auf der Seite darstellen, z. B. ein Navigationsmenü oder ein Seitenfuß. Weisen Sie Elementen, die wiederholt, aber ähnlich sind (die Sie möglicherweise mit einem ähnlichen visuellen Stil rendern möchten), dieselbe Klasse zu.

Ich fange immer mit einer sehr einfachen, vertikalen Seite an - führe einfach alles, was ich will, auf der Seite in Schwarz und Weiß. Dann fange ich an, CSS hinzuzufügen, um sicherzustellen, dass die Bits formatiert und so angeordnet sind, wie ich es möchte.

Werfen Sie einen Blick auf die Quelle meiner home page für ein Beispiel, wovon ich spreche.

Answer 4

BluePrintCSS war, von dem, was ich weiß, das erste CSS-Framework. Als YUI CSS Framework hilft Ihnen das Layout.

Diese Art von Framework wird Ihnen helfen, mehrere CSS für Ihre Website zu erstellen.

BluePrintCSS ist ein ziemlich ausgereiftes Projekt, deshalb ermutige ich Sie, es zu überprüfen.