.wrapper {
    @include clearfix;
}

.wrapper:after {
    content: '';
    display: table;
    clear: both;
}

• sass/utils/_layout.scss

$z-layers: (
    header:    30,
    content:   10,
    footer:    20
);

.header {   z-index: z(header);   }
.content {  z-index: z(content);  }
.footer  {  z-index: z(footer);   }

• sass/variables/_layout.scss (z-index Konfiguration)
• sass/utils/_layout.scss

<p class="visually-hidden">Dieses Element ist optisch unsichtbar, aber nicht für Screenreader.</p>

.visually-hidden {
    @include visually-hidden;
}

• sass/utils/_layout.scss (das Mixin)
• sass/basic/_layout.scss (die CSS-Klasse)

.example-pos1 {
    /*
        top: 1rem
        right: 2rem
        left: 4rem
    */
    @include absolute(1rem 2rem null 4rem);
}

.example-pos2 {
    /*
        right & left: 5rem
        bottom: 2rem
    */
    @include absolute(null 5rem 2rem);
}

.example-pos3 {
    /*
        top & bottom: 12rem
        right & left: 0
    */
    @include absolute(12rem 0);
}

.example-pos4 {
    /*
        top & bottom & right & left: 7rem
    */
    @include absolute(7rem);
}

.example-pos1 {
    top: 1rem;
    right: 2rem;
    left: 4rem;
    position: absolute;
}

.example-pos2 {
    right: 5rem;
    bottom: 2rem;
    left: 5rem;
    position: absolute;
}

.example-pos3 {
    top: 12rem;
    right: 0;
    bottom: 12rem;
    left: 0;
    position: absolute;
}

.example-pos4 {
    top: 7rem;
    right: 7rem;
    bottom: 7rem;
    left: 7rem;
    position: absolute;
}

• sass/utils/_layout.scss

<div class="example-center-vert">
    <div class="example-center-vert-item">
        I am a lonely div inside another lonely div. But at least I am a vertically centered div!
    </div>
</div>

.example-center-vert {
    @include center-vertical;
    [...]
}

.example-center-vert-item {
    @include inline-block;
    [...]
}

• sass/utils/_layout.scss

<div class="example-center-both">
    <div class="example-center-both-item">
        I am a lonely div inside another lonely div. But at least I am a perfectly centered div!
    </div>
</div>

.example-center-both {
    position: relative;
    [...]
}

.example-center-both-item {
    @include center-both;
    [...]
}

• sass/utils/_layout.scss

.card {
    @include nb-size(10rem, 20rem);
}

.icon {
    @include nb-size(4rem);
}

.card {
    width: 10rem;
    height: 20rem;
}

.icon {
    width: 4rem;
    height: 4rem;
}

• sass/utils/_sizing.scss

.video-wrapper {
    @include nb-aspect-ratio;
}

.photo-35mm-wrapper {
    @include nb-aspect-ratio(3, 2);
}

