Allzwecktemplates?

[Don P]

Hallo,

Irgendwie habe ich den Eindruck, dass jeder, der mit CSS etwas gestalten will, zuerst mal mit den gleichen Aufgabenstellungen konfrontiert ist, und sich dann quasi "zu Fuß" seine CSS-Rules zusammenbaut.

Das wundert mich, denn vor allem wenn es darum geht, Elemente einfach nur untereinader anzuordnen, gibt es grundsätzlich doch gar nicht so viele Anordnungsmöglichkeiten wie es Webdesigner gibt, die das Rad immer wieder neu erfinden.

Eigentlich suche ich so eine Art Allzwecktemplates, um einzele Elemente anzuordenen.

Beispiel:

.-----------------------------.
 |             A               |
 .----------.------------------.
 |          |                  |
...   B     |       C         ...
 |          |                  |
 .----------.------------------.

Das ist z.B. eine typische Anordnung für eine ganze Page, aber auch auch für Teile davon: z.B. kann der Bereich C selbst wieder so eine A-B-C-Aufteilung enthalten oder auch nur eine B-C-Aufteilung. Die B-C-Aufteilung kann z.B. relativ flexibel mit 30% Breite links und 60% Breite rechts definiert sein (Restbreite für padding und so).

Gibt es irgendwo solche Allzwecktemplates, die einigermaßen durchdacht und belastbar sind. Ich meine jetzt nicht tonnenschwere Gebäude als fertige Themes mit Fraben und allem drum und dran, sondern nur mit einigen grundlegeneden Strukturen, die wiederverwendbar (verschachtelbar) sind.

Falls es die nicht gibt, wäre es wohl an der Zeit welche zu bauen.

Danke und Gruß,
Don P

[Gunnar Bittersmann]

@@Don P:

nuqneH

Gibt es irgendwo solche Allzwecktemplates

Zuhauf. SLEFHTML kennst du?

Qapla'

[Don P]

Hallo,

Zuhauf. SLEFHTML kennst du?

SLEFHTML? Was ist das? ;)

Ich finde überall nur zu große Templates für ganze Pages, die z.B. das body-Tag gestalten, dann einen Navigationsbereich, Contentbereich etc. Das ist mir schon zu speziell, denn wenn ich z.B. eine Liste von Eingabefeldern nach dem Muster | Name: [Eingabefeld] | habe, dann enstpricht das der genannten B-C-Aufteilung, die im Template zwar als Navigation-Content vorhanden ist, aber hier vielleicht doch nicht richtig passt, so dass ich dafür wieder separate Rules bauen muss, was ich aber gerade nicht will.

Was ich suche, sind ganz universelle Bausteine, die schon soweit vorgefertigt sind, dass sie untereinander beliebig kombinierbar und verschachtelbar sind, wie bei Lego(TM).

Ok, es ist schon eine Weile her, dass ich mit die templates bei SLEFHTML angeschaut habe, werde sie mir nochmal zu Gemüte führen.

Gruß, Don P

[Fabulit]

SLEFHTML? Was ist das? ;)

Da ist jemand der englischen Sprache nicht ganz mächtig. Müsste wohl SlaveHTML heißen...

[T-Rex]

Es gibt "Frameworks" auch für css.
Vielleicht suchst du ja sowas?

Ansonsten ist jede Webanwendung individuell. Der eine möchte einen Standardabstand von padding: 5px , der andere von 15px. Der eine möchte das die Boxen 5px auseinander stehen, der nächste 20px (Weil das auge zur ruhe kommen soll). Schriftgröße soll bei dem einen Projekt bei 25px sein (da auch ältere User alles gut lesen sollen), ein Brillenhersteller möchte 8px, damit man denkt man braucht eine brille. etc....

Wenn man für diese Dinge immer nur ein standard css benutzen würde, dann würde jede Webseite vom layout gleich aussehen. Und wenn man dieses css layout auch noch aus dem cms bestimmen kann, dann bist du als webentwickler arbeitslos.

Gruß
T-Rex

[Don P]

Hallo,

Der eine möchte einen Standardabstand von padding: 5px , der andere von 15px. Der eine möchte das die Boxen 5px auseinander stehen, der nächste 20px (Weil das auge zur ruhe kommen soll). Schriftgröße [...]

