HTML5 als Designwerkzeug - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 132

::selection {background: rgb(255,255,158);}
::-moz-selection {background: rgb(255,255,158);}
img::selection {background: transparent;}
img::-moz-selection {background: transparent;}
body {-webkit-tap-highlight-color: rgb(255,255,158);}

Listing 4.2 Die typografischen Grundlagen, festgelegt im CSS des Less Frameworks

In den typografischen Vorlagen werden die Einstellungen gespeichert, die Sie zuvor
auf der Webseite unter line-height ausgewählt haben. Diese können Sie nach Belie-
ben anpassen. Beachten Sie allerdings, dass Sie bei Änderungen der Zeilenabstände
gegebenenfalls das Grundlinienraster des Textes verlieren und somit Überschriften
und Texte nicht mehr auf derselben Grundlinie stehen könnten.

Der Bereich der Selection Colours , das heißt der Selektionsfarben, beinhaltet die Defi-
nition der Farbe, die sichtbar wird, wenn Sie Text markieren. Ein Designdetail, wel-
ches auf die Entwicklung bei Touch-basierten Endgeräten wenig Einfluss hat, da die
Markierungsfarbe dort (unter iOS z. B. ein helles Blau) bereits vorgegeben ist.

Das Herz des Less CSS Frameworks

Aber nun zum spannenden Teil des Frameworks: den verschiedenen Media Queries,
die die Anzeige auf den verschiedenen Bildschirmgrößen und -ausrichtungen steu-
ern.

/* Default Layout: 992px.
Gutters: 24px.
Outer margins: 48px.
Leftover space for scrollbars @1024px: 32px.
------------------------------------------------------------------------------
cols 1 2 3 4 5 6 7 8 9 10

px 68 160 252 344 436 528 620 712 804 896 *

/

body {
width: 896px;
padding: 72px 48px 84px;
background: rgb(232,232,232);
color: rgb(60,60,60);
-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting
font-sizes */
}

Listing 4.3 Die CSS-Definitionen für das »Default Layout«