.video-wrapper {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.photo-35mm-wrapper {
    width: 100%;
    height: 0;
    padding-bottom: 66.6666667%;
}

• sass/utils/_sizing.scss

p {
    @include nb-font-size(1.6rem 2.4rem);
}

p {
    font-size: 1.6rem;
    line-height: 2.4rem;
}

• sass/utils/_typography.scss
• sass/utils/_helpers.scss (dependency @mixin x-rem)

$p-font-size: (
    null: (1.8rem 2.6rem),      // "null" is the default (mobile) size
    sm:   (1.6rem 2.4rem),      // breakpoint "sm" (600px)
    lg:   (1.4rem 2rem)       // breakpoint "lg" (980px)
);

p {
    @include rwd-font-size($p-font-size);
}

p {
    font-size: 1.8rem;
    line-height: 2.6rem;
}

@media(min-width: 600px) {
    p {
        font-size: 1.6rem;
        line-height: 2.4rem;
    }
}

@media(min-width: 980px) {
    p {
        font-size: 1.4rem;
        line-height: 2.0rem;
    }
}

• sass/utils/_typography.scss
• sass/utils/_helpers.scss (dependency @mixin x-rem)

.example-family-text {
    @include font-family('text');           // Normales mixin
}

.example-family-heading {
    @include ff('heading');                 // Abkürzung
}

.example-family-code {
    @include ff('code', $font-families);    // Der zweite Parameter ist optional
}

• sass/utils/_typography.scss
• sass/variables/_typography.scss ($font-families Konfiguration)

.example-truncate {
    @include truncate-text; // parameter ist optional
}

• sass/utils/_typography.scss

<div class="rw-example">
    <div class="rw-example__item">These</div>
    <div class="rw-example__item">are</div>
    <div class="rw-example__item">inline-block</div>
</div>

.rw-example {
    @include remove-whitespace;
}

.rw-example__item {
    @include inline-block;
    border: 1px solid #f66;
    padding: 10px;
    @include rwd-font-size($p-font-size);
    @include reset-text;
}

• sass/utils/_typography.scss

<p class="example-hidetext">This text is hidden</p>

.example-hidetext {
    background-color: #ccf;
    width: 200px;
    height: 50px;
    @include hide-text;
}

• sass/utils/_typography.scss

.example-color {
    color: nb-color('primary');
}

.example-bgcolor {
    background-color: nb-color('greyscale', 'light');
}

• sass/utils/_colors.scss
• sass/variables/colors.scss (Hier wird die Sass-map $color definiert)

.example-shade {
    background-color: nb-shade(#00ff00, 30);
}

.example-tint {
    background-color: nb-tint(#ff0000, 50);
}

• sass/utils/_colors.scss

.example-linkcolors {
    @include nb-link-colors(#00f, #00c, #009, #000);
}

• sass/utils/_colors.scss

<ul class="example-reset-list">
    <li>This</li>
    <li>list</li>
    <li>is</li>
    <li>resetted</li>
</ul>

.example-reset-list {
    @include nb-reset-list;
}

• sass/mixins/_list.scss

<ul class="example-comma-separated">
    <li>This</li>
    <li>list</li>
    <li>is</li>
    <li>comma</li>
    <li>separated</li>
</ul>

.example-comma-separated {
    @include nb-no-list;
    @include nb-comma-separated-list;
}

• sass/mixins/_list.scss

<div class="example-embedcontainer">
    <iframe src="https://www.youtube.com/embed/IBMKyNJvNV8" frameborder="0" allowfullscreen></iframe>
</div>

.example-embedcontainer {
    @include nb-embed-container;
}

• sass/mixins/_embed-container.scss

<div class="example-hamburgericon" role="button">
    <div class="example-hamburgericon__bar"></div>
    <div class="example-hamburgericon__bar"></div>
    <div class="example-hamburgericon__bar"></div>
</div>

.example-hamburgericon {
    @include nb-hamburger((
        height: 16px,       // Höhe des Icons
        width: 22px,        // Breite des Icons
        bar-height: 2px,    // Dicke der drei Balken
        color: #333,        // Iconfarbe
    ));
}

• sass/mixins/_hamburger.scss

<div class="example-spinner"></div>

.example-spinner {
    @include nb-loading-spinner((
        size: 40px,                 // Größe
        border-width: 4px,          // Rahmendicke
        color1: rgba($black, 0.1),  // Grundfarbe
        color2: color('primary'),   // Highlight-Farbe
        duration: 1s                // Zeitraum einer einzelnen Umdrehung
    ));
}

• sass/mixins/_loading.scss

<span class="triangled">What a pretty triangle!</span>

.triangled {
    position: relative;
    [...]
    &:before {
        @include nb-triangle-absolute(bottom, 10px, $blue1);
        bottom: -10px;
        left: 50%;
        transform: translate(-50%, 0);
    }
}

• sass/mixins/_triangle.scss

$breakpoints: (
    xs: 400px,  /* iPhone 6 Plus    */
    sm: 600px,  /* Nexus 7          */
    md: 730px,  /* iPad             */
    lg: 980px,  /* Desktop 1024     */
    xl: 1200px  /* Widescreen       */
);

• sass/variables/_layout.scss

$breakpoints: (
    xs: 400px,
    sm: 600px,
    md: 730px,
    lg: 980px,
    xl: 1200px
);

.wrapper {
    /* Styles for mobile resolution */

    @include bp(xs) {
        /* Styles for extra-small resolution */
    }

    @include bp(sm) {
        /* Styles for small resolution */
    }

    @include bp(md) {
        /* Styles for medium resolution */
    }

    @include bp(lg) {
        /* Styles for large resolution */
    }

    @include bp(xl) {
        /* Styles for extra large resolution */
    }
}

.wrapper {
    /* Styles for mobile resolution */
}

@media (min-width: 400px) {
    .wrapper {
        /* Styles for extra-small resolution */
    }
}

@media (min-width: 600px) {
    .wrapper {
        /* Styles for small resolution */
    }
}

@media (min-width: 730px) {
    .wrapper {
        /* Styles for medium resolution */
    }
}

@media (min-width: 980px) {
    .wrapper {
        /* Styles for large resolution */
    }
}

@media (min-width: 1200px) {
    .wrapper {
        /* Styles for extra large resolution */
    }
}

• sass/variables/_layout.scss (Breakpoint-Konfiguration)
• sass/utils/_responsive.scss (Das Mixin)

$breakpoints: (
    xs: 400px,
    sm: 600px,
    md: 730px,
    lg: 980px,
    xl: 1200px
);

.wrapper {
    /* Styles for extra large resolution */

    @include bp-max(xl) {
        /* Styles for large resolution */
    }

    @include bp-max(lg) {
        /* Styles for medium resolution */
    }

    @include bp-max(md) {
        /* Styles for small resolution */
    }

    @include bp-max(sm) {
        /* Styles for extra-small resolution */
    }

    @include bp-max(xs) {
        /* Styles for mobile resolution */
    }
}

.wrapper {
    /* Styles for extra large resolution */
}

@media (max-width: 1199px) {
    .wrapper {
        /* Styles for large resolution */
    }
}

@media (max-width: 979px) {
    .wrapper {
        /* Styles for medium resolution */
    }
}

@media (max-width: 729px) {
    .wrapper {
        /* Styles for small resolution */
    }
}

@media (max-width: 599px) {
    .wrapper {
        /* Styles for extra-small resolution */
    }
}

@media (max-width: 399px) {
    .wrapper {
        /* Styles for mobile resolution */
    }
}

• sass/variables/_layout.scss (Breakpoint-Konfiguration)
• sass/utils/_responsive.scss (das Mixin)

$breakpoints: (
    xs: 400px,
    sm: 600px,
    md: 730px,
    lg: 980px,
    xl: 1200px
);

.wrapper {
    /* General styles */

    @include bp-min-max(xs, sm) {
        /* Styles for between extra small and small resolution */
    }

    @include bp-min-max(sm, md) {
        /* Styles for between small and medium resolution */
    }

    @include bp-min-max(md, lg) {
        /* Styles for between medium and large resolution */
    }

    @include bp-min-max(sm, xl) {
        /* Styles for between small and extra large resolution */
    }
}

.wrapper {
    /* General styles */
}

@media (min-width: 400px) and (max-width: 599px) {
    .wrapper {
        /* Styles for between extra small and small resolution */
    }
}

@media (min-width: 600px) and (max-width: 729px) {
    .wrapper {
        /* Styles for between small and medium resolution */
    }
}

@media (min-width: 730px) and (max-width: 979px) {
    .wrapper {
        /* Styles for between medium and large resolution */
    }
}

@media (min-width: 600px) and (max-width: 1199px) {
    .wrapper {
        /* Styles for between small and extra large resolution */
    }
}

• sass/variables/_layout.scss (breakpoint configuration)
• sass/utils/_responsive.scss (the mixin)

.logo {
    background: url('logo-100x50.png');

    @include hd {
        background: url('logo-200x100.png');
        background-size: 100px 50px;
    }
}

.logo {
    background: url('logo-100x50.png');
}

@media (-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {

    .logo {
        background: url('logo-200x100.png');
        background-size: 100px 50px;
    }
}

• sass/utils/_responsive.scss

/*
breakpoint configuation
*/
$breakpoints: (
    mobile: 0,
    xs:     400px,
    sm:     600px,
    md:     730px,
    lg:     980px,
    xl:     1200px
);

/*
Die folgenden CSS-Klassen werden anhand der obigen Konfiguration erstellt:
*/
.hide-mobile {...}      /* display:none ab 400px      */
.hide-xs {...}          /* display:none ab 400px      */
.hide-sm {...}          /* display:none ab 600px      */
.hide-md {...}          /* display:none ab 730px      */
.hide-lg {...}          /* display:none ab 980px      */
.hide-xl {...}          /* display:none ab 1200px     */
.block-mobile {...}     /* display: block ab 400px    */
.block-xs {...}         /* display: block ab 400px    */
.block-sm {...}         /* display: block ab 600px    */
.block-md {...}         /* display: block ab 730px    */
.block-lg {...}         /* display: block ab 980px    */
.block-xl {...}         /* display: block ab 1200px   */
.inline-mobile {...}    /* display: inline ab 400px   */
.inline-xs {...}        /* display: inline ab 400px   */
.inline-sm {...}        /* display: inline ab 600px   */
.inline-md {...}        /* display: inline ab 730px   */
.inline-lg {...}        /* display: inline ab 980px   */
.inline-xl {...}        /* display: inline ab 1200px  */

• sass/variables/_layout.scss (breakpoint configuration)
• sass/base/_standards.scss

<span id="responsive-status"></span>

$breakpoints: (
    xs: 400px,
    sm: 600px,
    md: 730px,
    lg: 980px,
    xl: 1200px
);

#responsive-status {
    display: none;
    font-family: "mobile";
}
@each $breakpoint in $breakpoints {
    $name: nth($breakpoint, 1);
    $width: nth($breakpoint, 2);
    @media (min-width: $width) {
        #responsive-status {
            font-family: "#{$name}";
        }
    }
}

function checkResponsiveStatus() {
    var currBreakpoint = $('#responsive-status').css('font-family');

    if (currBreakpoint != lastBreakpoint) {

        // Set <body> classname to responsive-{name of current breakpoint}
        $('body').removeClass (function (index, css) {
            return (css.match (/(^|\s)responsive-\S+/g) || []).join(' ');
        });
        $('body').addClass("responsive-" + currBreakpoint);

        // Just for presentation (may be deleted)
        $('.example-rs').html(currBreakpoint);

        // Call functions tied to current breakpoint
        // Add your own cases if you like
        switch(currBreakpoint) {
            case "mobile":
                console.log("JavaScript-Code for mobile resolution");
                break;

            case "xs":
                console.log("JavaScript-Code for extra small (xs) resolution");
                break;

            case "sm":
                console.log("JavaScript-Code for small (sm) resolution");
                break;

            case "md":
                console.log("JavaScript-Code for medium (md) resolution");
                break;

            case "lg":
                console.log("JavaScript-Code for large (lg) resolution");
                break;

            case "xl":
                console.log("JavaScript-Code for extra large (xl) resolution");
                break;
        }
    }

    lastBreakpoint = currBreakpoint;

    return currBreakpoint;
}

var lastBreakpoint = false,
    currBreakpoint = false;

$(document).ready(function() {

    // Groessenaenderung des Browserfensters abfangen
    $( window ).bind( "resize", function(){
        currBreakpoint = checkResponsiveStatus();
    });

    // Seite initialisieren
    currBreakpoint = checkResponsiveStatus();

});

• sass/variables/_layout.scss (breakpoint configuration)
• sass/base/_standards.scss (SCSS-code)
• templates/layout_main.html (HTML-code)
• js/responsive.js (jQuery-Code)

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4;</h4>
<h4 class="h2">Heading 4 with class .h2</h4>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in posuere orci. Nam euismod gravida nunc. Ut accumsan vitae dolor interdum ullamcorper. Ut luctus, lacus quis finibus bibendum, tortor nisl tristique mauris, eu efficitur nisi felis sit amet lacus. Duis a euismod erat. Sed faucibus ultricies sem, varius fringilla velit ullamcorper sit amet.
</p>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in posuere orci. Nam euismod gravida nunc. Ut accumsan vitae dolor interdum ullamcorper. Ut luctus, lacus quis finibus bibendum, tortor nisl tristique mauris, eu efficitur nisi felis sit amet lacus. Duis a euismod erat. Sed faucibus ultricies sem, varius fringilla velit ullamcorper sit amet.
</p>

• sass/variables/_typography.scss
• sass/objects/_h.scss
• sass/objects/_p.scss

<p class="lead">
    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. Ut luctus, lacus quis finibus bibendum, tortor nisl tristique mauris, eu efficitur nisi felis sit amet lacus. Duis a euismod erat.
</p>

• sass/variables/_typography.scss
• sass/objects/_p.scss

<p class="small">
    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. Ut luctus, lacus quis finibus bibendum, tortor nisl tristique mauris, eu efficitur nisi felis sit amet lacus. Duis a euismod erat.
</p>

• sass/variables/_typography.scss
• sass/objects/_p.scss

<ul>
    <li>Eins
        <ul>
            <li>Eins.Eins</li>
            <li>Eins.Zwei</li>
        </ul>
    </li>
    <li>Zwei</li>
    <li>Drei</li>
    <li>Vier</li>
</ul>

• sass/objects/_list.scss

<ol>
    <li>Eins
        <ol>
            <li>Eins.Eins</li>
            <li>Eins.Zwei</li>
        </ol>
    </li>
    <li>Zwei</li>
    <li>Drei</li>
    <li>Vier</li>
</ol>

• sass/objects/_list.scss

<hr>

• sass/objects/_hr.scss

<p>
    <img class="float-left" src="img/picture.png" alt=".floatleft">
    Lorem ipsum dolor sit amet...
</p>
<p>
    <img class="float-right" src="img/picture.png" alt=".floatright">
    Aliquam mollis mauris sed ...
</p>

• sass/base/_layout.scss
• sass/components/_lightbox.scss

<div class="embed-container">
    <iframe src="https://player.vimeo.com/video/59361603" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

• sass/objects/_embed-container.scss
• sass/mixins/_embed-container.scss (dependency)
• sass/utils/_sizing.scss (dependency)

<svg class="icon">
    <use xlink:href="skins/website/en/accessories/svgsprite/sprite.svg#globe"></use>
</svg>

• sass/objects/_icon.scss

<p><i class="js-icon" data-icon="shopping-bag" data-icon-class="icon--lg" data-icon-title="Your shopping bag"></i></p>
<p class="js-icon" data-icon="shopping-bag" data-icon-append="true" data-icon-ariahidden="true"></p>

• sass/objects/_icon.scss
• javascript/components/icon.js

<svg class="icon icon--xs">
    <use xlink:href="skins/website/en/accessories/svgsprite/sprite.svg#globe"></use>
</svg>

<svg class="icon icon--sm">
    <use xlink:href="skins/website/en/accessories/svgsprite/sprite.svg#globe"></use>
</svg>

<svg class="icon">
    <use xlink:href="skins/website/en/accessories/svgsprite/sprite.svg#globe"></use>
</svg>

<svg class="icon icon--lg">
    <use xlink:href="skins/website/en/accessories/svgsprite/sprite.svg#globe"></use>
</svg>

<svg class="icon icon--xl">
    <use xlink:href="skins/website/en/accessories/svgsprite/sprite.svg#globe"></use>
</svg>

<svg class="icon icon--2x">
    <use xlink:href="skins/website/en/accessories/svgsprite/sprite.svg#globe"></use>
</svg>

<svg class="icon icon--3x">
    <use xlink:href="skins/website/en/accessories/svgsprite/sprite.svg#globe"></use>
</svg>

<svg class="icon icon--4x">
    <use xlink:href="skins/website/en/accessories/svgsprite/sprite.svg#globe"></use>
</svg>

<svg class="icon icon--5x">
    <use xlink:href="skins/website/en/accessories/svgsprite/sprite.svg#globe"></use>
</svg>

• sass/objects/_icon.scss

<p>
    <i class="js-icon" data-icon="warning" data-icon-class="icon--2x icon--warning"></i>
</p>
<p>
    <i class="js-icon" data-icon="success" data-icon-class="icon--2x icon--success"></i>
</p>

.icon--warning {
    color: color('warning');
}

.icon--success {
    color: color('success');
}

<svg class="icon">
    <use xlink:href="skins/website/en/accessories/svgsprite/sprite.svg#shopping-cart"></use>
</svg>

<svg class="icon icon--rotate-90">
    <use xlink:href="skins/website/en/accessories/svgsprite/sprite.svg#shopping-cart"></use>
</svg>

<svg class="icon icon--rotate-180">
    <use xlink:href="skins/website/en/accessories/svgsprite/sprite.svg#shopping-cart"></use>
</svg>

<svg class="icon icon--rotate-270">
    <use xlink:href="skins/website/en/accessories/svgsprite/sprite.svg#shopping-cart"></use>
</svg>

<svg class="icon icon--flip-h">
    <use xlink:href="skins/website/en/accessories/svgsprite/sprite.svg#shopping-cart"></use>
</svg>

<svg class="icon icon-flip-v">
    <use xlink:href="skins/website/en/accessories/svgsprite/sprite.svg#shopping-cart"></use>
</svg>

<svg class="icon icon--spin">
    <use xlink:href="skins/website/en/accessories/svgsprite/sprite.svg#shopping-cart"></use>
</svg>

<svg class="icon icon--4x">
    <use xlink:href="skins/website/en/accessories/svgsprite/sprite.svg#refresh"></use>
</svg>

• sass/objects/_icon.scss

<div class="carousel carousel--single">
    <ul class="slick" data-slick='{"autoplay": true, "autoplaySpeed": 8000, "speed": 1000}'>

        <li class="carousel__item">
            <img src="temp/explorer/files/root/placeholder/headers/header01.jpg">
            <div class="carousel__caption">Beach</div>
        </li>

        [...]

    </ul>
</div>

// http://kenwheeler.github.io/slick/

$(function() {
    $('.carousel--single .slick').slick();
});

• Mandatory:
  • dependencies/slick-carousel/**/*
• Optional (but needed for this demo):
  • sass/mixins/_carousel.scss
  • javascript/components/carousel.js

<div class="carousel carousel--multi">
    <ul class="slick">

        <li class="carousel__item">
            <img src="temp/explorer/files/root/placeholder/carousel/dummy01.jpg">
        </li>

        [...]

    </ul>
</div>

$('.carousel--multi .slick').slick({
    dots: true,
    infinite: false,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 4,
    responsive: [
        {
            breakpoint: 1024,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 3,
                infinite: true,
                dots: true
            }
        },
        {
            breakpoint: 600,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 2
            }
        },
        {
            breakpoint: 480,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1
            }
        }
        // You can unslick at a given breakpoint now by adding:
        // settings: "unslick"
        // instead of a settings object
    ]
});

