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

Question

Wenn es um Webdesign geht, bin ich schrecklich darin, etwas auch nur annähernd gut Aussehendes zu produzieren.Zum Glück gibt es viele kostenlose Quellen für Design Vorlagen.Ein Problem bei diesen Designs besteht jedoch darin, dass sie nur eine einzelne Seite und nicht viele Anwendungsfälle abdecken.Wenn Sie einen Blick darauf werfen CSS Zen-Gärten, sie haben eine einzige HTML-Datei und können diese radikal anders gestalten, indem sie einfach 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 thematisiert werden kann.Was ich mir vorstelle, ist eine Reihe von Regeln dafür, wie Sie Ihren HTML-Code schreiben und welche Felder, Listen, Menüs und Stile Sie verwenden sollen.Es kann eine Reihe von Standardtestseiten erstellt werden, die die verschiedenen Verwendungszwecke abdecken, und eine neue CSS-Datei muss gleichzeitig alle verschiedenen Seiten in einer schönen Ansicht unterstützen.

Gibt es Projekte, die etwas Ähnliches abdecken wie das, was ich beschreibe?

Answer 1

Ich habe verwendet Blueprint-CSS, es ist einfach und nützlich, wie Sie sehen werden.Es gibt auch einige Ruby-Skripte, mit denen Sie die Anzahl der Spalten und den Abstand zwischen ihnen ändern können.Standardmäßig sind es 950 Pixel für ein Span-24-Element.

Answer 2

Besuche die Grids-Framework von YUI.Besonders toll ist das Grid Builder.Außerdem verfügen sie über eine Reihe von Reset-, Basis- und Schriftart-CSS-Dateien, die Ihnen eine gute Grundlage bieten, auf der Sie aufbauen können.

Answer 3

Im Allgemeinen versuche ich einfach, den Richtlinien des HTML-Standards selbst zu folgen.

• Überschriften werden mit „h“-Tags versehen (also ein H1-Tag für die Hauptüberschrift, dann ein oder mehrere H2-Tags darunter usw.).
• Freier Text wird in P-Tags in Absätze gruppiert.
• Logisch gruppierte Informationsabschnitte werden in DIV-Tags gespeichert.
• Jede Art von Liste (sogar Menüs, die Sie eventuell horizontal anordnen möchten) gehört in Listen-Tags wie UL, OL oder DL.
• Informationstabellen werden in TABLE-Tags eingefügt.Verwenden Sie KEINE Tabellen-Tags für das Layout.
• Seien Sie schlau mit Ihren ID- und KLASSE-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 eine Seitenfußzeile.Weisen Sie Elementen, die sich wiederholen, aber ähnlich sind (die Sie möglicherweise mit einem ähnlichen visuellen Stil rendern möchten, dieselbe Klasse zu) zu.

Ich beginne immer mit einer sehr einfachen, vertikalen Seite – führe einfach alles, was ich möchte, in Schwarzweiß auf der Seite aus.Dann beginne ich mit dem Hinzufügen von CSS, um sicherzustellen, dass die Bits so formatiert und angeordnet sind, wie ich es möchte.

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

Answer 4

BluePrintCSS war, soweit ich weiß, das erste CSS-Framework.Als YUI CSS Framework hilft es Ihnen bei der Handhabung des Layouts.

Mit einem solchen Framework können Sie mehrere CSS-Codes für Ihre Website erstellen.

BluePrintCSS ist ein ziemlich ausgereiftes Projekt, daher empfehle ich Ihnen, es sich anzusehen.