Klar, solches sind dann individuelle Einstellungen, die die Darstellung näher spezifizieren. Die kann man ja dann anpassen wie's beliebt. Ich suche nur die allgemeinen Bausteine, die z.B. überhaupt ein Standard-Padding definieren, eine Standard-Schriftart usw. und vor allem Dinge wie Floating etc. schon vordefiniert haben. Für die reine Anordnung eben.

Gruß, Don P

[suit]

Ich suche nur die allgemeinen Bausteine, die z.B. überhaupt ein Standard-Padding definieren, eine Standard-Schriftart usw. und vor allem Dinge wie Floating etc. schon vordefiniert haben. Für die reine Anordnung eben.

Ein Grid, welches dir das Schriftbild zumindest halbwegs vereinheitlicht?

Für "allgemeines Zeug" verwende ich idR. das hier aus Basis:

Von den Dingern gibts noch einige mehr - je nachdem, was ich brauche kommen halt Formulare dazu oder Tabellen oder auch generische Klassen für Warnungen, Hinweise usw.

Sowas muss man einfach nur mal machen und dann konsequent verwenden - ich sollte ggf. mal einen Artikel dazu schreiben :p

html,  
body {  
	padding: 0;  
	margin: 0;  
}  
  
body {  
	line-height: 1.5em;  
}  
  
p,  
ul,  
ol,  
dl,  
blockquote,  
address {  
	padding: 0;  
	margin: 0 0 1.5em 0;  
}  
  
ul ul,  
ul ol,  
ul dl,  
ol ul,  
ol ol,  
ol dl,  
dl ul,  
dl ol,  
dl dl {  
	margin-bottom: 0;  
}  
  
ol {  
	margin-left: 2em;  
}  
  
ul {  
	list-style: none;  
	margin-left: 0.5em;  
}  
  
dt,  
dd,  
li {  
	padding: 0;  
	margin: 0;  
}  
  
ul li {  
	background: url(../img/16x16/bullet_black.png) no-repeat left .1em;  
	padding-left: 1.5em;  
}  
  
dt {  
	font-weight: bold;  
}  
  
dd {  
	margin-left: 2em;  
}  
  
blockquote {  
	font-style: italic;  
	padding-left: 2em;  
	background: url(../img/16x16/quotation.png) no-repeat 0.25em top;  
}  
  
* html blockquote {  
	background-image: url(../img/16x16/quotation.gif);  
}  
  
blockquote cite {  
	display: block;  
	font-style: normal;  
	font-variant: small-caps;  
}  
  
blockquote cite:before {  
	content: '— 'attr(cite);  
}  
  
h2 {  
	font-size: 2em;  
	line-height: 1.5em;  
	padding: 0;  
	margin: 0 0 0.75em 0;  
	overflow: hidden;  
	text-indent: -99999em;  
}  
  
h3 {  
	font-size: 1.5em;  
	line-height: 1em;  
	padding: 0;  
	margin: 0 0 1em 0;  
}  
  
h3.img {  
	text-indent: -99999em;  
	overflow: hidden;  
	background-repeat: no-repeat;  
}  
  
h3.subtitle {  
	font-style: italic;  
	font-size: 1em;  
	line-height: 1.5em;  
	margin: 0 0 1.5em 0;  
}  
  
h4 {  
	font-size: 1em;  
	line-height: 1.5em;  
	padding: 0;  
	margin: 0;  
}  
  
hr {  
	background-color: #404040;  
	color: #404040;  
	border: 0;  
	height: 1px;  
	margin: 0 0 1.5em 0;  
}  
  
sub {  
	vertical-align: middle;  
	position: relative;  
	top: 0.33em;  
	font-size: 0.75em;  
}  
  
/* Internet Explorer 8 */  
sub { font-size /*\**/: 1em\9; }  
  
/* Internet Explorer 7 */  
*:first-child+html { font-size: 1em; }  
  
/* Internet Explorer 6 */  
* html sub { font-size: 1em; }  
  
sup {  
	vertical-align: middle;  
	position: relative;  
	top: -0.5em;  
}

[Don P]

Hallo,

Für "allgemeines Zeug" verwende ich idR. das hier aus Basis:

Ja, an sowas habe ich gedacht, danke. Ich sehe, du hast es dir auch selber gebastelt, und vermutlich mach das praktisch jeder. Wäre aber gar nicht nötig, wenn sich mal jemand richtig Gedanken macht, was man überhaupt als Grundbausteine brauchen kann und ein universales Set zusammenstellt, das "verhebbt", wie man im Süddeutschen sagt.

