# SASS Framework Der SASS Part ist das Herzstück des gesamten Frameworks, es beinhaltet verschiedene Konzepte die einem die Arbeit erleichtern sollen. Das CSS File kompiliert sich dabei über die Informationen aus den Variablen komplett zurecht, so daß man dann auch schon mit der eigentlichen Arbeit beginnen kann. Allen voran steht die Flexibilität, man kann über HTML Klassen die Layouts definieren, oder man verwendet die Klassen und Mixins im SASS File und beschreibt damit das Design. Wer Definitionen sparen möchte, kann mittels `@extend ...` Klassen im SASS File mit einander verknüpfen. # Einstellungen Die Grundeinstellungen für die kompilierung des CSS Files, befinden sich in den `_variables`. Diese sind aufgeteilt in zwei Dateien um die Trennung zwischen Layout und Stil zu erleichtern, da es auch möglich ist zwei CSS Files zu generieren. Im normalfall kompiliert SASS mit den Daten aus den zwei Variable Files den gesamten "Rahmen" des CSS mit dem man dann arbeiten kann. ## Grobe Details der Variablen Im Verzeichnis `lib/sass` befindet sich die Datei `_variables-base.sass`. Hiermit stellen wir das Layoutverhalten ein. Dazu zählt die Aktivierung der Fallbacks (z.B. wenn das CSS auch mit IE7 funktionieren soll), Aktivierung der Grids, des responsiven Layouts und Typo, Grid Einstellungen, Spacing, Button und Formlayout. Im Verzeichnis `lib/sass` befindet sich ebenso die Datei `_variables-style.sass`. Hier werden die Stilelemente definiert, wie Farben, Textfarben, Font Familien, Border Radius, Images, Button Farben, Form Design. Um die Übersicht zu erleichtern, da eine große Anzahl von Dateien importiert wird, ist der Import in der Datei `_style-init.sass` ausgelagert, die über die Datei `style.sass` aufgerufen wird. Mit dieser Datei wird man im weiteren Verlauf am häufigsten Arbeiten und es ist auch die Datei die zur `style.css` kompiliert wird. Auf die genauen Details kommen wir in den entsprechenden Bereichen. # Normalize ``` bash DEPENDENCIES: lib/sass/_variables-base.sass lib/sass/generic/_normalize.sass ``` Die `_normalize.sass` führt einen Teilreset der vordefinierten Elemente aus und gleicht sie damit auf allen Browsern an. Desweiteren werden die ersten Grundeinstellungen an der Typografie etabliert. Die relevanten Variablen findet man in der `_variables-base.sass` Datei. ``` scss // File: lib/sass/_variables-base.sass $activate-grid : true ``` Aktiviert das neue Boxmodel um für IE7 den Fallback zu aktivieren: ``` scss // File: lib/sass/_variables-base.sass $comp-borderbox : true ``` Als Fallback wird das `boxsizing.htc` File eingebunden und sorgt beim IE7 für die aktivierung. Der Pfad muss zum File muss noch relativ zugewiesen werden: ``` scss // File: lib/sass/_variables-base.sass $comp-polyfill-path : 'components/js' ``` Damit auf IE7 und 8 CSS3 Effekte wie Round-Edges oder Box-Shadow genutzt werden kann, kann man CSS3Pie verwenden, das aber noch aktiviert werden muss. Der CSS3Pie Behavior muss aber seperat an den jeweiligen Klassen hinzugefügt werden. ``` scss // File: lib/sass/_variables-base.sass $comp-css3pie : true // Der absolute Pfad ist notwendig für CSS3Pie $comp-absolute-path : 'http://localhost/saffron/' ``` ## Typo allgemein Die Typografie kann über Breakpoints skaliert werden. Wichtig hierbei das REM als Fontsize verwendet wird. ``` scss // File: lib/sass/_variables-base.sass $body-typo-based : rem // Basis Fontsize $body-font-scale : 100 ``` > Mittels REM kann über einen Zentralen Knotenpunkt die Font skaliert werden. Es verhält sich dabei wie EM nur das hier die Fontbasis immer im Body liegt. Jetzt kann man über 3 Breakpoints die Typografie skaliert werden. ``` scss // File: lib/sass/_variables-base.sass $bp-tablet : 1024 // Tablet Breakpoint $bp-tablet-fontscale : 95 // Fontbase auf 95% $bp-small-tablet : 768 // Tablet End Breakpoint $bp-small-tablet-fontscale: 90 // Fontbase auf 90% $bp-mobile : 480 // Small Breakpoint $bp-mobile-fontscale : 85 // Fontbase auf 90% ``` Fonts werden auch über `_normalize.sass` eingestellt, die Lineheight kann dabei entweder der Baseline folgen oder individuell eingestellt werden. Die Fontsize kann dabei entweder über REM oder PX eingestellt werden. #### Heading Die Überschriften werden von h1 bis h6 definiert, das sowohl als Tag und als Klasse. Falls das Margin stören sollte kann die Klasse `.marginfree` angehängt werden. ``` scss // File: lib/sass/_variables-base.sass $font-h1-style : 32 40 10 $font-h2-style : 32 39 16 $font-h3-style : 27 33 18 $font-h4-style : 24 30 10 $font-h5-style : 22 28 10 $font-h6-style : 20 26 10 ``` - Wert 1 : Fontsize - Wert 2 : Lineheight - Wert 3 : Margin Bottom ``` markup

Headline

non Semantic Headline

Headline

non Semantic Headline without Bottom Margin
``` Um aus einer semantischen Überschrift ein Logo Container zu erstellen, genügt es die Klasse `.brand` hinzuzufügen, falls ein Bild als Logo verwendet wird verwendet man die Klasse `.brand--logo`. ``` markup

Logo

``` #### Paragraph Bei Paragraphen (<p>) wird es ähnlich gehandhabt, die Werte werden aber auch an "ungetaggten" Fließtext übertragen. ``` scss // File: lib/sass/_variables-base.sass $font-p-style : 16 20 10 ``` - Wert 1 : Fontsize - Wert 2 : Lineheight - Wert 3 : Margin Bottom ``` markup

Lorem Ipsum

Paragraph without Margin Bottom

Bigger Paragraph for leadtext

Bigger Paragraph for leadtext without Marginbottom

