Unser 3-Purpose-Grid soll Ausgangspunkt sein für eine Vielzahl kleinerer Projekte in diesem Weblog. Ziel ist es, sich dieses Grid (Demo) inklusive aller Ressourcen (Bash-, Grunt-Skripte, Cordova-Vorbereitung, vielleicht Testing, falls ich dazu komme, etc.) herunterzuladen, um dann sofort mit der Implementierung des eigentlichen Entwicklungsziels beginnen zu können. Es ist somit wichtiger Teil des hier praktizierten Workflows.
Deshalb stelle ich hier drei Header- und zwei Footersysteme vor, die man sich je nach Zielsetzung eines Projekts oder persönlichem Geschmack auswählen kann.
So wäre z.B. für ein NodeJS-Konsolen-Projekt der erste Header gut geeignet, für eine hybride App der zweite Header. Der dritte Header ist sehr simpel und eignet sich für ganz schnelle responsive Projekte. Der erste Footer folgt wie der erste Header der hier vorgestellten Grid-Logik, während die übrigen Header und Footer sich teilweise von der 3-Purpose-Grid-Logik lösen und dem Gestalter mehr designerische Freiheiten ermöglichen. Es ist durchaus üblich, bei der Gestaltung von Headern und Footern die Spalten-Logik außen vor zu lassen.
Beginnen wir mit Header 1 und Footer 1, die sich vom Layout her strikt an die 3-Purpose-Grid-Logik halten. Das Ergebnis ist etwas langweilig, aber für technische Portale, wie z.B. NodeJS-Konsolen sehr gut geeignet, da man Titel und Subtitel für ein neues Projekt einfach nur austauschen muss.
Etwas CSS für die Navigation
Bevor ich die einzelnen Header und Footer vorstelle, benötigen wir noch etwas CSS für die Darstellung der Top-Navigation. Eine der Hauptaufgaben der im Folgenden beschriebenen CSS-Datei ist die Umschaltung auf den mobilen Navigationsbutton für das (collapsible) Navigationsmenu mit Hilfen von Media Queries, wenn eine bestimmte Breite des mobilen Endgerätes unterschritten wird (vgl. Abb. 1).
Abb. 1: 3 Purpose Grid: Menu-Button bei Unterschreiten einer definierten Breite
Menus, die in diesem Collapsible Menu zusammengefasst werden, sind in unserem System mit der Klasse .collapsible gekennzeichnet. Dies muss nicht unbedingt nur die Top-Navigation der Portalseite sein, sondern es können durchaus mehrere Menus, die in der Desktop-Variante auf der Portalseite verteilt sind (in der Premium-Version des Grids) so gekennzeichnet werden. Navigationsfragen des 3-Purpose-Grid werden in Teil 4 diskutiert. In diesem Beitrag wird nur der Mechanismus für die Umschaltung der Desktop-Version des Top-Menus auf den mobilen Navigationsbutton implementiert.
Folgende CSS-Datei übernimmt diese Funktion und definiert einige Menu-Styles, die für verschiedene (hierarchische und nicht-hierarchische) Menus auf einer Seite verwendet werden können (Themes: north-sea (default), north-sea-birds, north-sea-fishes). Diese Styles werden teilweise erst in den folgenden Beiträgen benötigt. Damit man aber die Datei nicht immer wieder anpassen muss, sind sie hier in Teil 3 der Reihe in unserer nav-resp-xy.css-Datei schon enthalten.
/* (c) Dr. Wolfgang Hauertmann, Hilden 2015, Lizenz: siehe lizenz.txt */
/*
* Nav-menu toggle button
*/
/* if you are using ☰ for the collapsing menu button
nav #menu {
width:1.6em;
font-size:1.8em;
text-align: center;
padding-top: 2px;
margin-top: 20px;
cursor: pointer;
}*/
/* if you use a <button ...>-tag for the element, you have a 3D-Effect on clicking it */
nav #menu {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background: #4477a1;
background-image: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );
background-image: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);
background-image: -webkit-linear-gradient(#81a8cb, #4477a1); /* For Safari 5.1 to 6.0 */
background-image: -o-linear-gradient(#81a8cb, #4477a1); /* For Opera 11.1 to 12.0 */
background-image: -moz-linear-gradient(#81a8cb, #4477a1); /* For Firefox 3.6 to 15 */
background-image: linear-gradient(#81a8cb, #4477a1);/* Standard syntax */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');
color: #ffffff;
display: inline-block;
float: right;
padding:5px 10px 2px 10px;
z-index:15000;
position:relative;
}
nav #menu:focus {
outline: 0;
}
nav #menu:hover {
background: linear-gradient(#4477a1 0%, #81a8cb 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background-image: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );
background-image: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);
}
nav #menu .icon-bar {
background-color: #eeeeee;
border-radius: 2px;
border: solid 1px #aaaaaa;
display: block;
height: 4px;
width: 22px;
margin-bottom:4px;
}
/*
* Collabsible area
*/
nav.collapsed {
position:absolute; /* sollte unbedingt absolute sein. Sonst Probleme bei kleinen Handys mit UL-Breite. Ist immer etwas größer als berechnet, was dann dazu führt, dass der Inhalt nach links und rechts rutscht. */
top:0px;
left:0px;
width:100%;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-padding-start: 0;
width:100%;
display:block;
margin:0;
background-color: #333333;
border-radius: 4px;
z-index:10000;
}
nav.collapsed ul,
nav.collapsed ul ul,
nav.collapsed ul ul ul{
width: 99.4%;
margin-left:-5px;
background-color:transparent;
}
nav.collapsed ul li {
margin-left:10px;
}
/*
* Nav menu nav-top-right
*/
nav.nav-top-right {
float:right;
}
nav.nav-top-right li {
float:left;
}
/*
* Common styles for both: nav-top-right-menu, collapsing-menu
* and partly nav-right-side-first, which has special styles in buttons.css
*
* The simplest solution is, both have all styles common.
* So overwrite styles beneath, if you want a special look for the collapsing-menu
*
* Attention: Style of the nav-menu toggle button (#menu) is defined here too (s. beneath)
*
*/
nav.nav-top-right ul,
nav.nav-right-side-first ul,
nav.collapsed ul {
list-style: none;
list-style-position:outside;
}
nav.nav-top-right li,
nav.collapsed li {
margin-left: 8px;
}
nav.collapsed li p {
color: #000000;
font-size:14px;
line-height:1em;
}
nav.collapsed li p img {
width:50%;
float:left;
padding-right:5px;
}
nav.nav-top-right li:last-child,
nav.collapsed li:last-child {
}
nav.nav-top-right li a {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background: #4477a1;
background-image: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );
background-image: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);
background-image: -webkit-linear-gradient(#81a8cb, #4477a1); /* For Safari 5.1 to 6.0 */
background-image: -o-linear-gradient(#81a8cb, #4477a1); /* For Opera 11.1 to 12.0 */
background-image: -moz-linear-gradient(#81a8cb, #4477a1); /* For Firefox 3.6 to 15 */
background-image: linear-gradient(#81a8cb, #4477a1);/* Standard syntax */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');
color: #ffffff;
text-decoration:none;
}
nav.nav-top-right li a:hover,
nav.nav-top-right li a:visited,
nav.nav-top-right li a:active{
background: linear-gradient(#4477a1 0%, #81a8cb 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background-image: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );
background-image: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);
}
nav.nav-top-right li a
/*,nav.collapsed li a */ {
display: block;
width:100%;
padding:6px 0px;
font-size:1em;
text-align: center;
}
nav.nav-top-right li a, nav.top-right li a:visited
/*,nav.collapsed li a, nav.collapsed li a:visited*/ {
font-family: 'arial';
margin-right:0.5em;
color: #ffffff;
}
nav.nav-top-right li a:focus
/*,nav.collapsed li a:focus*/ {
border: 1px solid navy;
}
/*
* Special styles for collapsing-menu
*
* You can delete this section if you want same style for right-top-menu and collapsing-menu
*
*/
nav.collapsed {
font-family: 'arial';
font-style: italic;
font-size: 18px;
color: #ffffff;
font-size: 20px;
text-shadow: 0 1px 1px #000;
text-align:left;
}
nav.collapsed a:hover{
text-decoration:none;
}
/* Menu titles */
nav.collapsed h5 {
background: linear-gradient(#565656 0%, #323232 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background-image: -webkit-gradient(linear, left top, left bottom, from(#565656), to(#323232) );
background-image: -moz-linear-gradient(-90deg, #565656, #323232);
border: 1px solid #000;
border-radius: 4px;
color: #ffffff;
display: block;
padding:10px 20px;
margin-bottom: 1px !important;
}
/* ads at top or button of a menu */
nav.collapsed h6 {
background: linear-gradient(#CCC047 0%, #A89F39 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background-image: -webkit-gradient(linear, left top, left bottom, from(#CCC047), to(#A89F39) );
background-image: -moz-linear-gradient(-90deg, #CCC047, #A89F39);
border: 1px solid #000;
border-radius: 4px;
color: #ffffff;
display: block;
text-align:center;
line-height:2.5em;
}
/* Theme: default */
nav.collapsed ul {
}
nav.collapsed li {
background: linear-gradient(#3E77AD 0%, #295277 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background-image: -webkit-gradient(linear, left top, left bottom, from(#3E77AD), to(#295277) );
background-image: -moz-linear-gradient(-90deg, #3E77AD, #295277);
border: 1px solid #000;
border-radius: 4px;
padding:10px 15px 10px 15px; /* Influences design highly: min-width, indends of submenus, ...*/
}
nav.collapsed li a{
background-color: transparent;
color: #ffffff;
display: block;
text-align:left;
}
nav.collapsed li a:hover, nav.collapsed li a:active{
background: linear-gradient(#295277 0%, #3E77AD 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background-image: -webkit-gradient(linear, left top, left bottom, from(#295277), to(#3E77AD) );
background-image: -moz-linear-gradient(-90deg, #295277, #3E77AD);
}
/* Theme: north-sea (default) */
nav ul.north-sea li{
}
nav ul.north-sea a {
}
nav ul.north-sea li a:hover, nav ul.north-sea li a:active{
}
/* Theme: north-sea-birds */
nav ul.north-sea-birds li{
background: linear-gradient(#66AA7C 0%, #477556 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background-image: -webkit-gradient(linear, left top, left bottom, from(#66AA7C), to(#477556) );
background-image: -moz-linear-gradient(-90deg, #66AA7C, #477556);
border: 1px solid #000;
border-radius: 4px;
}
nav ul.north-sea-birds a {
background-color: transparent;
color: #ffffff;
display: block;
text-align:left;
}
nav ul.north-sea-birds li a:hover,
nav ul.north-sea-birds li a:active{
background: linear-gradient(#477556 0%, #66AA7C 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background-image: -webkit-gradient(linear, left top, left bottom, from(#477556), to(#66AA7C) );
background-image: -moz-linear-gradient(-90deg, #477556, #66AA7C);
}
/* Theme: north-sea-fishes */
/* Level 0 */
nav ul.north-sea-fishes li{
background: linear-gradient(#8DAD74 0%, #718C5B 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background-image: -webkit-gradient(linear, left top, left bottom, from(#8DAD74), to(#718C5B) );
background-image: -moz-linear-gradient(-90deg, #8DAD74, #718C5B);
border: 1px solid #000;
border-radius: 4px;
}
nav ul.north-sea-fishes a {
background-color: transparent;
color: #ffffff;
display: block;
text-align:left;
color: #333333 !important;
}
nav ul.north-sea-fishes li a:hover,
nav ul.north-sea-fishes li a:active{
background: linear-gradient(#718C5B 0%, #8DAD74 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background-image: -webkit-gradient(linear, left top, left bottom, from(#718C5B), to(#8DAD74) );
background-image: -moz-linear-gradient(-90deg, #718C5B, #8DAD74);
}
/* Level 1 */
nav ul.north-sea-fishes ul li {
background: linear-gradient(#3E77AD 0%, #295277 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background-image: -webkit-gradient(linear, left top, left bottom, from(#3E77AD), to(#295277) );
background-image: -moz-linear-gradient(-90deg, #3E77AD, #295277);
color: white !important;
}
nav ul.north-sea-fishes ul a {
background-color: transparent;
color: white !important;
}
nav ul.north-sea-fishes ul li a:hover,
nav ul.north-sea-fishes ul li a:active{
background: linear-gradient(#295277 0%, #3E77AD 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background-image: -webkit-gradient(linear, left top, left bottom, from(#295277), to(#3E77AD) );
background-image: -moz-linear-gradient(-90deg, #295277, #3E77AD);
}
/* Level 2 */
nav ul.north-sea-fishes ul ul li {
background: linear-gradient(#EDDF49 0%, #DBCE43 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background-image: -webkit-gradient(linear, left top, left bottom, from(#EDDF49), to(#DBCE43) );
background-image: -moz-linear-gradient(-90deg, #EDDF49, #DBCE43);
color: white !important;
}
nav ul.north-sea-fishes ul ul a {
background-color: transparent;
color: #333333 !important;
}
nav ul.north-sea-fishes ul ul li a:hover,
nav ul.north-sea-fishes ul ul li a:active{
background: linear-gradient(#DBCE43 0%, #EDDF49 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background-image: -webkit-gradient(linear, left top, left bottom, from(#DBCE43), to(#EDDF49) );
background-image: -moz-linear-gradient(-90deg, #DBCE43, #EDDF49);
}
/* Responsive */
/**
* Very large desktop
*/
nav #menu {
display: none;
}
/**
* Landscape phone to portrait tablet.
* We change the navigation to a collapsing menu button
* typical for mobile devices.
*/
@media (max-width: 767px) {
/* Make all collapsible nav-menus invisible */
.nav.collapsible {
display: none;
}
/* Possible content between nav-tag and a div-tag with class '.nav' too */
nav.vertical{
display:none;
}
nav.vertical h5{
display:none;
}
/* Show the collapsing menu button */
nav #menu {
display: block;
}
}
/* e.g. Samsung 85008i max. width: 240 px */
@media (max-width: 300px) {
/* clip long words, e.g. 'Regenbogenforelle' */
nav.collapsed ul li a {
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}3-Purpose-Grid - File: assets/css/nav-resp-whr-nrw-var-1-vers-0.5.0.css
Interessant ist vor allem der Style nav #menu, mit dem in der Html-Struktur der mobile Button identifiziert wird, mit dem das Collapsible Menu expandiert werden kann. Dieser ist für den very large desktop unsichtbar (display: none;) und wird unterhalt von 768 Pixel sichtbar gemacht (display: block), während die Top-Navigation (.nav.collapsible) an der gleichen Umbruch-Stelle unsichtbar gemacht wird (display: none).
Dieser Mechanismus ist für Header 1 und Header 2 der gleiche, während Header 3 einen komplett anderen Ansatz verfolgt. Dementsprechend wird für Header 3 die Datei nav-resp-xy.css auch nicht benötigt.
Header 1: Die 3-Purpose-Grid-Logik
Header 1 orientiert sich layout-technisch strikt am 3-Purpose-Grid. Er enthält außer einem einfachen Logo keine Grafiken, die mit Gimp oder Photoshop aufwändig erstellt werden müssten. Für ein neues Projekt tauscht man einfach Logo, Header und Slogan aus und schon hat man wieder ein funktionierendes System.
Abb. 2: 3 Purpose Grid: Header 1 orientiert sich am Grid-Layout (Demo)
Die grau hinterlegten Bereiche sind natürlich nicht Bestandteil des Designs, sondern sind das Ergebnis der Test-CSS-Styles in der Datei grid-test-whr-nrw-var-1-vers-0.5.0.css, die wir deshalb verwenden, um Fehler im Layout an den Anschlussstellen der jeweiligen Spalten besser erkennen zu können.
Die Html-Struktur für den Header 1 sieht folgendermaßen aus:
...
<!-- Fonts -->
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css" />
<!-- 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" />
<!-- 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" />
<!-- Navigation Top -->
<link href="./assets/css/nav-resp-whr-nrw-var-1-vers-0.5.0.css" rel="stylesheet" type="text/css" />
<!-- Header / Footer styles -->
<link href="./assets/css/header-grid.resp-whr-nrw-var-1-vers-0.5.0.css" rel="stylesheet" type="text/css" />
<link href="./assets/css/footer-grid.resp-whr-nrw-var-1-vers-0.5.0.css" rel="stylesheet" type="text/css" />
<!-- Responsive -->
<link href="./assets/css/resp-855-whr-nrw-var-1-vers-0.5.0.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
<header>
<!-- Header variant 1.0 -->
<div class="left col2">
<div class="container">
<div class="logo-img"><a href="#"><img src="./assets/img/logo.png" /></a></div>
<div class="logo-text">
<h1>3 Purpose Grid</h1>
<h2 class='big-display'>A Simple Grid for Most All Purposes</h2>
</div>
</div>
</div>
<div class="right col1">
<div class="container">
<nav class='nav-top-right'>
<ul id="nav-top-right" class="nav collapsible" >
<li><a href="/">Home</a></li>
<li><a href="http://code-kiste.hauertmann.com/" target="_blank">Blog</a></li>
<li><a href="http://hauertmann.com/content/leistungen-und-kompetenzen" target="_blank">Support</a></li>
</ul>
<button id="menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</nav>
</div>
</div>
<div class='clearfix'></div>
<div class='small-display'><h2>A Simple Theme for Most All Purposes</h2></div>
</header>Hier die zugehörigen CSS-Regeln, wobei man für eine statische Version des Headers die Media-Queries einfach weglassen kann.
/* (c) Dr. Wolfgang Hauertmann, Hilden 2015, Lizenz: siehe lizenz.txt */
/* Header variant 1.0 */
header {
}
/* Reset special default styles */
header h1,
header h5 {
text-align: left;
width:auto;
}
header ul {
margin-left: 0;
}
/* ------ */
.body-layer {
background-image: none;
}
header h1 {
font-family: 'Oswald', sans-serif;
font-size: 2em;
padding-left:16px;
}
header h2 {
font-size: 1.4em;
}
header h1,
header h2 {
white-space:nowrap;
}
header div.logo-img {
width: 64px;
float:left;
margin-top:0.6em;
display: inline-block;
}
header div.logo-text {
float:left;
margin-left: 10px;
}
header .left.col2 .container {
float: left;
}
header .right.col1 .container {
float: right;
}
header .small-display {
display:none;
}
/* Responsive */
/*
* Special media-query: Slogan run's out of 2-columns-size'
* We leave the grid logic now
*/
@media (max-width: 797px) {
header .col1 {
position:absolute;
right:10px;
top:20px;
}
header .col2 {
width: 100%;
}
header .nav-top-right {
margin-top:5px;
}
}
@media (max-width: 540px) {
header .big-display {
display:none;
}
header .small-display {
display:block;
width:100%;
text-align:center;
white-space:normal;
}
header .left.col2 .container {
padding-bottom:0;
}
header h1,
header h2 {
white-space:normal;
}
header .nav-top-right {
margin:5px 0 0 0;
}
header h2{
font-size: 18px;
}
header div.logo-img {
margin-top: 0;
}
header h2{
font-size: 24px;
}
}
@media (max-width: 479px) {
header h2{
font-size: 20px;
}
}
@media (max-width: 440px) {
header h1{
font-size: 22px;
padding-top: 10px;
}
header h2{
font-size: 18px;
}
}
@media (max-width: 380px) {
header div.logo-img {
width: 48px;
}
header h1{
font-size: 18px;
padding-top: 10px;
}
header h2{
font-size: 14px;
}
header .col1 {
right:10px;
}
header .right.col1 .container {
padding: 5px 0 0 0;
}
}
@media (max-width: 320px) {
header h1{
font-size: 14px;
margin-left: 0;
padding-top: 10px;
padding-left: 0;
}
}
@media (max-width: 240px) {
header .container {
width: 100%;
}
header h1 {
clear:both;
width: 100%;
text-align:center;
font-size:12px;
}
}
3-Purpose-Grid - File: assets/css/header-grid.resp-whr-nrw-var-1-vers-0.5.0.css
Ein Nachteil dieses Headers ist, dass man relativ viele Umbruchstellen im Responsive Layout benötigt, um diesen Header von der Desktop-Breite auf die Breite von z.B. kleinen Handys (Feature Phones) runterzubrechen.
Ähnliches gilt auch für den Footer 1, der nach dem gleichen Prinzip aufgebaut ist.
Footer 1: Der 3-Purpose-Grid-Footer
Der Footer enthält enthält 3 Spalten mit den für Footer typischen Menu-Punkten (vgl. Abb 3).
Abb. 3: 3 Purpose Grid: Footer 1 orientiert sich ebenfalls am Grid-Layout (Demo)
Um das Copyright einigermaßen zu zentrieren, wurde es an die zweite Spalte rechts angelehnt.
Hier die Html-Struktur (CSS-Dateien und Fonts wie für Header 1):
<footer>
<!-- Footer variant 1.0 -->
<div class='left col1'>
<div class="container">
<div class="contact">
<h5>Kontakt</h5>
<p>Wolfgang Hauertmann</p>
<p class="company">Weblösungen</p>
<p>Richrather Str. 196</p>
<p>40723 Hilden</p>
</div>
</div>
</div>
<div class='right col2'>
<div class='col1 two-columns left'>
<div class="container">
<div class="copyright">
<h5>(c) 2014 Wolfgang Hauertmann</h5>
</div>
</div>
</div>
<div class='col1 right'>
<div class="container">
<div class="sitemap">
<h5>Sitemap</h5>
<ul>
<li><a href="/">Home</a></li>
<li><a href="http://hauertmann.com" target="_blank">Über mich</a></li>
<li><a href="http://hauertmann.com/content/leistungen-und-kompetenzen" target="_blank">Support</a></li>
<li><a href="#">AGB</a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>Es folgen die zugehören CSS-Regeln:
/* (c) Dr. Wolfgang Hauertmann, Hilden 2015, Lizenz: siehe lizenz.txt */
/* Footer Variant 1.0 */
footer {
}
/* Reset special default styles */
footer h5 {
text-align: left;
}
/* ------ */
footer .contact {
float:left;
}
footer .contact p {
text-transform:uppercase;
font-size: 0.8em;
}
footer .company {
font-style: italic;
white-space: nowrap;
}
footer .company:before {
content: "~ "
}
footer .company:after {
content: " ~"
}
footer .copyright {
white-space: nowrap;
}
footer .sitemap h5{
text-align:right;
}
footer .sitemap ul {
list-style-type: none;
text-align:right;
}
footer a, footer a:visited {
font-family: 'arial';
font-size: 0.8em;
color: white;
text-decoration: none;
}
footer div {
overflow: visible !important;
}
/* 'Richrather Str.' too long */
footer .contact p:nth-child(4) {
white-space: nowrap;
}
footer .left.col1 .container {
float: left;
}
footer .right.col1 {
float:right;
}
footer .right.col1 .container {
float:right;
}
/* align 'copyright' right. This is a little bit more centric */
footer .right.col2 .two-columns.left .container {
float:right;
}
/* Responsive */
/**
* Landscape phone to portrait tablet.
* We change the navigation to a collapsing menu button
* typical for mobile devices.
*/
@media (max-width: 767px) {
footer .right .col1.left {
width: 100%;
}
/* Reduce distance between 'copyright' and 'sidemap' */
footer .right.col1 .container {
padding-top:0;
}
}
/**
* Landscape phones and down
*/
@media (max-width: 480px) {
/* Android only: 67% and 33% is too much for floating (rounding error?) */
/* The following work-around is a little bit q&d, but it works */
footer>.col2 {
width: 60% !important;
float:right;
padding-top:5px;
}
footer>.col1 {
width: 30% !important;
float:left;
padding-top:5px;
}
footer .contact p {
padding-bottom:5px;
}
}
/* e.g. Samsung 85008i max. width: 240 px */
@media (max-width: 300px) {
/* contact */
footer .contact p:first-of-type {
font-size: 0.7em;
}
/* copyright */
footer .two-columns.left {
display: none;
}
/* Richrather Str. too long */
footer .contact p:nth-child(4) {
font-size:xx-small;
}
/* trim resulting left and right side to the same hight */
footer .left.col1 .container {
padding-top: 0px;
}
/* sitemap */
footer .sitemap ul {
margin-top:-0.15em;
}
footer .sitemap ul li {
padding-top:0.175em;
}
}
3-Purpose-Grid - File: assets/css/footer-grid.resp-whr-nrw-var-1-vers-0.5.0.css
Die Versionen Header 1 und Footer 1 sind vom Design her etwas langweilig, eignen sich aber gut als Ausgangspunkt für unsere zukünftigen NodeJS-Konsolen-Projekte, da Logo, Header und Slogan leicht austauschbar sind.
Benötigt man nur die statische Version, kann man die Media-Queries in den zugehörigen CSS-Dateien einfach weglassen. Dies gilt auch für die folgenden Header und Footer.
Header 2: Der Schönling
Für hybride Apps und Portalseiten im Internet eignet sich diese Variante (Abb. 4). Sie kommt mit weniger Styles für das responsive Design aus, benötigt aber dafür aufwändigere Grafiken im Header.
Abb. 4: 3 Purpose Grid: Header 2 für hybride und Portal-Projekte (Demo)
Die Html-Struktur:
...
<!-- Fonts -->
<link rel="stylesheet" href="./assets/css/icomoon.css">
<!-- 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" />
<!-- 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" />
<!-- Navigation Top -->
<link href="./assets/css/nav-resp-whr-nrw-var-1-vers-0.5.0.css" rel="stylesheet" type="text/css" />
<!-- Header / Footer styles -->
<link href="./assets/css/header-grid.resp-whr-nrw-var-2-vers-0.5.0.css" rel="stylesheet" type="text/css" />
<link href="./assets/css/footer-grid.resp-whr-nrw-var-2-vers-0.5.0.css" rel="stylesheet" type="text/css" />
<!-- Responsive -->
<link href="./assets/css/resp-855-whr-nrw-var-1-vers-0.5.0.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
<header>
<!-- Header variant 2.0 -->
<div class="container">
<a class="navbar-brand" href="/"><img class="logo-transparent" alt="3 Purpose Theme" src="./assets/css/images/logo_branding.png" /></a>
<!-- Top-right-menu -->
<nav class='nav-top-right'>
<ul id="nav-top-right" class="nav collapsible" >
<li><a href="#">Home</a></li>
<li><a href="http://code-kiste.hauertmann.com/" target="_blank">Blog</a></li>
<li><a href="http://hauertmann.com/content/leistungen-und-kompetenzen" target="_blank">Support</a></li>
</ul>
<button id="menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</nav>
</div>
</header>
Die CSS-Datei:
/* (c) Dr. Wolfgang Hauertmann, Hilden 2015, Lizenz: siehe lizenz.txt */
/* Header variant 2.0 */
.body-layer {
background: url(images/background_top_855plus40x180.png) no-repeat scroll 0 0;
background-color: rgba(159, 193, 216, 1);
background-size: 100% auto;
}
header {
background: transparent;
}
a.navbar-brand {
width:75%;
display: block;
float:left;
}
img.logo-transparent {
width: 100%;
height: auto;
margin: 0px 0px 0px 0px;
}
/* Responsive */
/*
* Special media-query: Slogan run's out of 2-columns-size'
* We leave the grid logic now
*/
@media (max-width: 797px) {
header .col1 {
position:absolute;
right:10px;
top:20px;
}
header .col2 {
width: 100%;
}
header .nav-top-right {
margin-top:5px;
}
}
@media (max-width: 540px) {
header .big-display {
display:none;
}
header .small-display {
display:block;
width:100%;
text-align:center;
white-space:normal;
}
header .left.col2 .container {
padding-bottom:0;
}
header h1,
header h2 {
white-space:normal;
}
header .nav-top-right {
margin:5px 0 0 0;
}
header h2{
font-size: 18px;
}
header div.logo-img {
margin-top: 0;
}
header h2{
font-size: 24px;
}
}
@media (max-width: 479px) {
header h2{
font-size: 20px;
}
}
@media (max-width: 440px) {
header h1{
font-size: 22px;
padding-top: 10px;
}
header h2{
font-size: 18px;
}
}
@media (max-width: 380px) {
header div.logo-img {
width: 48px;
}
header h1{
font-size: 18px;
padding-top: 10px;
}
header h2{
font-size: 14px;
}
header .col1 {
right:10px;
}
header .right.col1 .container {
padding: 5px 0 0 0;
}
}
@media (max-width: 320px) {
header h1{
font-size: 14px;
margin-left: 0;
padding-top: 10px;
padding-left: 0;
}
}
@media (max-width: 240px) {
header .container {
width: 100%;
}
header h1 {
clear:both;
width: 100%;
text-align:center;
font-size:12px;
}
}3-Purpose-Grid - File: assets/css/header-grid.resp-whr-nrw-var-2-vers-0.5.0.css
Die Grafiken, die man für diese Versionen benötigt, möge man sich bitte vorläufig aus der Demo-Version herauskopieren.
An einem komfortableren Download-Verfahren wird noch gearbeitet. Dieses wird man dann später auf der Demo-Seite finden.
Footer 2: Eine Version für's Auge
Das gleiche gilt für den Footer (Abb. 5). Für diesen benötigt man zudem den speziellen Font icomoon, den man sich aus dem Internet herunterladen muss in einen speziellen Ordner unterhalb des assets-Ordners, z.B. mit dem Namen fonts.
Abb. 5: 3 Purpose Grid: Header 2 für hybride und Portal-Projekte (Demo)
Die Html-Struktur (CSS-Dateien und Fonts wie für Header 2):
<footer>
<!-- Footer variant 2.0 -->
<div class="container">
<a href="http://hauertmann.com" target="_blank">
<img class="logo" alt="Weblösungen" src="./assets/img/logo_footer.png">
</a>
<ul class="horiz socmedIcons">
<li><a class="icon-twitter icon" aria-hidden="true" href="https://twitter.com/demo" target="_blank"> </a></li>
<li><a class="icon-feed2 icon" aria-hidden="true" href="http://code-kiste.hauertmann.com/rss.xml" target="_blank"> </a></li>
</ul>
<nav>
<ul class="nav menu-footer">
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-19 current_page_item menu-item-27">
<a href="http://code-kiste.hauertmann.com/content/3-purpose-theme-ein-grid-layout-f%C3%BCr-fast-alle-zwecke" target="_blank">Artikel</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28">
<a href="http://hauertmann.com/impressum" target="_blank">Kontakt</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29">
<a href="http://code-kiste.hauertmann.com/" target="_blank">Blog</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30">
<a href="/">Home</a>
</li>
</ul>
</nav>
<div class="legal">
<p> © 2015 Wolfgang Hauertmann </p>
<ul class="horiz">
<li>Dr. Wolfgang Hauertmann, </li>
<li>Richrather Str. 196, </li>
<li>D-40723 Hilden </li>
</ul>
<p class="cNo">Ust-IdNr.: DE184053948</p>
</div>
</div>
</footer>
Die CSS-Datei:
/* (c) Dr. Wolfgang Hauertmann, Hilden 2015, Lizenz: siehe lizenz.txt */
/* Footer Variant 2.0 */
footer {
font-family: 'Atlas Grotesk Web', 'helvetica neue', helvetica, arial, sans-serif;
font-weight: 100;
font-style: normal;
font-stretch: normal;
background: none repeat scroll 0 0 #2B67A4; /*#231f20;*/
-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;
overflow: hidden;
text-align: center;
width: 100%;
}
/* Reset special default styles */
footer a, footer a:visited {
color:#ffffff;
text-align:left;
}
footer ul {
margin-left: 0;
}
/* ------ */
footer a, footer a:visited {
text-decoration:none !important;
}
footer p, footer li, footer li a {
font-family: "Open Sans",sans-serif;
color: #fff;
}
footer ul li {
display: inline-block;
}
footer .logo {
display: block;
width: 100%;
float: left;
vertical-align: baseline;
height: auto;
margin: 0 auto 1.5em;
max-width: 260px;
}
footer ul.socmedIcons {
float: left;
display: inline;
position: relative;
margin-bottom: 1em;
}
footer ul.socmedIcons li {
margin-left: 0.5em;
margin-right: 0.5em;
}
footer ul.socmedIcons li a {
font-size: 2.5em;
color: white;
background-color:#2B67A4; /*#231f20;*/
}
footer nav {
float:right;
font-size: 18px;
}
footer nav ul,
footer nav ol {
list-style: outside none none;
}
footer nav ul li{
margin-top:0.1em;
padding-left: 0.5em;
/*padding-right: 0.5em;*/
}
footer nav ul li a {
font-size: 1.2em;
}
footer .legal {
clear: both;
font-size: 0.8em;
}
footer .legal ul {
text-align: left;
}
/* Responsive */
/**
* Landscape phone to portrait tablet.
* We change the navigation to a collapsing menu button
* typical for mobile devices.
*/
@media (max-width: 767px) {
footer .logo {
float:none;
max-width: 360px;
margin: 0 auto 0.8em;
}
footer ul.socmedIcons {
float:none;
}
footer nav {
float:none;
}
footer nav ul li{
/* display: list-item; weiter unten */
margin-top:0.8em;
padding-left: 1em;
padding-right: 1em;
}
footer nav ul li a{
font-size: 1.2em;
}
footer .legal {
text-align: center;
margin-top:2.8em;
display:inline-block;
}
footer p {
text-align: center;
margin-top:0.8em;
}
footer .legal ul {
text-align: center;
margin-top:1.8em;
}
}
/**
* Landscape phones and down
*/
@media (max-width: 480px) {
footer nav ul li{
display: list-item;
}
}3-Purpose-Grid - File: assets/css/footer-grid.resp-whr-nrw-var-2-vers-0.5.0.css
Header 3: Der Simpel-Header
Diese Version des Header (Abb. 6), die mir wegen ihrer Einfachheit gefällt, benötigt keine nav-resp-xy.css-Datei, sondern führt die entsprechenden Styles alle in einer eigenen header-grid.resp-xy.css-Datei mit.
Interessant ist außerdem, dass hier mit der relativ neuen CSS-Eigenschaft display: flex; gearbeitet wird. Diesen Header habe ich mir übrigens hier abgeschaut.
Abb. 6: 3 Purpose Grid: Header 3 für einfache responsive Aufgaben (Demo)
Aufgrund der neuen Eigenschaft display:flex; benötigt man an den Umbruchstellen nur die Angabe einer prozentualen neuen Breite für den Container eines Menupunktes, um aus den vier Spalten zwei Spalten zu machen und so weiter. Dies sieht dann für das 2-spaltige Design so aus:
Abb. 6: 3 Purpose Grid: Header 3 responsive
Die Html-Struktr:
<header>
<!-- Header variant 3.0 -->
<div class="container">
<nav class='nav-mainmenu'>
<ul id="nav-mainmenu" class="nav collapsible" >
<li>
<a target="_blank" href="#">Home</a>
</li>
<li>
<a href="#">Blog-Artikel</a>
<ul class="sub collapsible">
<li><a href="http://code-kiste.hauertmann.com/content/3-purpose-theme-ein-grid-layout-f%C3%BCr-fast-alle-zwecke">3 Purpose Theme</a></li>
<li><a href="#">Artikel 2</a></li>
<li><a href="#">Artikel 3</a></li>
</ul>
</li>
<li><a href="http://code-kiste.hauertmann.com/">Blog</a></li>
<li><a href="http://hauertmann.com/content/leistungen-und-kompetenzen">Support</a></li>
</ul>
</nav>
</div>
</header>
Die CSS-Datei:
/* In Anlehnung an diesen Artikel: http://www.mediaevent.de/css/media-query.html */
/* Header variant 3.0 */
header {
overflow:visible;
}
.body-layer {
background-image: none;
}
ul#nav-mainmenu {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
-ms-flex-pack:justify;
justify-content: space-between;
margin-left: 0;
padding-left: 0;
list-style-type: none
}
ul#nav-mainmenu li {
position: relative;
width: 48%;
font-size:0.92em;
background: #2B67A4;
margin-right: 1px;
margin-bottom:1ex;
border-radius: 4px;
}
ul#nav-mainmenu li a {
display:block;
padding: 10px;
text-decoration: none;
color: white;
white-space: nowrap;
}
ul#nav-mainmenu ul li {
background: none;
margin-top: 0;
display: block;
margin-bottom: -1px;
position:relative;
}
ul#nav-mainmenu li:hover ul.sub.collapsible {
display: block;
}
ul#nav-mainmenu li ul.sub.collapsible li {
border:solid 1px #ffffff;
width:100%;
background: rgba(51,48,0,0.9);
}
ul#nav-mainmenu ul {
position: absolute;
top:38px;
right:0;
padding-left: 0;
width: 200%;
display: none; /*!*/
z-index:100;
}
@media only screen and (min-width: 767px) {
ul#nav-mainmenu li {
width: 24%
}
}
3-Purpose-Grid - File: assets/css/header-grid.resp-whr-nrw-var-3-vers-0.5.0.css
Fazit
Vorgestellt wurde ein Set aus Headern und Footern, die man als Startpunkte für sein Projekt auswählen kann.
Header 1 und Footer 1 eignen sich zum Beispiel für unsere geplanten NodeJS-Projekte. Header 2 und Footer 2 für unsere geplanten hybriden Apps und Portalseiten.
Im nächsten Teil wird dann das Thema Navigation, das in diesem Teil 3 schon ansatzweise dargestellt wurde, ausführlicher behandelt.