• Mandatory:
  • dependencies/slick-carousel/**/*
• Optional (but needed for this demo):
  • sass/mixins/_carousel.scss
  • javascript/components/carousel.js

<form>
    <fieldset class="wideform">
        <div class="formrow">
            <label class="label req" for="firstname">First/last name</label>
            <div class="formitem col-1of2">
                <label class="label req" for="firstname">First name</label>
                <input class="formfield" type="text" name="firstname" id="firstname" placeholder="Placeholder" required="required" x-autocompletetype="given-name"/>
            </div>
            <div class="formitem col-1of2">
                <label class="label req" for="firstname">Last name</label>
                <input class="formfield" type="text" name="lastname" id="lastname" placeholder="... with polyfill" required="required" x-autocompletetype="family-name"/>
            </div>
        </div>
        <div class="formrow">
            <div class="formitem col-1of3">
                <label class="label" for="zip">Zip</label>
                <input class="formfield" type="text" name="zip" id="zip" pattern="[0-9]" x-autocompletetype="postal-code"/>
            </div>
            <div class="formitem col-2of3">
                <label class="label" for="zip">City</label>
                <input class="formfield" type="text" name="city" id="city" x-autocompletetype="city"/>
            </div>
        </div>
    </fieldset>
</form>

• sass/objects/_form-field.scss
• sass/objects/_form-error.scss
• sass/objects/_form-placeholder.scss
• sass/objects/_form-item.scss
• sass/objects/_form-row.scss
• sass/objects/_form-ticks.scss
• sass/objects/_fieldset.scss
• sass/objects/_form.scss
• (sass/objects/_form-rating.scss)
• js/components/form.js