``` #### Lists Listenelemente verlieren Grundsätzlich ihre Listenelemente und sind damit weitgehenst unformatiert (Listen werden zu 60% für andere Zwecke verwendet). Der jeweilige Listenstil wird über Klassen aktiviert. ``` scss // File: lib/sass/_variables-base.sass $font-ul-style : 16 20 20 ``` - Wert 1 : Fontsize - Wert 2 : Lineheight - Wert 3 : Margin Bottom ``` markup ``` **Beispiel:** http://jsfiddle.net/gisugosu/LQ2Ka/embedded/result/ Um Listenelemente global zu aktivieren, z.B. für Contentbereiche die von einem Kunden über WYSISWYG Editoren gepflegt werden, kann man `@extend` verwenden. ``` scss .customer-content ul @extend .list--disc ``` # Shared Classes ``` bash DEPENDENCIES: lib/sass/_variables-base.sass lib/sass/generic/_shared.sass ``` ## Clearfix `.clearfix` resetet die Floats der innenliegenden Elemente, muss auf ein äußeres Container Element angewandt werden. ``` markup
Lorem Ipsum
``` ## Clear `.clear` ist die klassische Variante um Floats zu reseten. Dafür muss ein Element im Fluss nach den Floatenden Elementen verwendet werden. ``` markup
Lorem Ipsum
Lorem Ipsum

``` ## Cropped `.cropped` beschneidet die Container Elemente mit `overflow: hidden`. ``` markup
Lorem
``` ## Float Mit `.float--left` und `.float--right` werden Elemente gefloatet. ``` markup
Element auf der linken Seite
Element auf der rechten Seite
``` ## Block `.block` wandelt ein Inline Element in ein Block Element ``` markup Block Element ``` ## Center Mittels `.center` werden Elemente zentriert (Block Elemente). ``` markup
Zentriert
``` ## Block Center Handelt es sich bei den Elementen um Inline Elemente müssen diese mit `.center--block` zentriert werden. Das Element wird automatisch in ein Block Element gewandelt. ``` markup ``` ## Relative Mit `.relative` werden Elemente relativ positioniert, ideal um für absolut positionierten Elementen ein Anker zu bieten. ``` markup
``` ## Caps Um Text in große Ligulaturen zu wandeln, verwendet man die Klasse `.caps`. ``` markup

bin großgeschrieben

``` ## Info Mit `.info` wird der Cursor in einen Hilfe Cursor umgewandelt. ``` markup Info Text ``` ## Text Um Texte in der Ausrichtung zu verändern, kann man die Klassen `.text--left`, `.text--right` oder `.text--center` verwenden. ``` markup

Links ausgerichtet

Rechts ausgerichtet

Text zentriert

``` ## Middle Mit `.middle` lassen sich Elemente vertikal zentrieren. ``` markup
Lorem
``` ## Middle Center Mit `.middle--center` lassen sich Elemente horizontal und vertikal zentrieren. ``` markup
Lorem
``` ## Flush Mit `.flush` werden Margin zurück gesetzt. - `.flush` = Reset all margin - `.flush--top` = Reset top margin - `.flush--bottom` = Reset bottom margin - `.flush--left` = Reset left margin - `.flush--right` = Reset right margin - `.flush--ends` = Reset top & bottom margin - `.flush--sides`= = Reset left & right margin ``` markup
...
``` ## Flood Mit `.flood` werden Padding zurück gesetzt. - `.flood` = Reset all paddings - `.flood--top` = Reset top paddings - `.flood--bottom` = Reset bottom paddings - `.flood--left` = Reset left paddings - `.flood--right` = Reset right paddings - `.flood--ends` = Reset top & bottom paddings - `.flood--sides` = Reset left & right paddings ``` markup
...
``` ## Bar Top Wenn ein Element im oberen Bereich der Seite positioniert werden soll, verwendet man die Klasse `.bar--top`. Soll das Element im oberen Bereich des Viewports positioniert werden, wird die Klasse `.bar-super--top` verwendet. ``` markup
Header
``` ## Bar Bottom Wenn ein Element im unteren Bereich der Seite positioniert werden soll, verwendet man die Klasse `.bar--bottom`. Soll das Element im unteren Bereich des Viewports positioniert werden, wird die Klasse `.bar-super--bottom` verwendet. ``` markup ``` ## Muted Über `.muted` werden Elemente teiltransparent dargestellt. ``` markup

Teiltransparent

``` ## Hidden Elemente kann man mit `.hidden` auf `display:none` stellen. ``` markup ``` ## Invisible Elemente kann man mit `.invisible` auf `visibility:hidden` stellen. ``` markup ``` ## Fluid Mit `.fluid` können sich Bilder auf ihre Maximal Breite vergrößern. _Dieses Verhalten wird schon ohne Klasse herbeigeführt, dient hier nur noch als zusätzliche Klasse._ ``` markup responsive image ``` ## Fluid Full Mit `.fluid--full` werden Bilder immer auf die maximale Breite des äußeren Containers vergrößert. ``` markup responsive image ``` ## Flex Video Damit sich Videos fluide Verhalten wird dies über die Klasse `.flex-video` bewerkstelligt. Dies dient dann als Container Element in dem das Video eingebettet wird. ``` markup
``` Um den unterschiedliche Videoformate zu unterstützen, kann man zusätzliche Klassen hinzufügen (um die Letterbox zu reduzieren). - `.widescreen` = 19:9 - `.cinema` = 21:9 ``` markup
``` ## Word Wrap Mit `.word-wrap` verhindert man den Textüberlauf. ``` markup

Lorem ipsum dolor sit amet

``` ## Truncate `.text-truncate` ist die ähnlich dem Word-Wrap nur wird der Text hier einfach gekürzt. ``` markup

Lorem ipsum dolor sit amet

``` ## Textcolor Textfarben können ebenso über Klassen eingestellt werden. Die Farbangaben befinden sich in der `_variables-style.sass`. ### Textcolor Primary `.tcolor--primary` Stellt die Textfarbe auf die primary Farbe ``` markup

Lorem ipsum dolor sit amet.

``` ### Textcolor Secondary `.tcolor--secondary` Stellt die Textfarbe auf die secondary Farbe ``` markup

Lorem ipsum dolor sit amet.

``` ### Textcolor Third `.tcolor--third` Stellt die Textfarbe auf die third Farbe ``` markup

Lorem ipsum dolor sit amet.

``` ### Textcolor Fourth `.tcolor--fourth` Stellt die Textfarbe auf die fourth Farbe ``` markup

Lorem ipsum dolor sit amet.

``` ### Textcolor Fifth `.tcolor--fifth` Stellt die Textfarbe auf die fifth Farbe ``` markup

Lorem ipsum dolor sit amet.

``` ### Textcolor Sixth `.tcolor--sixth` Stellt die Textfarbe auf die sixth Farbe ``` markup

Lorem ipsum dolor sit amet.

``` ### Textcolor Black `.tcolor--black` Stellt die Textfarbe auf die black Farbe ``` markup

Lorem ipsum dolor sit amet.

``` ### Textcolor White `.tcolor--white` Stellt die Textfarbe auf die white Farbe ``` markup

Lorem ipsum dolor sit amet.

``` ## Background Color Die Hintergrundfarbe der Elemente kann über Klassen geändert werden. Die Farbangaben befinden sich in der `_variables-style.sass`. ### Background primary `.bcolor--primary` Stellt die Background-Color auf die primary Farbe ``` markup
Box