Nehmen wir z.B. eine Folge von Bildern.

<span class="bildfolge"><img [...] /><img [...] /></span>  

Wenn ich nun die Bilder nicht im Textfluss nebeneinander, sondern untereinander haben will, kann ich eine Regel schreiben:

.bildfolge img {  
  display:block;  
}  

Das ist es aber nicht, was mir vorschwebt, sondern ein allgemeiner, im Template bereits existierender Universalbaustein, den ich im class-Attribut der Bildfolge zusätzlich notieren kann, um dasselbe zu erreichen:

<span class="bildfolge vertical"><img [...] /><img [...] /></span>  

.vertical span,  
.vertical img,  
.vertical was-immer  
{  
  display:block;  
  clear:both;  
}

...oder so ähnlich.

Gruß, Don P

[Gunnar Bittersmann]

@@Don P:

nuqneH

Das ist es aber nicht, was mir vorschwebt, sondern ein allgemeiner, im Template bereits existierender Universalbaustein, den ich im class-Attribut der Bildfolge zusätzlich notieren kann

Dir schwebt vor, die Darstellung im Markup anzugeben? Auch nicht unbedingt der Weisheit letzter Schluss.

Qapla'

[Don P]

Hallo,

Dir schwebt vor, die Darstellung im Markup anzugeben? Auch nicht unbedingt der Weisheit letzter Schluss.

Ja - nee - doch!
Das erspart doch einige Arbeit: Man muss nicht laufend neue Sonderregeln austüfteln, nicht groß auf die Benamsung achten usw.

ul, ol, table, label, span und wie sie alle heißen geben ja auch schon eine Default-Darstellung vor. Statt eine Ganze HTML-Struktur umzuschreiben oder ständig neue CSS-Regeln zu konstruieren, ist es doch das Einfachste, nur das eine oder andere Wörtchen im class-Attribut dazuzuschreiben oder rauszunehmen, und gut :)

Gibt es Nachteile, die diese Vorteile komplett zunichte machen?

Gruß, Don P

[Gunnar Bittersmann]

@@Don P:

nuqneH

[…] ist es doch das Einfachste, nur das eine oder andere Wörtchen im class-Attribut dazuzuschreiben oder rauszunehmen, und gut :)

Gibt es Nachteile, die diese Vorteile komplett zunichte machen?

Wartbarkeit: Bei späteren Änderungen muss das Markup (evtl. von vielen HTML-Dokumenten geändert werden anstatt alle Änderungen an einer Stelle – im Stylesheet! – vorzunehmen.

Qapla'

[Don P]

Hallo,

Gibt es Nachteile, die diese Vorteile komplett zunichte machen?

Wartbarkeit: Bei späteren Änderungen muss das Markup (evtl. von vielen HTML-Dokumenten geändert werden anstatt alle Änderungen an einer Stelle – im Stylesheet! – vorzunehmen.

Ach ja, ich vergaß: Deswegen ist CSS überhaupt erst erfunden worden.

Trotzdem könnte man doch, falls nötig, auch nachträglich die Formatierung nur durch stylesheet-Bearbeitung wieder ändern. Wie wär's z.B. mit einem classname "override", den man grundsätzlich mitgibt...

<span class="bildfolge vertical override"><img [...] /><img [...] /></span>  

... und dann am Ende des Stylesheets noch die gewünschten overrides notiert?

Wäre natürlich auch Arbeit, aber nicht mehr, als wenn man vornherein auf die Universalbausteine verzichtet und wahrcheinlich weniger, als viele HTML-Dateien einzeln zu ändern.

Gruß, Don P

[suit]

Hallo,

Dir schwebt vor, die Darstellung im Markup anzugeben? Auch nicht unbedingt der Weisheit letzter Schluss.

Ja - nee - doch!
Das erspart doch einige Arbeit: Man muss nicht laufend neue Sonderregeln austüfteln, nicht groß auf die Benamsung achten usw.

Das musst du auch nicht - lass dir 1x was einfallen und zieh es durch. Wenn du bei jeder Site das Rad neu erfindest und neu nachdenkst, denkst du niemals ordentlich nach. Denke 1x ordentlich nach und teile den Aufwand auf die sagen wir folgenden 5 Websites auf. Bei der 6. Website verlangst du dasselbe wie bei den vorherigen 5, hast aber keinen Aufwand und verdienst nur durch dein Know-How.

ul, ol, table, label, span und wie sie alle heißen geben ja auch schon eine Default-Darstellung vor.

Die eher nach Wald und Wiese aussieht und sicher kein schönes Schriftbild hat.

Statt eine Ganze HTML-Struktur umzuschreiben oder ständig neue CSS-Regeln zu konstruieren, ist es doch das Einfachste, nur das eine oder andere Wörtchen im class-Attribut dazuzuschreiben oder rauszunehmen, und gut :)

Ja, aber bitte generisch :)
http://oli.jp/2011/style-guide/