<div class="grid">
    <div class="col-1of5">
        ...
    </div>
    <div class="col-4of5">
        ...
    </div>
</div>

• sass/objects/_form.scss

<form action="">
    <fieldset>
        <div class="formrow">
            <div class="formitem col-1of3">
                <label class="label" for="formfieldsizes-example-1">Regular text-input</label>
                <input type="text" class="formfield" id="formfieldsizes-example-1">
            </div>
            <div class="formitem col-1of3">
                <label class="label" for="formfieldsizes-example-2">Regular selectbox</label>
                <select name="" id="formfieldsizes-example-2">
                    <option selected="selected">please choose</option>
                    <option>U.S.A.</option>
                    <option>France</option>
                    <option>Italy</option>
                    <option>Spain</option>
                    <option>Germany</option>
                </select>
            </div>
            <div class="formitem col-1of3">
                <button type="button" class="btn">Save</button>
            </div>
        </div>

        <div class="formrow">
            <div class="formitem col-1of3">
                <label class="label" for="formfieldsizes-example-1">Small text-input</label>
                <input type="text" class="formfield formfield--sm" id="formfieldsizes-example-1">
            </div>
            <div class="formitem col-1of3">
                <label class="label" for="formfieldsizes-example-2">Small selectbox</label>
                <select name="" id="formfieldsizes-example-2" class="formfield--sm">
                    <option selected="selected">please choose</option>
                    <option>U.S.A.</option>
                    <option>France</option>
                    <option>Italy</option>
                    <option>Spain</option>
                    <option>Germany</option>
                </select>
            </div>
            <div class="formitem col-1of3">
                <button type="button" class="btn btn--sm">Save</button>
            </div>
        </div>

        <div class="formrow">
            <div class="formitem col-1of3">
                <label class="label" for="formfieldsizes-example-1">Large text-input</label>
                <input type="text" class="formfield formfield--lg" id="formfieldsizes-example-1">
            </div>
            <div class="formitem col-1of3">
                <label class="label" for="formfieldsizes-example-2">large selectbox</label>
                <select name="" id="formfieldsizes-example-2" class="formfield--lg">
                    <option selected="selected">please choose</option>
                    <option>U.S.A.</option>
                    <option>France</option>
                    <option>Italy</option>
                    <option>Spain</option>
                    <option>Germany</option>
                </select>
            </div>
            <div class="formitem col-1of3">
                <button type="button" class="btn btn--lg">Save</button>
            </div>
        </div>
    </fieldset>