``` ### Background secondary `.bcolor--secondary` Stellt die Background-Color auf die secondary Farbe ``` markup
Box

``` ### Background third `.bcolor--third` Stellt die Background-Color auf die third Farbe ``` markup
Box

``` ### Background fourth `.bcolor--fourth` Stellt die Background-Color auf die fourth Farbe ``` markup
Box

``` ### Background fifth `.bcolor--fifth` Stellt die Background-Color auf die fifth Farbe ``` markup
Box

``` ### Background sixth `.bcolor--sixth` Stellt die Background-Color auf die sixth Farbe ``` markup
Box

``` ### Background black `.bcolor--black` Stellt die Background-Color auf die black Farbe ``` markup
Box

``` ### Background white `.bcolor--white` Stellt die Background-Color auf die white Farbe ``` markup
Box

``` ## Rounding Classes Die Rundungen sind über Klassen vorgegeben und können damit an jedes Element gekoppelt werden. Es sind vier Hauptklassen für Runde Ecken vorhanden, die über die `_variables-style.sass` initialisiert werden. > Wird bei Light und Slight 'false' als Wert eingegeben werden die Klassen nicht in das CSS integriert. **`_variables-style.sass`:** - `$round-normal: 6` = _Normal rounding value (in px)_ - `$round-light : 4` = _Light round value (can be 'false')_ - `$round-slight: 2` = _Slight rounding (can be 'false')_ Jede Rounding Class besitzt noch Subclasses mit der sich die Richtung der Rundung definiert, desweiteren kann über responsive Subclasses das Verhalten weiter verändert werden. > Wichtig zum Verständnis sämtliche Klassen können weiter verwendet werden. Benötigt ein Button runde Ecken, werden dafür die Rounding Classes verwendet, statt eigene Stile zu definieren. ### Circle Round Die einfachste Rounding Class, das Element erhält volle Rundung (Pilestyle). ``` markup Press Me ``` - `.round-circle :` _Round all edges_ - `.round-circle--left :` _Round left side_ - `.round-circle--right :` _Round right side_ - `.round-circle--top :` _Round top side_ - `.round-circle--bottom :` _Round bottom side_ ### Normal round Die standard Rundungsklasse die ebenfalls immer in das CSS gerendert wird. Hier existieren zusätzlich Subklassen um die Rundungen über die Breakpoints anzusteuern und zu verändern. Der Wert in der Variable `$round-normal` bestimmt dabei die Rundung. ``` markup Press Me ``` - `.round` : _Round all edges_ - `.round-r--normal` : _Round edges at normal Breakpoint_ - `.round-r--small` : _Round edges at small Breakpoint_ #### Normal round Left Die Ecken werden nur auf der linken Seite gerundet. Über Subclasses wird das Responsive Verhalten gesteuert. - `.round--left` : _Round left side_ - `.round--left .r-cw--normal` : _Round left side and move the round corners clockwise on normal breakpoint_ - `.round--left .r-cw--small` : _Round left side and move the round corners clockwise on small breakpoint_ - `.round--left .r-solo-normal` : _Round left side and reset the rounding on normal breakpoint_ - `.round--left .r-solo--small` : _Round left side and reset the rounding on small breakpoint_ ``` markup Press Me Press Me ``` #### Normal round right Die Ecken werden nur auf der rechten Seite gerundet. Über Subclasses wird das Responsive Verhalten gesteuert. - `.round--right` : _Round right side_ - `.round--right .r-cw--normal` : _Round right side and move the round corners clockwise on normal breakpoint_ - `.round--right .r-cw--small` : _Round right side and move the round corners clockwise on small breakpoint_ - `.round--right .r-solo-normal` : _Round right side and reset the rounding on normal breakpoint_ - `.round--right .r-solo--small` : _Round right side and reset the rounding on small breakpoint_ ``` markup Press Me Press Me ``` #### Normal round top Die Ecken werden nur auf der rechten Seite gerundet. Über Subclasses wird das Responsive Verhalten gesteuert. - `.round--top` : _Round top side_ - `.round--top .r-cw--normal` : _Round top side and move the round corners clockwise on normal breakpoint_ - `.round--top .r-cw--small` : _Round top side and move the round corners clockwise on small breakpoint_ - `.round--top .r-solo-normal` : _Round top side and reset the rounding on normal breakpoint_ - `.round--top .r-solo--small` : _Round top side and reset the rounding on small breakpoint_ ``` markup Press Me Press Me ``` #### Normal round bottom Die Ecken werden nur auf der rechten Seite gerundet. Über Subclasses wird das Responsive Verhalten gesteuert. - `.round--bottom` : _Round bottom side_ - `.round--bottom .r-cw--normal` : _Round bottom side and move the round corners clockwise on normal breakpoint_ - `.round--bottom .r-cw--small` : _Round bottom side and move the round corners clockwise on small breakpoint_ - `.round--bottom .r-solo-normal` : _Round bottom side and reset the rounding on normal breakpoint_ - `.round--bottom .r-solo--small` : _Round bottom side and reset the rounding on small breakpoint_ ``` markup Press Me Press Me ``` ### Light round Die standard Rundungsklasse die ebenfalls immer in das CSS gerendert wird. Hier existieren zusätzlich Subklassen um die Rundungen über die Breakpoints anzusteuern und zu verändern. Der Wert in der Variable `$round-light` bestimmt dabei die Rundung. - `.round-light` : _Round all edges_ - `.round-light-r--normal` : _Round edges at normal Breakpoint_ - `.round-light-r--small` : _Round edges at small Breakpoint_ ``` markup Press Me ``` #### Light round Left Die Ecken werden nur auf der linken Seite gerundet. Über Subclasses wird das Responsive Verhalten gesteuert. - `.round-light--left` : _Round left side_ - `.round-light--left .r-cw--normal` : _Round left side and move the round corners clockwise on normal breakpoint_ - `.round-light--left .r-cw--small` : _Round left side and move the round corners clockwise on small breakpoint_ - `.round-light--left .r-solo-normal` : _Round left side and reset the rounding on normal breakpoint_ - `.round-light--left .r-solo--small` : _Round left side and reset the rounding on small breakpoint_ ``` markup Press Me Press Me ``` #### Light round right Die Ecken werden nur auf der rechten Seite gerundet. Über Subclasses wird das Responsive Verhalten gesteuert. - `.round-light--right` : _Round right side_ - `.round-light--right .r-cw--normal` : _Round right side and move the round corners clockwise on normal breakpoint_ - `.round-light--right .r-cw--small` : _Round right side and move the round corners clockwise on small breakpoint_ - `.round-light--right .r-solo-normal` : _Round right side and reset the rounding on normal breakpoint_ - `.round-light--right .r-solo--small` : _Round right side and reset the rounding on small breakpoint_ ``` markup Press Me Press Me ``` #### Light round top Die Ecken werden nur auf der rechten Seite gerundet. Über Subclasses wird das Responsive Verhalten gesteuert. - `.round-light--top` : _Round top side_ - `.round-light--top .r-cw--normal` : _Round top side and move the round corners clockwise on normal breakpoint_ - `.round-light--top .r-cw--small` : _Round top side and move the round corners clockwise on small breakpoint_ - `.round-light--top .r-solo-normal` : _Round top side and reset the rounding on normal breakpoint_ - `.round-light--top .r-solo--small` : _Round top side and reset the rounding on small breakpoint_ ``` markup Press Me Press Me ``` #### Light round bottom Die Ecken werden nur auf der rechten Seite gerundet. Über Subclasses wird das Responsive Verhalten gesteuert. - `.round-light--bottom` : _Round bottom side_ - `.round-light--bottom .r-cw--normal` : _Round bottom side and move the round corners clockwise on normal breakpoint_ - `.round-light--bottom .r-cw--small` : _Round bottom side and move the round corners clockwise on small breakpoint_ - `.round-light--bottom .r-solo-normal` : _Round bottom side and reset the rounding on normal breakpoint_ - `.round-light--bottom .r-solo--small` : _Round bottom side and reset the rounding on small breakpoint_ ``` markup Press Me Press Me ``` ### Slight round Die standard Rundungsklasse die ebenfalls immer in das CSS gerendert wird. Hier existieren zusätzlich Subklassen um die Rundungen über die Breakpoints anzusteuern und zu verändern. Der Wert in der Variable `$round-slight` bestimmt dabei die Rundung. - `.round-slight` : _Round all edges_ - `.round-slight-r--normal` : _Round edges at normal Breakpoint_ - `.round-slight-r--small` : _Round edges at small Breakpoint_ ``` markup Press Me ``` #### Slight round Left Die Ecken werden nur auf der linken Seite gerundet. Über Subclasses wird das Responsive Verhalten gesteuert. - `.round-slight--left` : _Round left side_ - `.round-slight--left .r-cw--normal` : _Round left side and move the round corners clockwise on normal breakpoint_ - `.round-slight--left .r-cw--small` : _Round left side and move the round corners clockwise on small breakpoint_ - `.round-slight--left .r-solo-normal` : _Round left side and reset the rounding on normal breakpoint_ - `.round-slight--left .r-solo--small` : _Round left side and reset the rounding on small breakpoint_ ``` markup Press Me Press Me ``` #### Slight round right Die Ecken werden nur auf der rechten Seite gerundet. Über Subclasses wird das Responsive Verhalten gesteuert. - `.round-slight--right` : _Round right side_ - `.round-slight--right .r-cw--normal` : _Round right side and move the round corners clockwise on normal breakpoint_ - `.round-slight--right .r-cw--small` : _Round right side and move the round corners clockwise on small breakpoint_ - `.round-slight--right .r-solo-normal` : _Round right side and reset the rounding on normal breakpoint_ - `.round-slight--right .r-solo--small` : _Round right side and reset the rounding on small breakpoint_ ``` markup Press Me Press Me ``` #### Slight round top Die Ecken werden nur auf der rechten Seite gerundet. Über Subclasses wird das Responsive Verhalten gesteuert. - `.round-slight--top` : _Round top side_ - `.round-slight--top .r-cw--normal` : _Round top side and move the round corners clockwise on normal breakpoint_ - `.round-slight--top .r-cw--small` : _Round top side and move the round corners clockwise on small breakpoint_ - `.round-slight--top .r-solo-normal` : _Round top side and reset the rounding on normal breakpoint_ - `.round-slight--top .r-solo--small` : _Round top side and reset the rounding on small breakpoint_ ``` markup Press Me Press Me ``` #### Slight round bottom Die Ecken werden nur auf der rechten Seite gerundet. Über Subclasses wird das Responsive Verhalten gesteuert. - `.round-slight--bottom` : _Round bottom side_ - `.round-slight--bottom .r-cw--normal` : _Round bottom side and move the round corners clockwise on normal breakpoint_ - `.round-slight--bottom .r-cw--small` : _Round bottom side and move the round corners clockwise on small breakpoint_ - `.round-slight--bottom .r-solo-normal` : _Round bottom side and reset the rounding on normal breakpoint_ - `.round-slight--bottom .r-solo--small` : _Round bottom side and reset the rounding on small breakpoint_ ``` markup Press Me Press Me ``` ## Visibility Classes Steuern die Sichtbarkeit der Elemente bei unterschiedlichen Breakpoints. Die Klassen werden erst in das CSS kompiliert wenn die Variable `$layout-fluid-behavior` nicht auf 'false' steht. > Die Variable findet man in `_variables-base.sass` es ist eine Liste, der zweite Wert sollte nicht auf 'false' stehen. Die Werte der Breakpoints befinden sich ebenfalls in der `_variables-base.sass`, es geht hier um die Variablen `$bp-mobile` und `$bp-small-tablet`. - `.show-on--full` = _Element only visible on Desktop Size_ - `.show-on--normal` = _Element only visible on Tablet Size_ - `.show-on--small` = _Element only visible on Mobile Size_ - `.show-to--normal` = _Element visible on Desktop and Tablet Size_ - `.show-to--small` = _Element visible on Desktop, Tablet and Mobile Size_ - `.hide-on--full` = _Element hidden on Desktop Size_ - `.hide-on--normal` = _Element hidden on Tablet Size_ - `.hide-on--small` = _Element hidden on Mobile Size_ - `.show-on--landscape` = _Element only visible on Landscape_ - `.show-on--portrait` = _Element only visible on Portrait_ - `.hide-on--landscape` = _Element hidden on Landscape_ - `.hide-on--portrait` = _Element hidden on Portrait_ ``` markup
Visible on Desktop
``` # Typografie # Grid ``` bash DEPENDENCIES: lib/sass/_variables-base.sass lib/sass/mixins/_grid.sass ``` Das Gridsystem von Saffron ist ähnlich der schon bekannten Gridsystem jedoch mit einigen Unterscheidungen: - Die Colums reagieren auf zwei definierte Breakpoints - Außenabstände werden über pixelgenaue Paddings definiert - Trotz der Verwendung von modernen CSS3 Layout, ist das Gridsystem auch auf IE7 funktionsfähig ## Grid Wrapper Das äußerste Element um das gesamte Grid ist der `.wrapper`, der aber nur nötig ist, wenn die Seite auf der rechten Viewportseite positioniert wird. ``` markup
...
``` ## Grid Container Der `.container` ist für die Seitenbreite und die Positionierung der Seite zuständig. Im Element steht auch Padding zur Verfügung um den Seitenrand zu etablieren. ``` markup
...
``` ![image-2] Angesteuert wird der Container über mehrere Variablen aus der `_variables-base.sass` Datei: `$site-position` Damit wird das grobe Layout bestimmt, die Variable beinhaltet dabei mehrere Werte. Der erste Wert bestimmt die Position (left, center, right) der zweite Wert ist der äußere Abstand (nur bei left oder right). ``` scss // Zentrierte Seite $site-position: center 0 ``` `$layout-fluid-behavior` Damit wird die maximal und minimal Breite des Containers festgelegt. Wird der zweite Wert auf 'false' gestellt verliert der Container das Fluide Verhalten und bleibt damit statisch. ``` scss // Max Width 1180px / Min Width 767px $layout-fluid-behavior: 1180 767 ``` `$comp-responsive` Ist das Fallback für ältere Browser die nicht über Mediaqueries verfügen. Wird der erste Wert auf 'false' gestellt wird die Seitenbreite für IE7 auf den zweiten Wert festgelegt, die Seite bleibt auf dem Browser statisch. ``` scss // IE7 Statisches Design 960px Breite $comp-responsive: false 960 ``` `$layout-base-style` Hier ist für den Container nur der dritte Wert relevant, dieser bestimmt die äußeren Paddings. ``` scss // Container Padding 20px $layout-base-style: XX XX 20 ``` `$layout-extended-style` Der Extended Style regelt das Verhalten des Grids beim erreichen des zweiten Breakpoints. Relevant ist der erste und dritte Wert, steht der erste Wert auf 'false' wird der extended Style nicht integriert, er sollte daher auf einem Wert stehen (bei dem der Style aktiv werden soll). Der dritte Wert ändert die seitlichen Paddings des Containers. ``` scss // File: _variables-base.sass // Extended Style aktiv bei 767px, Seitenabstand 10px $layout-extended-style: 767 xx 10 ``` `$activate-box-sizing` Aktiviert das neue Box Model und ändert damit den strukturellen Aufbau des Grids. Wird die Variable auf 'false' gestellt muss mit inneren Elementen gearbeitet werden. ``` scss // File: _variables-base.sass $activate-box-sizing: true ``` ``` markup
...
``` Wird auf das alte Boxmodel umgestellt müssen `--inner` Boxen integriert werden. ``` scss // File: _variables-base.sass $activate-box-sizing: false ``` ``` markup
...
``` ## Grid Row Die `.row` ist das eigentliche Trägerelement der Colums. Werden `.row`s verschachtelt kann das Padding störend wirken, die Zusatzklasse `.collapse` zieht die `.row` dann über das Padding des äußeren Elements. ``` markup
...
``` ![image-3] ``` markup
...
``` ## Grid Colum Die Ausenabstände (Gutter) werden nicht über relative Margins etabliert, hier werden Paddings verwendet. ![image-1] Das hat den Vorteil das sich die Außenabstände nicht verändern womit sich Box Designs (z.B. Kacheln) möglich machen. Das wird in der Regel über das neue CSS Boxmodel herbeigeführt, das mit `box-sizing: border-box` aktiviert wird. In diesem Fall wird die Breite der Paddings nicht auf die Breite der Box addiert, sondern damit verrechnet (werden Paddings hinzugefügt bleibt die Width der Box immer gleich). ``` markup
Box
``` Auf älteren Browsern wie IE7, wird das neue Box-Model aber nicht funktionieren. In diesem Fall muss mit zusätzlichen Boxen gearbeitet werden, die dann in die Colums integriert werden. Möchte man Kachellayouts erstellen, muss man ebenfalls innere Boxen verwenden, wenn man auf den Außenabstand (z.B. für dünne Ränder) angewiesen ist. ``` markup
Box
``` Die Klasse `.colum` ist der Initiator der das allgemeine Verhalten der Box bestimmt (z.B. float, padding, position). Die Werte werden dabei aus der `_variables-base.sass` Datei bezogen. > Wichtig zum Verständniss, die Colums floaten immer links, nur die letzte Colum wird rechts floaten, damit die letzte Box immer Bündig mit dem rechten Rand der Seite anliegt. `$activate-box-sizing` Aktiviert das neue Box Model und ändert damit den strukturellen Aufbau des Grids. Wird die Variable auf 'false' gestellt muss mit inneren Elementen gearbeitet werden. `$layout-base-style` Von der Variable ist jetzt nur der zweite Wert relevant, dieser bestimmt den seitlichen Abstand. ``` scss // File: _variables-base.sass // Seitlicher Colum Abstand 10px $layout-base-style: xx 10 xx ``` `$layout-extended-style` Von dieser Variable ist der erste und der zweite Wert relevant. Der erste kann den extended Style aktivieren oder deaktivieren, der zweite Wert bestimmt dann den neuen seitlichen Abstand (wenn der Extended Style aktiv wird). ``` scss // File: _variables-base.sass // Extended Style aktiv bei 767px, Gutter 10px $layout-extended-style: 767 10 xx ``` An die `.colum` können noch weitere Klassen angehängt werden, die sich vorwiegend die Positionierung überschreiben. - `.colum .colum--right` : _Die Colum wird auf die rechte Seite verschoben_ - `.colum .colum--left` : _Die Colum wird auf die linke Seite geschoben - wichtig wenn nur eine Colum in der Row steht_ - `.colum .colum--center` : _Die Colum wird zentriert_ - `.colum .collapse`: _Die Paddings werden zurück gesetzt_ ## Grid Unit ### Colum Width Normal Die Breiten werden seperat über eine Klasse an die `.colum` Elemente zugewiesen. Die Breiten werden beim erreichen des Breakpoints `$layout-second-grid` oder `$bp-small-tablet` auf 100% Breite gestellt. > Man kann die `.unit--xx` Klassen auch an andere Elemente hängen. Die Anzahl der Spalten wird über die `_variables-base.sass` mit der Variable `$layout-base-style` eingestellt. ``` scss // File: _variables-base.sass // 24 Spalten $layout-base-style : 24 xx xx ``` Zu den generierten Unit Klassen kann man auch die semantischen Unit Klassen verwenden. - `.unit--1-1` : _width: 100%_ - `.unit--1-2` : _width: 50%_ - `.unit--1-3` : _width: 33.333%_ - `.unit--2-3` : _width: 66.666%_ - `.unit--1-4` : _width: 25%_ - `.unit--3-4` : _width: 75%_ ``` markup
box
box
box
box
box
``` ### Colum Width Small Neben den normalen Units gibt es auch noch Small Units, die beim erreichen des zweiten Breakpoints aktiv werden. Im Regelfall würde die Klasse `.unit--10` beim erreichen des ersten Breakpoints auf `width: 100%` umschalten. Mit `.unit-small--5` wird erst ab erreichen des zweiten Breakpoints auf `width: 100%` umgestellt. ``` markup
box
``` Damit lassen sich sogar andere Layout Ideen umsetzten, da die Überschreibung immer an eine Colum Class gehängt wird. In dem Beispiel werden drei Spalten nebeneinander angezeigt (bei max 24 Spalten). Beim erreichen des ersten Breakpoints werden die ersten zwei Spalten über `.unit-small--5` auf `width: 50%` umgestellt, während die letzte Spalte auf volle 100% Breite umgestellt wird. ``` markup
Box
Box
Box
``` Die Anzahl der Spalten wird über die `_variables-base.sass` mit der Variable `$layout-second-grid` eingestellt. ``` scss // File: _variables-base.sass // 12 Small Colums $layout-second-grid : xx 12 ``` Zu den generierten Unit Klassen kann man auch die semantischen Unit Klassen verwenden. - `.unit-small--1-1` : _width: 100%_ - `.unit-small--1-2` : _width: 50%_ - `.unit-small--1-3` : _width: 33.333%_ - `.unit-small--2-3` : _width: 66.666%_ - `.unit-small--1-4` : _width: 25%_ - `.unit-small--3-4` : _width: 75%_ ``` markup
box
box
box
box
box
``` ## Grid Offset Mittels `.offset` können die Spalten links oder rechts verschoben werden. Über den Offset wird ein Margin gemäß den Unit Breiten hinzugefügt um Freiräume zu schaffen. Die Anzahl der Offset Klassen orientiert sich an den freigeschalten Unit Klassen (-1). ![image-4] Da die Offset Klassen nicht immer benötigt werden, muss die Option in der `_variables-base.sass` über die Variable `$grid-offset-option` auf 'true' geschaltet werden. ``` scss // File: _variables-base.sass $grid-offset-option : true ``` Es wird dabei für das normale und das extended Grid Offset Klassen in das CSS kompiliert. Das Verhalten ist dabei ähnlich der Unit Klassen. - `.offset-left--xx` : _Element wird um X Units nach links verschoben_ - `.offset-right--xx` : _Element wird um X Units nach rechts verschoben_ - `.offset-small-left--xx` : _Element wird beim Breakpoint Small um X Extended Units nach links verschoben_ - `.offset-small-right--xx` : _Element wird beim Breakpoint Small um X Extended Units nach rechts verschoben_ ``` markup
box
box
``` ## Push & Pull Mit den `.push` und `.pull` Klassen können Elemente ebenso verschoben werden, nur wird im Gegensatz zu den Offsets das Element relativ verschoben und kann damit die Reihenfolge tauschen. Die Entfernung richtet sich dabei nach den eingestellten Units für das normale und extended Grid. ``` scss // File: _variables-base.sass $grid-pushpull-option : true ``` > Bei Push und Pull können die Elemente über die Seitenbegrenzung hinaus platziert werden. - `.push--xx` : _Das Element wird um X Units nach links verschoben_ - `.pull--xx` : _Das Element wird um X Units nach rechts verschoben_ - `.push-small--xx` : _Das Element wird beim Breakpoints Small um X Extended Units nach links verschoben_ - `.pull-small--xx` : _Das Element wird beim Breakpoint Small um X Extended Units nach rechts verschoben_ ``` markup
Move Element 8 Units left
Move Element on small Breakpoint 5 extended units right
``` ## Vertical Grid ``` bash DEPENDENCIES: lib/sass/_variables-base.sass lib/sass/mixins/_grid.sass ``` Für Layoutzwecke ist es ab und an hilfreich auf Klassen zurückzugreifen mit denen sich die Höhe bestimmen lässt. Hierfür kann man sich das Vertical Grid aktivieren. Es kompiliert `height`, `lineheight`, `margin-top`, `margin-bottom`, `padding-top` und `padding-bottom` Klassen in das CSS. Über Subklassen reagiert das Vertikale Grid auch auf die zwei Main Breakpoints. Die Höhenwerte werden dabei entweder über die Lines der Baseline errechnet oder über die definierten Abstände. > Wird die Baseline verändert muss eingerechnet werden das sich die Höhenwerte sich dynamisch anpassen können, da die Typografie ebenfalls responsive ist. ``` scss // Baseline aktivieren // File: _variables-base.sass $activate-baseline : true ``` Das Vertical Grid wird über die `_variables-base.sass` eingerichtet. ``` scss // File: _variables-base.sass $grid-height-generate : 10 4 4 ``` - Wert 1 = Anzahl der height und lineheight Classes - Wert 2 = Anzahl der margin Classes - Wert 3 = Anzahl der padding Classes _Wenn der Wert auf 0 gestellt wird, werden keine Klassen generiert_ - `.height--xx` : _Height wird auf Heightunit XX gestellt_ - `.lineheight--xx` : _Line height wird auf Heightunit XX gestellt_ - `.margin-top--xx` : _Margin top wird auf Heightunit XX gestellt_ - `.margin-bottom--xx` : _Margin bottom wird auf Heightunit XX gestellt_ - `.padding-top--xx` : _Padding top wird auf Heightunit XX gestellt_ - `.padding-bottom--xx` : _Padding bottom wird auf Heightunit XX gestellt_ ``` markup
hello
``` ### Vertical Grid reset Die Wirkung kann mittels `remove` Classen wieder entfernt werden wenn der Breakpoint erreicht ist. - `.remove--height-normal` : _Setzt Height beim erreichen des ersten Breakpoints wieder zurück_ - `.remove--lineheight-normal` : _Setzt Lineheight beim erreichen des ersten Breakpoints wieder zurück_ - `.remove--margintop-normal` : _Setzt Margintop beim erreichen des ersten Breakpoints wieder zurück_ - `.remove--marginbotton-normal` : _Setzt Marginbottom beim erreichen des ersten Breakpoints wieder zurück_ - `.remove--paddingtop-normal` : _Setzt Paddingtop beim erreichen des ersten Breakpoints wieder zurück_ - `.remove--paddingbotton-normal` : _Setzt Paddingbottom beim erreichen des ersten Breakpoints wieder zurück_ - `.remove--height-small` : _Setzt Height beim erreichen des zweiten Breakpoints wieder zurück_ - `.remove--lineheight-small` : _Setzt Lineheight beim erreichen des zweiten Breakpoints wieder zurück_ - `.remove--margintop-small` : _Setzt Margintop beim erreichen des zweiten Breakpoints wieder zurück_ - `.remove--marginbotton-small` : _Setzt Marginbottom beim erreichen des zweiten Breakpoints wieder zurück_ - `.remove--paddingtop-small` : _Setzt Paddingtop beim erreichen des zweiten Breakpoints wieder zurück_ - `.remove--paddingbotton-small` : _Setzt Paddingbottom beim erreichen des zweiten Breakpoints wieder zurück_ ``` markup
Lost the Margin on reach normal breakpoint
``` ### Vertical Grid Responsive Die umgekehrte Wirkung kann man mit dem Responsive Vertical Grid erzielen, dort aktiviert sich die Height beim erreichen des jeweiligen Breakpoints. Das Vertical Grid wird über die `_variables-base.sass` eingerichtet. > Das responsive vertical Grid ist nur dann aktiv, wenn der Responsive Behavior aktiviert ist. ``` scss // File: _variables-base.sass $grid-res-height-generate : 4 4 4 ``` - Wert 1 = Anzahl der height und lineheight Classes - Wert 2 = Anzahl der margin Classes - Wert 3 = Anzahl der padding Classes - `.r-mb-normal--xx` : _Dem Element wird beim erreichen des ersten Breakpoints Margin Bottom mit X Units zugewiesen_ - `.r-mt-normal--xx` : _Dem Element wird beim erreichen des ersten Breakpoints Margin Top mit X Units zugewiesen_ - `.r-pb-normal--xx` : _Dem Element wird beim erreichen des ersten Breakpoints Padding Bottom mit X Units zugewiesen_ - `.r-pt-normal--xx` : _Dem Element wird beim erreichen des ersten Breakpoints Padding Top mit X Units zugewiesen_ - `.r-h-normal--xx` : _Dem Element wird beim erreichen des ersten Breakpoints Height mit X Units zugewiesen_ - `.r-lh-normal--xx` : _Dem Element wird beim erreichen des ersten Breakpoints Lineheight mit X Units zugewiesen_ - `.r-mb-small--xx` : _Dem Element wird beim erreichen des zweiten Breakpoints Margin Bottom mit X Units zugewiesen_ - `.r-mt-small--xx` : _Dem Element wird beim erreichen des zweiten Breakpoints Margin Top mit X Units zugewiesen_ - `.r-pb-small--xx` : _Dem Element wird beim erreichen des zweiten Breakpoints Padding Bottom mit X Units zugewiesen_ - `.r-pt-small--xx` : _Dem Element wird beim erreichen des zweiten Breakpoints Padding Top mit X Units zugewiesen_ - `.r-h-small--xx` : _Dem Element wird beim erreichen des zweiten Breakpoints Height mit X Units zugewiesen_ - `.r-lh-small--xx` : _Dem Element wird beim erreichen des zweiten Breakpoints Lineheight mit X Units zugewiesen_ ``` markup
10 Lines Height at first Breakpoint
``` ## Blockgrid Das Blockgrid ist ein zusätzliches Gridsystem, im Gegensatz zum Layout Grid werden die Spaltenbreiten immer Global gesteuert. Das heißt eine Mischung unterschiedlicher Spaltenbreiten ist nicht möglich. Das Blockgrid kann auch als Listenelemente gehängt werden. Über die `_variables-base.sass` wird das Blockgrid eingestellt. ``` scss // File: _variables-base.sass $grid-blockgrid : 6 10 ``` - Wert 1 = Anzahl der Blockgrids - Wert 2 = Abstände zwischen den Blöcken **Äußere Klassen (Klassenkombinatoren)** - `.blockgrid--xx` : _Allgemeiner Initiator_ - `.blockgrid-block--left` : _Lässt die inneren Blöcke links floaten_ - `.blockgrid-block--right` : _Lässt die inneren Blöcke rechts floaten_ - `.blockgrid-block--superleft` : _Zwingt alle inneren Blöcke links zu floaten_ - `.blockgrid-block--superright` : _Zwingt alle inneren Blöcke rechts zu floaten_ - `.blockgrid-inline--left` : _Wandelt die inneren Blöcke in Inline Elemente und richtet sie von links nach rechts aus_ - `.blockgrid-inline--right` : _Wandelt die inneren Blöcke in Inline Elemente und richtet sie von rechts nach links aus_ - `.blockgrid--gutter` : _Gibt allen inneren Blöcken den Ausenabstand_ - `.blockgrid--n-normal` : _Beim erreichen des ersten Breakpoints werden die inneren Blöcke auf volle Breite gestellt_ - `.blockgrid--n-small` : _Beim erreichen des zweiten Breakpoints werden die inneren Blöcke auf volle Breite gestellt_ - `.blockgrid--half-normal` : _Beim erreichen des ersten Breakpoints wird die Breite der inneren Blöcke verdoppelt_ - `.blockgrid--half-small` : _Beim erreichen des zweiten Breakpoints wird die Breite der inneren Blöcke verdoppelt_ **Innere Klassen** - `.block` : _Das innere Block Element, kann auch eine <li> oder <dd> sein_ - `.block--inner` : _Wird in `.block` integriert wenn Gutter verwendet wird aber das alte Box Model aktiv ist_ - `.collapse` : _Setzt den Abstand der `.block` Klassen zurück_ ``` markup
box
box
box
box
  • Box
  • Box
  • Box