Gibt es Nachteile, die diese Vorteile komplett zunichte machen?

Ja, wenn die Inhalte sind dann ans Medium und die Struktur gebunden, das hat nachteile - darum solltest du damit so sparsam wie möglich arbeiten und das ganze vorher _wirklich gut_ überlegen.

[Don P]

Hallo,

Wenn man für diese Dinge immer nur ein standard css benutzen würde, dann würde jede Webseite vom layout gleich aussehen.

Ich meine nur eine Art CSS-Lego(TM). Mit Lego-Bausteinen kann man die unterschiedlichsten Sachen bauen, und kein Bauwerk sieht wirklich aus wie das andere, obwohl alle aus den gleichen Grundbausteinen bestehen. Diese Grundbausteine sind durchdacht und passen immer zueinander, ohne dass man an einzelnen herumfeilen oder sägen muss. Solche Bausteine suche ich. Die konkreten Gebäude erstelle ich dann natürlich selber.

Gruß, Don P

[suit]

Ich meine nur eine Art CSS-Lego(TM). Mit Lego-Bausteinen kann man die unterschiedlichsten Sachen bauen, und kein Bauwerk sieht wirklich aus wie das andere, obwohl alle aus den gleichen Grundbausteinen bestehen. Diese Grundbausteine sind durchdacht und passen immer zueinander, ohne dass man an einzelnen herumfeilen oder sägen muss. Solche Bausteine suche ich. Die konkreten Gebäude erstelle ich dann natürlich selber.

In CSS gibt es auch Bausteine (Selektoren, Eigenschaften und Werte) - und kein Bauwerk sieht wirklich gleich aus :p

[Novi]

Hallo,

YAML?

Viele Grüße Novi

[suit]

YAML?

YAML ist eine überladene Frechheit und sicher kein einfacher Baukasten, wo man sich das nötige aussucht :)

[O'Brien]

Hi.

YAML?

YAML ist eine überladene Frechheit und sicher kein einfacher Baukasten, wo man sich das nötige aussucht :)

Findste? Warum?

Schönen Sonntag noch!
O'Brien

[suit]

Hi.

YAML?

YAML ist eine überladene Frechheit und sicher kein einfacher Baukasten, wo man sich das nötige aussucht :)

Findste? Warum?

Wenn du dich damit abfindest, dass alles "gleich" und aussieht, ist ein Framework oder ein fertiges Grid schön und gut - aber das spielt sich im echten Leben nicht, da funkt der Designer und der Kunde dazwischen. Wenn man dann mit starren Vorgaben arbeiten muss, ist das nicht förderlich - in der Zeit kann man dasselbe schneller "zu Fuß" erreichen,

Wenn man seine Pappenheimer schon kennt, kann man sich einen "Baukasten" selbst zusammenstellen (mit dem, was man selbst regelmäßig braucht) und damit wesentlich schneller zum Ziel kommen, als mit einem Framework, welches für einen gänzlich anderen Anwendungszweck gedacht ist.

Bei YAML kommt erschwerend dazu, dass die visuelle Abfolge der im HTML-Quelltext entspricht und dass Layout mit Präsentation vermischt wird - das versuchen die zwar durch das role-Attribut zu fixen, unpraktisch ist es aber trotzdem.

YAML ist fein für Menschen die keine Ahnung davon haben, was sie da eigentlich tun - und selbst für diese ist es unpraktisch, weil sie es nicht ohne Gefahr anpassen können - es gibt aufgrund der Größe so viele Abhängigkeiten, dass ein "dreh" an der einen Stelle alles Mögliche auf der anderen Seite kaputt machen kann. Wenn man sich so einen Baukasten selbst zusammenstellt hat (und auch weiß, was man gemacht hat), tut man sich viel leichter, Konseqenzen abzuschätzen.

Wie schon gesagt: man nimmt sich einen Tag und zieht das durch - das ist keine Hexerei.