</form>

<form action="#" method="get">
    <div class="formrow">
        <div class="formitem">
            <div class="ticks ticks--inline">
                <label>
                    <input type="radio" name="salutation" id="salutation-mrs" value="mrs">
                    <span>Mrs.</span>
                </label>

                [...]

            </div>
        </div>
    </div>
    <div class="formrow">
        <div class="formitem">
            <div class="ticks ticks--inline">
                <label>
                    <input type="checkbox" name="newsletter" id="custom-newsletter">
                    <span>Subscribe to newsletter</span>
                </label>
            </div>
        </div>
    </div>
</form>

• sass/objects/_form-ticks.scss

<form action="#" method="get" id="form6">
    <div class="formrow">
        <div class="formitem col-1of2 floatlabel">
            <label class="label req" for="firstname2">First name</label>
            <input class="formfield" type="text" name="firstname" id="firstname2" required="required" x-autocompletetype="given-name"/>
        </div>
        <div class="formitem col-1of2 floatlabel">
            <label class="label req" for="lastname2">Last name</label>
            <input class="formfield" type="text" name="lastname" id="lastname2" required="required" x-autocompletetype="family-name"/>
        </div>
    </div>
</form>

• sass/objects/_form-floatlabel.scss
• js/components/form-floatlabels.js