``` **Live Example** : http://cdpn.io/AEzbG ## Flexgrid Das Flexgrid wird nicht automatisch in das CSS kompiliert, es muss daher über Mixin Call seperat eingebunden werden. Das Mixin wird dann die entsprechenden Klassen in das CSS schreiben. **Mixin Call** ``` scss +flex-grid($size: 40, $direction: left, $mode: block, $gutter: 0, $prefix: null) ``` **Parameter** ``` bash @param $size {number} Columsize [in PX/%] @param $direction {string} Columdirection [left/right :default = left] @param $mode {string} Layoutmode [block/inline :default = block] @param $gutter {number} The inner padding [:default = 0] @param $prefix {string} A additional classname [:default = null] ``` Das Flexgrid eignet sich vorwiegend für die Darstellung von Thumbnails, die ihre Größe nicht verändern soll. Die Anzahl der inneren Boxen ist frei. **HTML Beispiel** ``` markup
thumb
thumb
...
thumb
thumb
...
``` ## Proportial Height Ein Problem im Responsive Webdesign ist die Einhaltung des Größenverhältnisses (Länge und Höhe), sobald die Elemente anfangen in der Breite skalieren bleibt die Höhe (abgesehen von Bildelementen) statisch. Das Mixin wird in dem Fall an eine andere Klasse gehängt und wird dieses CSS Technisch beschreiben. Der eigentliche Inhalt kommt dann in ein inneres Element mit der Klasse `.propbox`. **Mixin Call** ``` scss .myclass +propheight($unit: 16 16, $ratio: false) ``` **Parameter** ``` bash @param $unit {list} Box Width [Unit-Width: Colums | MaxColums (Grid) | Or Width in %] @param $ratio {list} The Ratio between width and height [:default = false] ``` Die Breite kann optional seperat eingegeben werden oder mit dem Grid gekoppelt werden (dient nur zur Berechnung). Die Ratio ist ebenso optional, ohne die Angabe der Ratio wird die Höhe proportional zur Breite eingestellt. **Beispiel Quadratisch** ``` scss .myclass +propheight($unit: 10 16, $ratio: false) .propbox background: red ``` ``` markup
Content Box
``` **Live Example**: http://codepen.io/gisu/full/yCuHJ Die Ratio errechnet sich aus der angegebenen Breite und Höhe. Es ist nicht notwendig das Ratioverhältnis manuell zu berechnen. **Beispiel Ratio** ``` scss .myclass +propheight($unit: 10 16, $ratio: 300 200) .propbox background: red ``` ``` markup
Content Box
``` # Navigation # Baseline # Forms # Tables # Buttons Buttons sind aufgeteilt in Layout und Style und beziehen daher ihre Werte aus der `_variables-base.sass` und der `_variables-style.sass` Datei. ## Button Layout ``` scss DEPENDENCIES: lib/sass/_variables-base.sass lib/sass/base/_buttons.sass ``` Es gibt fünf definierte Button Größen die man dann über Klasse ansprechen kann um die Buttons in der Seite darzustellen. Die Daten werden aus den Variablen gezogen. ``` scss // File: lib/sass/_variables-base.sass $btn-size-supersmall : 13 normal 2 5 $btn-size-small : 14 normal 5 10 $btn-size-normal : 17 normal 8 15 $btn-size-large : 20 normal 12 20 $btn-size-superlarge : 24 normal 15 26 ``` - Wert 1 : Fontsize - Wert 2 : Fontweight - Wert 3 : Vertikales Padding - Wert 4 : Horizontales Padding Die Klasse `.btn` ist dabei die Initialklasse die aus Elementen einen Button formt. ``` markup Button ``` In diesem Zustand hat der Button aber noch recht 'nackt'. Die Klasse übergibt nur das grobe Behavior an den das Element. Als Inline Block Element ist der Button auch nur so breit wie der Text innerhalb des Buttons. Um den Button bei den zwei Mainbreakpoints dynamisch in der Breite umzuformen (z.B. in der Mobile Ansicht hat der Button eine 100% Breite), kann man responsive Klassen anhängen. ``` markup Button Button ``` Man kann den Button aber auch schon per Default auf eine 100% Breite bringen: ``` markup Button Full ``` Die Button Klasse kann auch Form Elementen zugeordnet werden, dort verlieren sie dann ihre Border. ``` markup ``` Das eigentliche Layout wird mit den Size Klassen gebildet, die ebenso einfach an die Klasse gekoppelt werden. ``` markup Button Button Button Button Button ``` ## Button Style ``` scss DEPENDENCIES: lib/sass/_variables-style.sass lib/sass/specific/_buttonstyle.sass ``` Kommen wir nun zum eigentlichen Styling der Buttons, das wird ebenso weitgehenst über die `_variables-style.sass` Datei gebildet. Der Stil wird dann über Klassen an den Button zugewiesen, es gibt hier erheblich mehr Klassen da die Varianten alle einzeln als Klasse vorliegen. ``` scss // File: lib/sass/_variables-style.sass $btn-c-primary : $c-primary darken($c-primary,4) #fff darken($c-primary,5) darken($c-primary,8) #fff $btn-c-secondary : $c-secondary darken($c-secondary,4) #fff darken($c-secondary,5) darken($c-secondary,8) #fff $btn-c-third : $c-third darken($c-third,4) #fff darken($c-third,5) darken($c-third,8) #fff $btn-c-fourth : $c-fourth darken($c-fourth,4) #fff darken($c-fourth,5) darken($c-fourth,8) #fff $btn-c-fifth : $c-fifth darken($c-fifth,4) #fff darken($c-fifth,5) darken($c-fifth,8) #fff $btn-c-sixth : $c-sixth darken($c-sixth,4) #fff darken($c-sixth,5) darken($c-sixth,8) #fff $btn-c-alert : $c-alert darken($c-alert,4) #fff darken($c-alert,5) darken($c-alert,8) #fff $btn-c-success : $c-success darken($c-success,4) #fff darken($c-success,5) darken($c-success,8) #fff $btn-c-warning : $c-warning darken($c-warning,4) #fff darken($c-warning,5) darken($c-warning,8) #fff $btn-c-gray : $c-lightgray darken($c-lightgray,4) $c-darkgray darken($c-lightgray,5) darken($c-lightgray,8) $c-darkgray ``` - Wert 1 : Background Color - Wert 2 : Border Color - Wert 3 : Font Color - Wert 4 : Background Color (hover) - Wert 5 : Border Color (hover) - Wert 6 : Font Color (hover) Wem die vordefinierten Farbgruppen nicht ausreichen kann sich über das Mixin `+button-color` zusätzliche Stile erstellen. ``` scss .mybutton +button-color($background-normal, $border-normal, $fontcolor-normal, $background-hover, $border-hover, $fontcolor-hover) ``` Es besteht keine Abhängigkeit zur Klasse `.btn` daher können die Farbklassen auch anderen Elementen zugewiesen werden. Um die Button einzufärben verwendet man jetzt die vorgefertigten Klassen. ``` markup Button Button Button Button Button Button Button Button Button Button ``` Jetzt kann man die Buttons noch mit einer Border verschönern, die per Default nicht aktiv ist (nur die Farbe ist integriert). ``` markup Button ``` Möchte man keine Flat Color Buttons kann man Gradienten hinzufügen, das wiederum über zwei Klassen (Glossy oder als Softgradient). ``` markup Button Button ``` Wenn die Box Shadow Effekte benötigt werden bieten sich insgesamt sechs Klassen an: ``` markup Button Button Button Button Button Button ``` Benötigt der Text des Buttons einen leichten Textschatten: ``` markup Button ``` Der Textshadow gibt es auch noch in der Letterpress Variante: ``` markup Button ``` ## Button Combination Jetzt kann man über HTML das Layout der Buttons und den Stil miteinander kombinieren, ebenso mit den Shared Klassen z.B. `.round`. ``` markup Button Button ``` Wem das zuviele Klassen im HTML sind der kann diese auch über SASS an die Buttons koppeln: ``` markup Button ``` ``` scss .mybutton @extend .btn, .btn--third, .btn--normal,.btn--ih-inset,.round-light ``` **Live Example** : http://codepen.io/gisu/full/BlrEK # Buttongroup # Fonts # Fontstacks # Iconlist # Images # Breakpoints # Shorthands # Position # Dimensions # Keyframe # Arrow # Triangle # Selector Helper # Ellipsis # Spinner # Wireframe # Fluid Media # Navigation # Flexbox # Breadcrumb # Media Object # Pagination # Split Lists # Matrix # Labels # Progressbar [1]: http://rubyinstaller.org/ [2]: http://nodejs.org/ [3]: http://mxcl.github.io/homebrew/ [4]: http://sass-lang.com [5]: http://compass-style.org [6]: http://coffeescript.org/ [7]: http://jade-lang.com/ [8]: http://gruntjs.com/ [9]: http://bower.io/ [10]: http://gruntjs.com/plugins [11]: https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei [12]: http://macrabbit.com/slicy/ [13]: http://danielmall.com/articles/svg-workflow-for-designers/ [14]: https://github.com/filamentgroup/grunticon [image-1]: colum.png [image-2]: container.png [image-3]: grid.png [image-4]: offset.png