In der Einleitung zu dieser Reihe habe ich Grundsätzliches zum 3-Purpose-Theme geschrieben. Vor allem die Ziele des Systems standen dort im Vordergrund.
Hier, im ersten Teil der Projekt-Reihe zum 3-Purpose-Grid, wird das Layout entwickelt. Es wird dabei keine bestimmte Breite vorgegeben wie etwa bei dem bekannten 960er-Grid, sondern es lassen sich viele verschiedene Breiten und Anzahlen von Spalten miteinander kombinieren. Entscheidend ist, inwieweit die Breite durch die Anzahl der gewünschten Spalten teilbar ist.
Ein 855er Grid beispielsweise (s. Abb. 1) ist durch 3 und 5 teilbar, aber nicht durch 4, 6, 7 und 8. Also kommen für diese Breite auch nur Grids mit 3 oder 5 Spalten in Frage. 5-Spalten-Grids sind eher unüblich, so dass wir im Folgenden unser erstes System für 3 Spalten mit 855 Pixel Gesamtbreite ausführen.
Es werden dann Varianten (Demo) für 912- und 960-breite Layouts diskutiert sowie ein 4-spaltiges Layout für die 912-Variante.
Abb. 1: Demo-System für das 3-Purpose-Grid
Viele weitere Varianten ganz individuell angepasst an die eigenen Bedürfnisse sind immer nach dem gleichen Prinzip und mit wenig Aufwand ableitbar, so dass sie in die Ressourcen nicht mehr aufgenommen werden müssen. Die 960er-Variante eignet sich z.B. auch für 12 oder 16 Spalten wie das bekannte gleichnamige Grid-System, das ich oben schon verlinkt habe. Jeder kann sich demnach mit unserem 3-Purpose-Grid seine Variante selbst bauen.
Konstruktion des 3-Purpose-Grids
Die Konstruktion des Grids ist sehr einfach gehalten. Ähnlichkeiten mit existierenden Systemen sind wahrscheinlich, aber zufällig und nicht beabsichtigt. Jeder, der ein eigenes System entwickelt, wird wahrscheinlich ein mehr oder weniger ähnliches System entwerfen.
Ein Grid-System entsteht, indem man eine Breite findet, z.B. 855 Pixel, die sich durch die gewünschte Zahl der Spalten teilen lässt, z.B. 3. Dies ergibt dann im Beispiel Spalten mit der Breite 285 Pixel.
Eine Html-Struktur könnte jetzt z.B. so aussehen:
<html>
<head>
...
</head>
<body>
<body-layer>
<header>...</headere>
<main>
<div class="container">
<div class="col1">Lore ipsum ... </div>
</div>
<div class="container">
<div class="col2">Lore ipsum ... </div>
</div>
</main>
<footer>...</footer>
</div>
</body>Innerhalb des div-Tags mit der Klasse container soll links ein Lore-Ipsum-Inhalt mit der Breite von 1 Spalte (Klasse col1) und rechts ein Lore-Ipsum-Inhalt der Breite von 2 Spalten (Klasse col2) dargestellt werden. Aber man könnte auch 3 Spalten erzeugen, die alle die Klasse col1 haben.
Die Container-Klasse regelt bei dieser Organisation den sichtbaren Abstand zwischen den Spalten. Sie ist nur dafür da und sollte niemals zweckentfremdet werden! Die CSS-Regel für die Klasse container sollte deshalb nur die Eigenschaft padding enthalten, die so gesetzt wird, dass zwischen den Spalten und zum Rand hin der Abstand der Inhalte immer gleich groß ist, z.B. 20 Pixel.
Die zugehörige CSS-Datei, die das Grid im wesentlichen definiert, sieht deshalb so aus:
/* (c) Dr. Wolfgang Hauertmann, Hilden 2015, Lizenz: siehe lizenz.txt */
/* 3-Columns-Grid, 855px */
/*
* With white space outside header, main, footer
*/
.body-layer {
max-width: 875px; /* + 20px */
}
/*
* With no white space outside header, main, footer
*/ /*
main {
max-width: 875px;
} */
header, main, footer {
min-width: 875px; /* + 20px */
box-sizing:border-box;
padding: 0 10px;
margin: auto;
overflow:hidden;
}
.container{
padding:10px;
}
.col1 {
width: 285px;
float:left;
}
.col2 {
width: 570px;
float:left;
}
.col3 {
width: 855px;
float:left;
}
.col-image,
.node-image {
max-width: 265px; /* 285 - (2 x 10) */
}3-Purpose-Grid - File: assets/css/grid-855-whr-nrw-var-1-vers-0.5.0.css
Kern ist die Definition für die Klassen col1, col2 und col3, die die oben berechneten Breiten haben, z.B. besitzt die Klasse col2 eine Breite von 2 x 285 Pixel, also 570 Pixel. Die Container-Klasse besitzt nur die Eigenschaft padding:10px, welche den Abstand zwischen den Inhalten auf 20 Pixel festlegt, da wir jeweils einen Abstand einer linken Spalte und einer rechten Spalte von jeweils 10 Pixel addieren müssen. Damit ich auch am Rand gegenüber z.B. einem White-Space einen Abstand von 20 Pixeln habe - das System soll ja möglichst gleichmäßig wirken -, füge ich für die Tags header, main und footer ebenfalls noch ein linkes und rechtes Padding von 10 Pixeln hinzu.
Interessant sind jetzt die weiteren Eigenschaften von header, main und footer. Die Eigenschaft box-sizing:border-box verhindert, dass padding und border-width zur angegebenen Breite hinzugefügt werden. Wir können uns also darauf verlassen, dass min-width und max-width für diese div-Tags exakt gelten, egal welche Werte wir z.B. für padding einsetzen.
Man kann box-sizing auch generell für sein komplettes Design z.B. in der reset.css-Datei festlegen. Dann ist das Ganze noch etwas komplexer definiert. Ich habe darauf verzichtet, weil ich diese Festlegung in meinem System nur (!) für header, main und footer benötige. Eine Erweiterung kann man später immer noch vornehmen.
Das div-Tag mit der Klasse body-layer definiert hier zusammen mit den übrigen Eigenschaften von header, main und footer ein Layout mit einem White-Space um den Inhalt der Breite 855 Pixel herum. Wer diesen White-Space nicht möchte, sondern ein Layout bevorzugt, dass sich über den gesamten Bildschirm ausbreitet, der kann eine Variante dieser Datei erzeugen (z.B. grid-855-whr-nrw-var-1.1-vers-0.5.0.css) und dort die Regel für body-layer aus-ixen und für main ein-ixen.
Am Ende befindet sich noch eine CSS-Regel für die Begrenzung der Breite von Bildern.
Soviel zur Erläuterung der zentralen CSS-Datei für das 855-er Grid. Wer jetzt ein Grid z.B. 912 Pixel breit mit 4 Spalten benötigt, der konstruiert es sich nach dem gleichen Schema:
/* (c) Dr. Wolfgang Hauertmann, Hilden 2015, Lizenz: siehe lizenz.txt */
/* 4-Columns-Grid, 912px */
/*
* With white space outside header, main, footer
*/
.body-layer {
max-width: 932px; /* + 20px */ /* 912 / 4 = 228 */
}
/*
* With no white space outside header, main, footer
*/ /*
main {
max-width: 980px;
} */
header, main, footer {
min-width: 932px;
box-sizing:border-box;
padding: 0 10px;
}
.container{
padding:10px;
}
.col1 {
width: 228px;
float:left;
}
.col2 {
width: 456px;
float:left;
}
.col3 {
width: 684px;
float:left;
}
.col4 {
width: 912px;
float:left;
}
.col-image,
.node-image {
max-width: 208px; /* 228 - (2 x 10) */
}3-Purpose-Grid - File: grid-912.4-whr-nrw-var-1-vers-0.5.0.css
Die Erstellung weiterer Varianten dürfte jetzt kein Problem mehr sein.
Ein zusätzliches Feature für ein flexibleres Design
Manchmal möchte man innerhalb eines 4-Spalten-Grids vielleicht doch nur 3 Spalten darstellen. Oder es empfiehlt sich, einen Inhalt der Klasse col2 zu splitten in zwei Container mit der Breite 50%. Für diese Fälle kann man eine für alle Grid-Systeme gültige zusätzliche CSS-Datei dazu linken.
/* (c) Dr. Wolfgang Hauertmann, Hilden 2015, Lizenz: siehe lizenz.txt */
/* for 3-columns- and 4-columns-grids */
.two-columns .col1, /* two-columns: container width, col1: Content is 1 column width */
.two-columns.col1 {
width: 50%;
}
/* for 4-columns-grids */
.three-columns .col1, /* three-columns: container width, col1: Content is 1 column width */
.three-columns.col1 {
width: 33.333%;
}
/* for 3-columns- and 4-columns-grids */
.two-columns .col2, /* two-columns: container width, col2: Content is 2 column width */
.two-columns.col2 {
width:100%;
}
/* for 4-columns-grids */
.three-columns .col2, /* three-columns: container width, col2: Content is 2 column width */
.thtree-columns.col2 {
width:66%;
}3-Purpose-Grid - File: grid-all-whr-nrw-var-1-vers-0.5.0.css
Ich kann z.B. eine nach unten beliebig lange rechte Seitenleiste, wie sie in vielen Layouts für Navigationselemente und Informationscontainer existiert (<aside>-Tag), einrichten, indem ich das Layout dafür folgendermaßen organisiere:
<main>
<nav class='collapsed'></nav>
<div class="left col2">
<div class='two-columns'>
<div class="col1">
<div class="container">
<section>
<h4>Krabben</h4>
<p>Lorem ipsum ...</p>
</section>
</div>
</div>
<div class="col1">
<div class="container">
<section>
<h4>Heringe</h4>
<p>Lorem ipsum ...</p>
</section>
</div>
</div>
</div>
</div>
<div class="right col1">
<div class="container">
<aside>
<div class="aside-content">
<h5>Varianten</h5>
<ul>
<li><a href="index.html">855 Pixel</a></li>
<li><a href="index_nowhitespace.html">855 Pixel ohne White-Space</a></li>
<li><a href="index_912.4.html">912 Pixel 4 Spalten</a></li>
</ul>
<p>Lorem ipsum ... </p>
</div>
</aside>
</div>
</div>
</div>
</main>Man kann die Styles mit den Prozent-Angaben hier gut verwenden, muss aber nicht. Diese Styles geben einem nur etwas mehr Flexibilität bei der Gestaltung des Grids. So kann man damit durchaus in einem 4 Spalten-Grid abschnittsweise auch 3 Spalten organisieren.
Das Problem damit ist, dass bei bestimmten Teiler-Verhältnissen, z.B. 33,333% Rundungsfehler auftreten können, z.B. hier, die zweite 3er-Reihe bei bestimmten Fenstergrößen. Dann taucht ab und zu rechts hinter der dritten Spalte eine 1-Pixel-breite weiße Linie auf, die dort nicht hingehört.
Hier muss man dann, wenn man diese prozentualen Styles unbedingt braucht, von Fall zu Fall einen Work-Around erfinden. Man sollte diesen aber dann in einer eigenen Style-Datei unterbringen, um das System nicht zu gefährden. Das Grundsystem soll ja so einfach und grundlegend wie möglich bleiben. Manchmal kann man mit so einem Fehler auch gut leben, wenn er beispielsweise aufgrund des Hintergrundes nicht sichtbar wird.
Wie teste ich mein Layout?
Hierfür gibt es eine kleine Test-CSS-Datei, die transparente Hintergründe erzeugt, so dass man anhand der Farbabstufungen erkennen kann, ob die Container sauber nebeneinander liegen. Bei Bedarf muss man diese Datei wie übrigens auch die Dateien oben immer nach dem selben Schema erweitern.
/* (c) Dr. Wolfgang Hauertmann, Hilden 2015, Lizenz: siehe lizenz.txt */
/* for test purposes only */
.left .container {
background-color: rgba(50,50,50,0.1);
}
.right .container {
background-color: rgba(50,50,50,0.2);
}
.left .two-columns .col1:first-child {
background-color: rgba(50,50,50,0.25);
}
.left .two-columns .col1:last-child {
background-color: rgba(50,50,50,0.35);
}
.right .two-columns .col1:first-child {
background-color: rgba(50,50,50,0.35);
}
.right .two-columns .col1:last-child {
background-color: rgba(50,50,50,0.45);
}
.left .two-columns .col2 {
background-color: rgba(50,50,50,0.4);
}
.left .two-columns .col3 {
background-color: rgba(50,50,50,0.4);
}
.left .three-columns .col1 {
background-color: rgba(50,50,50,0.35);
}
.left .three-columns .col1:last-child {
background-color: rgba(50,50,50,0.25);
}
.left .three-columns .col1:last-child {
background-color: rgba(50,50,50,0.45);
}
.bottom .col1 {
background-color: rgba(50,50,50,0.3);
}
.bottom .col2 {
background-color: rgba(50,50,50,0.4);
}
.bottom .col3 {
background-color: rgba(50,50,50,0.4);
}
.bottom .col4 {
background-color: rgba(50,50,50,0.3);
} 3-Purpose-Grid - File: grid-test-whr-nrw-var-1-vers-0.5.0.css
Eine komplexere index.html-Datei als Ausgangspunkt für ein eigenes Design
Hier eine etwas ausführlichere Html-Struktur, die man als Ausgangspunkt für ein eigenes Layout oder als Experimentier-Vorlage verwenden kann.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE" />
<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT" />
<title>Static Multi-Column Grid 855 Pixel</title>
<meta name="description" content="Project: 3 Purpose Grid, Part 1">
<meta name="author" content="Wolfgang Hauertmann">
<meta name="copyright" content="Wolfgang Hauertmann, Hilden 2015" />
<meta name="keywords" content="Web Design, Theming, Grids">
<!-- CSS -->
<!-- Reset some default styles -->
<link href="./assets/css/reset-all-whr-nrw-var-1-vers-0.5.0.css" rel="stylesheet" type="text/css" />
<!-- Grid system -->
<link href="./assets/css/grid-all-whr-nrw-var-1-vers-0.5.0.css" rel="stylesheet" type="text/css" />
<link href="./assets/css/grid-test-whr-nrw-var-1-vers-0.5.0.css" rel="stylesheet" type="text/css" />
<link href="./assets/css/grid-855-whr-nrw-var-1-vers-0.5.0.css" rel="stylesheet" type="text/css" />
<!--link href="./assets/css/grid-912-whr-nrw-var-1-vers-0.5.0.css" rel="stylesheet" type="text/css" /-->
<!--link href="./assets/css/grid-912.4-whr-nrw-var-1-vers-0.5.0.css" rel="stylesheet" type="text/css" /-->
<!--link href="./assets/css/grid-960-whr-nrw-var-1-vers-0.5.0.css" rel="stylesheet" type="text/css" /-->
<!-- Page styles -->
<link href="./assets/css/page-all-whr-nrw-var-1-vers-0.5.0.css" rel="stylesheet" type="text/css" />
<link href="./assets/css/node-all-whr-nrw-var-1-vers-0.5.0.css" rel="stylesheet" type="text/css" />
<link href="./assets/css/style-all-whr-nrw-var-1-vers-0.5.0.css" rel="stylesheet" type="text/css" />
<!-- Responsive -->
<!--link href="./assets/css/resp855.css" rel="stylesheet" type="text/css" /-->
</head>
<body class="front">
<!-- for test purposes only -->
<div id="rtest" class="rtest"></div>
<div class="body-layer"> <!-- For background grafics and similar effects -->
<!-- Templates, absolute positioning, ... -->
<div id="hint"></div>
<!-- Page Content -->
<div class="page-content">
<header>
<h1>Static Multi-Column Grid 855 Pixel</h1>
<h3>Project: 3 Purpose Grid, Part 1</h3>
</header>
<div class='clearfix'></div>
<main>
<nav class='collapsed'></nav>
<div class="left col2">
<div class='one-column'>
<div class="container">
<section>
<div class="node-titel"><h3>Krabben jeden Tag frisch von Skipper Hannes </h3></div>
<div class="node-info">
<div class="node-author">Smutje Blaubär</div>
<div class="node-date">09.01.2015</div>
</div>
<article>
<div class="node-text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<h4>Sonne, Wind und Salzwasser</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</article>
<div id="node-pagination"></div>
</section>
</div>
</div>
<div class='two-columns'>
<div class="col1">
<div class="container">
<section>
<h4>Krabben</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</section>
</div>
</div>
<div class="col1">
<div class="container">
<section>
<h4>Heringe</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</section>
</div>
</div>
</div>
<div class='two-columns'>
<div class="col1">
<div class="container">
<section>
<h4>Heringe</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</section>
</div>
</div>
<div class="col1">
<div class="container">
<section>
<h4>Garnelen</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</section>
</div>
</div>
</div>
<div class='two-columns'>
<div class="col2">
<div class="container">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</div>
</div>
<div class="right col1">
<div class="container">
<aside>
<div class="aside-content">
<h5>Varianten</h5>
<ul>
<li><a href="index.html">855 Pixel</a></li>
<li><a href="index_resp.html">855 Pixel Responsive</a></li>
<li><a href="index_right.html">855 Pixel mit Content rechts</a></li>
<li><a href="index_nowhitespace.html">855 Pixel ohne White-Space</a></li>
<li><a href="index_912.html">912 Pixel</a></li>
<li><a href="index_912.4.html">912 Pixel 4 Spalten</a></li>
<li><a href="index_960.html">960 Pixel</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
<section>
<h4>Sonne, Wind, Salzwasser</h4>
<article>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
</article>
</section>
</div>
<section>
<h4>Pelikane</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</section>
</aside>
</div>
</div>
<div class='clearfix'></div>
<div class="bottom col3">
<div class="col1">
<div class="container">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
<div class="col2">
<div class="container">
<section>
<h4>Schiff</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</section>
</div>
</div>
</div>
<div class="bottom col3">
<div class="left col2">
<div class="two-columns">
<div class="col1">
<div class="container">
<section>
<h4>Sonne</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</section>
</div>
</div>
<div class="col1">
<div class="container">
<section>
<h4>Wind</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</section>
</div>
</div>
</div>
</div>
<div class="col1">
<div class="container">
<section>
<h4>Salzwasser</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</section>
</div>
</div>
</div>
<div class="bottom col3">
<div class="col3">
<div class="container">
<section>
<h4>Sonne, Wind, Salzwasser</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</section>
</div>
</div>
</div>
</main>
<div class='clearfix'></div>
<footer>
<h5>(c) 2015 Wolfgang Hauertmann</h5>
</footer>
</div> <!-- page-content -->
</div> <!-- body-layer -->
<!-- Scripts -->
</body>
</html>
3-Purpose-Grid - File: index.html
In dieser vorläufigen Demo können Varianten dieses Layouts nachvollzogen werden.
Die restlichen CSS-Dateien des Grundsystems
Im Folgenden werden Style-Dateien dargestellt, die eine Empfehlung darstellen, aber letztendlich mehr oder weniger abhängig sind von den Rahmenbedingungen in einem konkreten Projekt. Sie stellen aber eine gute Startkonfiguration für ein neues Projekt dar.
reset.css
In dieser Datei werden die Default-Styles des verschiedenen Browsers zurückgesetzt. Da jeder Browser etwas andere Default-Styles verwendet, empfiehlt es sich immer, eine solche Datei anzulegen.
/* (c) Dr. Wolfgang Hauertmann, Hilden 2015, Lizenz: siehe lizenz.txt */
* {
margin:0;
padding:0;
}
ul {
margin-left: 20px;
}
/* clearfix from Bootstrap */
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
body {
font-family: Verdana, 'Lucida Sans Unicode', sans-serif;
font-size:16px;
background: #E0F0F0;
/*
* Minimal device-width. Attention: Adjust it depending on footer/header-contentalignment-adjust
* or leave it away if you design for Pebble Watch too.
*/
min-width: 220px;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Trebuchet MS", sans-serif;
font-weight: bold;
}
h4{
font-style:italic;
}
h5 {
margin-bottom:0.24em;
}
p {
margin-bottom:0.4em;
text-align: justify;
}
img {
border: none;
}
/*
* Important for simple user feedback on mobile touch screens
*/
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}3-Purpose-Grid - File: reset-all-whr-nrw-var-1-vers-0.5.0.css
Als Besonderheit ist hier nur anzumerken, dass ich dort die clearfix-Definition von Bootstrap übernommen habe. Man kann natürlich diskutieren, ob die hier richtig verortet ist.
style.css
Dies ist die CSS-Datei, in der man zunächst alle Styles definiert, für die - ganz simple - noch keine eigene CSS-Datei existiert. Es empfiehlt sich, diese Datei von Zeit zu Zeit aufzuräumen und bestimmte zusammengehörende Gruppen von Regeln in eigenen Dateien zusammenzufassen. Je modularer das CSS-System, umso übersichtlicher wird es. Die Performance spielt dabei keine Rolle, da es viele Möglichkeiten gibt, z.B. mittels Minification, diese Dateien am Ende für den Einsatz in einem effizienten Produktionssystem wieder zu einer einzigen optimierten Datei zusammenzufassen.
/* (c) Dr. Wolfgang Hauertmann, Hilden 2015, Lizenz: siehe lizenz.txt */
/*
* Definition of all page elements, which have no special css-file
*/
header h1,
header h3,
footer h5 {
width:100%;
text-align:center;
}
a, a:visited {
color:navy;
}3-Purpose-Grid - File: style-all-whr-nrw-var-1-vers-0.5.0.css
Ich habe hier nur quick&dirty die simplen Header und Footer zentriert und den Links eine lesbare Farbe gegeben.
page.css
In vielen Content-Management-Systemen, z.B. Drupal, werden die Templates hierarchisch in Pages und Nodes organisiert. Ich orientiere mich daran und definiere in einer entsprechenden Datei page.css die Regeln, die das grundsätzliche Aussehen von header, footer und main definieren.
/* (c) Dr. Wolfgang Hauertmann, Hilden 2015, Lizenz: siehe lizenz.txt */
.body-layer {
margin: 3% auto; /* Sensefull only, if ""White space outside header, main, footer" selected, see: grid855.css */
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
/* A shadow for test purposes */
box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.25);
/* Visible only if "No white space outside header, main, footer" selected, see: grid855.css */
background-color: #AACCCC;
}
header {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background: white;
color: black;
}
main {
background: #ABCCDE;
}
footer {
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
background: #2B67A4;
color: white;
}3-Purpose-Grid - File: page-all-whr-nrw-var-1-vers-0.5.0.css
Interessant für die Regel body-layer ist diese Eigenschaft:
... box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.25); ...
Erzeugt wird damit kein Schatten, sondern nur ein grauer Rand, der einer Border-Definition ähnelt, aber damit nicht verwechselt werden darf.
Dieser Rand dient hier vor allem dazu, sofort zu erkennen, wenn das Layout sauber aufgebaut ist. Dann ist der Schatten nämlich in der Regel nicht verschoben. Er dient also in erster Linie reinen Testzwecken. Trotzdem kann man ihn natürlich designerisch nutzen. Dann muss man den Parametern halt andere Werte geben.
node.css
Dort werden die Style definiert, die einen typischen Content-Inhalt, wie er z.B. von einem CMS ausgeliefert wird, kennzeichnen.
/* (c) Dr. Wolfgang Hauertmann, Hilden 2015, Lizenz: siehe lizenz.txt */
/*
* E.g. content delivered from a CMS
*/
.node-info {
color: #333333;
font-style: italic;
}
.node-author {
float:left;
margin-right: 1em;
}
.node-image {
float:left;
margin-right: 10px;
margin-top:0.3em;
}
3-Purpose-Grid - File: node-all-whr-nrw-var-1-vers-0.5.0.css
Deshalb findet man hier Anwendungs-spezifische Regeln (.node-author), wie sie z.B. für ein Weblog typisch sind.
Die Ordner-Struktur
Die Ordner-Struktur für dieses System sieht folgendermaßen aus (Abb. 2):
Abb. 2: Ordnerstruktur für das 3-Purpose-Grid (Basis, Teil 1)
Wer sich über die komischen Dateinamen wundert, ich habe mal versucht, eine Dateinamen-Konvention zu entwerfen, die vielleicht eine wirklich dezentrale Weiterentwicklung des Grids ermöglicht, also ohne eine zentrale Instanz. Ich weiß noch nicht, ob diese Idee von Erfolg gekrönt sein wird. Vielleicht erläutere ich das später mal. Im Moment muss man sich nicht daran halten. Man kann aber die Dateinamen in Abb. 2 den hier vorgestellten Sourcen eindeutig zuordnen.
Allerdings habe ich das 912er-3-Spalten-Grid, das 960er-3-Spalten-Grid und weitere hier nicht vorgestellt. Diese Dateien kann man sich zur Übung selbst konstruieren.
Die übrigen Ordner sind noch leer und werden in den folgenden Beiträgen im Zusammenhang mit der Erweiterung des Systems genutzt.
Zusammenfassung
Vorgestellt wurden die wichtigsten Zusammenhänge eines einfachen, aber sehr universellen eigenen Grid-Systems, das ich aus den im einleitenden Teil dieser Reihe genannten Gründen als 3-Purpose-Grid bezeichnet habe. Dieses Theme wird hier im Blog in Zukunft immer wieder als Ausgangspunkt für verschiedene Projekte verwendet.
Bei der Erarbeitung habe ich auf Einfachheit und sinnvolle Möglichkeiten der Modularisierung Wert gelegt, so dass man es nach dem Bauklötzchen-Prinzip um beliebige Features erweitern kann, ohne das grundlegende System zu modifizieren.
Natürlich wird sich im weiteren Verlauf die Notwendigkeit von Korrekturen ergeben. Ein solches System kann nicht zu Beginn perfekt sein. Deshalb gibt es in der Dateinamen-Konvention die Möglichkeit, eine Versionsnummer anzugeben. Varianten, die nicht unbedingt von mir kommen müssen, werden ebenfalls über eine Nummerierung und die Angabe eines Autorenkürzels ermöglicht. Mal schauen, ob sich das bewährt. Ansonsten wird es halt wieder verworfen.
Die nächsten Artikel beschäftigen sich mit der Erweiterung in Richtung "Responsive" sowie der Realisierung möglichst weniger wichtiger Grundelemente, wie Navigation, Paginierung, Medienintegration und Formulare.
Im Vordergrund steht bei diesem Grid-System weniger die Verfügbarkeit vieler GUI-Elemente, sondern vielmehr der Workflow im Sinne eines effizienten Knowledge-Managements.
Eine komfortable Download-Möglichkeit wird später noch zur Verfügung gestellt. Bis dahin sollte man aber mit Copy&Paste der hier vorgestellten Code-Snippets oder der vorläufigen Demo klar kommen.