<form action="#" method="get" id="form3">
    <div class="formrow">
        <div class="formitem col-1of2">
            <label class="label req" for="password1">Password</label>
            <div class="password-helper">
                <input class="formfield" type="password" name="password" id="password1" required="required" />
            </div>
        </div>
        <div class="formitem col-1of2">
            <label class="label req" for="password2">Password again</label>
            <div class="password-helper">
                <input class="formfield" type="password" name="password2" id="password2" required="required" />
            </div>
        </div>
    </div>
</form>

• sass/objects/_form-password-helper.scss
• js/components/form-password-helper.js

<div class="form-notices">

    <fieldset>
        <form action="#" method="get" id="form4">
            <div class="formrow">
                <div class="formitem">
                    <label class="label req" for="password12">Password</label>
                    <input class="formfield form-notice-password" type="password" name="password" id="password12" required="required" />
                    <div class="form-notice form-notice--incomplete">Your password must contain six or more characters</div>
                    <div class="form-notice form-notice--success">✔</div>

                </div>
            </div>
            <div class="formrow">
                <div class="formitem">
                    <label class="label req" for="password22">Password again</label>
                    <input class="formfield form-notice-password-again" type="password" name="password2" id="password22" required="required" />
                    <div class="form-notice form-notice--incomplete">Please repeat your password in this field</div>
                    <div class="form-notice form-notice--success">✔</div>
                </div>
            </div>
        </form>
    </fieldset>

    <fieldset>
        <div class="formrow">
            <div class="formitem">
                <label class="label" for="notice-salutation">Please focus this field</label>
                <input class="formfield form-notice-focused">
                <div class="form-notice">This notice is shown as long as the field is focused</div>
            </div>
        </div>
    </fieldset>

</div>

• sass/objects/_form-password-helper.scss
• js/components/form-password-helper.js

<form action="#" method="get" id="form5">
    <div class="formrow">
        <div class="formitem">
            <label class="label" for="email3">Basic formgroup-addons</label>
            <div class="formgroup">
                <div class="formgroup__addon">Type your E-Mail-Address here:</div>
                <input class="formfield" type="email" name="email3" id="email3" />
                <div class="formgroup__addon">@gmail.com</div>
            </div>
        </div>
    </div>
    <div class="formrow">
        <div class="formitem col-1of2">
            <label class="label" for="addoncheck">With checkbox</label>
            <div class="formgroup">
                <div class="formgroup__addon">
                    <input type="checkbox" />
                </div>
                <input class="formfield" type="text" name="addoncheck" id="addoncheck" />
            </div>
        </div>
        <div class="formitem col-1of2">
            <label class="label" for="addonradio">With radio button</label>
            <div class="formgroup">
                <div class="formgroup__addon">
                    <input type="radio" />
                </div>
                <input class="formfield" type="text" name="addonradio" id="addonradio" />
            </div>
        </div>
    </div>
    <div class="formrow">
        <div class="formitem col-1of2">
            <label class="label" for="addonbtn">Button</label>
            <div class="formgroup">
                <input class="formfield" type="text" name="addonbtn" id="addonbtn" placeholder="Suchbegriff" />
                <div class="formgroup__btn">
                    <button class="btn">Los!</button>
                </div>
            </div>
        </div>
        <div class="formitem col-1of2">
            <label class="label" for="addonbtngrp">Button group</label>
            <div class="formgroup">
                <div class="formgroup__btn">
                    <button class="btn">A</button>
                    <button class="btn">B</button>
                    <button class="btn">C</button>
                </div>
                <input class="formfield" type="text" name="addonbtngrp" id="addonbtngrp" />
            </div>
        </div>
    </div>
</form>

• sass/objects/_form-group.scss

<button class="btn">I am a button</button>

• sass/objects/_button.scss

<button class="btn">Normal button</button>
<button class="btn btn--primary">Primary button</button>
<button class="btn btn--action">Action button</button>
<button class="btn btn--decline">Decline button</button>
<button class="btn btn--accept">Accept button</button>
<button class="btn btn--link">Link button</button>

• sass/objects/_button.scss

<button class="btn btn--sm">Small button</button>
<button class="btn btn--lg">Large button</button>
<button class="btn btn--square"><svg class="icon icon--lg"><use xlink:href="skins/website/en/accessories/svgsprite/sprite.svg#search"></use></svg></button>

• sass/objects/_button.scss

<button class="btn">Disabled button</button>
<button class="btn btn--primary" disabled>Disabled button</button>
<button class="btn btn--action" disabled>Disabled button</button>
<button class="btn btn--decline" disabled>Disabled button</button>
<button class="btn btn--accept" disabled>Disabled button</button>

• sass/objects/_button.scss

<button class="btn">
    <span class="btn__text">Add to cart</span>
    <svg class="icon"><use xlink:href="skins/website/en/accessories/svgsprite/sprite.svg#shopping-cart"></use></svg>
</button>

• sass/objects/_button.scss

<button class="btn btn--full">Full button</button>

• sass/objects/_button.scss

<div class="btn-group">
    <button class="btn">Grouped</button>
    <button class="btn">buttons</button>
    ...
</div>

• sass/objects/_button-group.scss

<div class="btn-group">
    <button class="btn btn--decline btn--prev">Abort</button>
    <button class="btn btn--accept btn--next">Okay</button>
</div>
<button class="btn btn--lg btn--primary btn--full">Big, primary and full button</button>

• sass/objects/_button.scss

// SCSS:
$button-color-map: (
    [...]
    'btn--dark': (
        'color':                #ccc,
        'border-color':         #000,
        'bg-color':             #333,
        'hover-color':          #ccc,
        'hover-border-color':   #000,
        'hover-bg-color':       #222,
        'active-color':         #ccc,
        'active-border-color':  #000,
        'active-bg-color':      #111,
        'font-family':          'button'
    )
);
<!-- HTML: -->
<button class="btn btn--dark">Dark button</button>

// SCSS:
$button-size-map: (
    [...]
    'btn--giant': (
        'font-size':            60px,
        'padding-top':          40px,
        'padding-right':        80px,
        'padding-bottom':       40px,
        'padding-left':         80px,
        'height':               auto,
        'next-border-radius':   70px
    )
);
<!-- HTML: -->
<button class="btn btn--giant">Giant button</button>

<a class="you-will-be-a-button" href="...">See? I am a button.</a>.you-will-be-a-button {
    @include create-button('btn--primary', 'btn--lg');
}

• sass/atoms/_button.scss

<button class="btn btn--loading">Click me</button>

• sass/objects/_button.scss

<div class="accordion js-accordion">
    <h4>
        <button class="accordion__toggle">...</button>
    </h4>
    <div class="accordion__content">
        ...
    </div>
    ...
</div>

• js/utils/id.js (dependency)
• js/components/accordion.js (script)
• sass/components/_accordion.scss (styles)

<div class="accordion js-accordion">
    <h4>
        <button class="accordion__toggle" aria-expanded="true">...</button>
    </h4>

    <div class="accordion__content">
        ...
    </div>
    ...
</div>

• js/utils/id.js (dependency)
• js/components/accordion.js (script)
• sass/components/_accordion.scss (styles)

<div class="accordion js-accordion" data-accordion="openfirst">
    <h4>
        <button class="accordion__toggle">...</button>
    </h4>
    <div class="accordion__content">
        ...
    </div>
    ...
</div>

• js/utils/id.js (dependency)
• js/components/accordion.js (script)
• sass/components/_accordion.scss (styles)

<div class="accordion js-accordion" data-accordion="autoclose">
    <h4>
        <button class="accordion__toggle">...</button>
    </h4>
    <div class="accordion__content">
        ...
    </div>
    <h4>
        <button class="accordion__toggle">...</button>
    </h4>
    <div class="accordion__content">
        ...
    </div>
    ...
</div>

• js/utils/id.js (dependency)
• js/components/accordion.js (script)
• sass/components/_accordion.scss (styles)

<table>
    ...
</table>

• sass/objects/_table.scss

<table class="table">
    ...
</table>

• sass/objects/_table.scss

<table class="table table--bordered table--striped table--hover">
    ...
</table>

• sass/objects/_table.scss

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="error">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="error">...</td>
  <td class="info">...</td>
</tr>

• sass/objects/_table.scss

<div class="table--responsive-scroll">
    <table class="table">
        ...
    </table>
</div>

• sass/objects/_table.scss

<div class="table--responsive-vertical">
    <table class="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Gender</th>
                <th>Age</th>
                <th>Occupation</th>
                <th>Game</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th data-title="Name">Master Chief</th>
                <td data-title="Gender">Male</td>
                <td data-title="Age">unknown</td>
                <td data-title="Occupation">Spartan</td>
                <td data-title="Game">Halo</td>
            </tr>
        </tbody>
    </table>
</div>

• sass/objects/_table.scss

<div class="alert-message info">
    ...
</div>
<div class="alert-message warning">
    ...
</div>
<div class="alert-message error">
    ...
</div>
<div class="alert-message success">
    ...
</div>

• sass/objects/_alert-message.scss
• js/components/alert.js

<!-- Regular dropdown -->
<div class="dropdown js-dropdown">
    <button class="btn dropdown__toggle">
        Open dropdown
        <span class="dropdown__caret"></span>
    </button>
    <ul>
        <li><a href="...">Option 1</a></li>
        <li><a href="...">Option 2</a></li>
        <li><a href="...">Option 3</a></li>
        <li class="dropdown__divider"></li>
        <li><a href="...">Seperated option 4</a></li>
    </ul>
</div>

<!-- .js-dropdown--switch -->
<div class="dropdown js-dropdown js-dropdown--switch">
    <button class="btn dropdown__toggle">
        Open dropdown
        <span class="dropdown__caret"></span>
    </button>
    <ul>
        [...]
    </ul>
</div>

• sass/mixins/_dropdown.scss
• sass/components/_dropdown.scss
• javascript/utils/id.js (dependency)
• javascript/components/dropdown.js

<!-- Regular Slidedown -->
<div class="dropdown js-slidedown">
    <button class="btn dropdown__toggle">
        Open slidedown
        <span class="dropdown__caret"></span>
    </button>
    <ul>
        <li><a href="...">Option 1</a></li>
        <li><a href="...">Option 2</a></li>
        <li><a href="...">Option 3</a></li>
        <li class="dropdown__divider"></li>
        <li><a href="...">Seperated option 4</a></li>
    </ul>
</div>

<!-- .slidedown--switch -->
<div class="dropdown js-slidedown js-slidedown--switch">
    <button class="btn dropdown__toggle">
        Open slidedown
        <span class="dropdown__caret"></span>
    </button>
    <ul>
        [...]
    </ul>
</div>

• sass/components/_dropdown.scss
• sass/mixins/_dropdown.scss
• javascript/utils/id.js (dependency)
• javascript/components/slidedown.js

<div class="dropdown js-slidedown js-slidedown--switch">
    <button class="btn dropdown__toggle">
        Open slidedown
        <span class="dropdown__caret"></span>
    </button>
    <ul>
        <li><a href="javascript://">Option 1</a></li>
        <li><a href="javascript://">Option 2</a>
            <ul>
                <li><a href="javascript://">Option 2.1</a>
                    <ul>
                        <li><a href="javascript://">Option 2.1.1</a></li>
                        <li><a href="javascript://">Option 2.1.2</a></li>
                        [...]
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

• sass/components/_dropdown.scss
• sass/mixins/_dropdown.scss
• javascript/utils/id.js (dependency)
• javascript/components/slidedown.js

<div class="dropdown js-dropdown js-dropdown-slidedown">
    <button class="btn dropdown__toggle">
        Open slidedown
    </button>
    <ul>
        <li><a href="javascript://">Option 1</a></li>
        <li><a href="javascript://">Option 2</a>
            <ul>
                <li><a href="javascript://">Option 2.1</a>
                    <ul>
                        <li><a href="javascript://">Option 2.1.1</a></li>
                        <li><a href="javascript://">Option 2.1.2</a></li>
                        [...]
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

• sass/components/_dropdown.scss
• sass/mixins/_dropdown.scss
• javascript/utils/id.js (dependency)
• js/components/dropdown.js
• js/components/slidedown.js

<div class="formrow">
    <div class="formitem">
        <label class="label">Select date</label>
        <input type="text" class="formfield js-datepicker">
    </div>
</div>

• dependencies/pickadate/lib/picker.js
• dependencies/pickadate/lib/picker.date.js
• js/components/datepicker.js (configuration)
• sass/components/_datepicker.scss (styles)

<div class="formrow">
    <div class="formitem">
        <label class="label">Select time</label>
        <input type="text" class="formfield js-timepicker">
    </div>
</div>

• dependencies/pickadate/lib/picker.js
• dependencies/pickadate/lib/picker.time.js
• js/components/datepicker.js (configuration)
• sass/components/_datepicker.scss (styles)