partystreusel 1.1.1 → 1.2.0

data/styleguide/source/javascripts/modernizr.js

@@ -0,0 +1,306 @@
+/* Modernizr 2.8.3 (Custom Build) | MIT & BSD
+ * Build: http://modernizr.com/download/#-flexbox-flexboxlegacy-csstransforms-csstransforms3d-csstransitions-inlinesvg-svg-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes
+ */
+;
+
+
+
+window.Modernizr = (function( window, document, undefined ) {
+
+    var version = '2.8.3',
+
+    Modernizr = {},
+
+    enableClasses = true,
+
+    docElement = document.documentElement,
+
+    mod = 'modernizr',
+    modElem = document.createElement(mod),
+    mStyle = modElem.style,
+
+    inputElem  ,
+
+
+    toString = {}.toString,
+
+    prefixes = ' -webkit- -moz- -o- -ms- '.split(' '),
+
+
+
+    omPrefixes = 'Webkit Moz O ms',
+
+    cssomPrefixes = omPrefixes.split(' '),
+
+    domPrefixes = omPrefixes.toLowerCase().split(' '),
+
+    ns = {'svg': 'http://www.w3.org/2000/svg'},
+
+    tests = {},
+    inputs = {},
+    attrs = {},
+
+    classes = [],
+
+    slice = classes.slice,
+
+    featureName, 
+
+
+    injectElementWithStyles = function( rule, callback, nodes, testnames ) {
+
+      var style, ret, node, docOverflow,
+          div = document.createElement('div'),
+                body = document.body,
+                fakeBody = body || document.createElement('body');
+
+      if ( parseInt(nodes, 10) ) {
+                      while ( nodes-- ) {
+              node = document.createElement('div');
+              node.id = testnames ? testnames[nodes] : mod + (nodes + 1);
+              div.appendChild(node);
+          }
+      }
+
+                style = ['&#173;','<style id="s', mod, '">', rule, '</style>'].join('');
+      div.id = mod;
+          (body ? div : fakeBody).innerHTML += style;
+      fakeBody.appendChild(div);
+      if ( !body ) {
+                fakeBody.style.background = '';
+                fakeBody.style.overflow = 'hidden';
+          docOverflow = docElement.style.overflow;
+          docElement.style.overflow = 'hidden';
+          docElement.appendChild(fakeBody);
+      }
+
+      ret = callback(div, rule);
+        if ( !body ) {
+          fakeBody.parentNode.removeChild(fakeBody);
+          docElement.style.overflow = docOverflow;
+      } else {
+          div.parentNode.removeChild(div);
+      }
+
+      return !!ret;
+
+    },
+    _hasOwnProperty = ({}).hasOwnProperty, hasOwnProp;
+
+    if ( !is(_hasOwnProperty, 'undefined') && !is(_hasOwnProperty.call, 'undefined') ) {
+      hasOwnProp = function (object, property) {
+        return _hasOwnProperty.call(object, property);
+      };
+    }
+    else {
+      hasOwnProp = function (object, property) { 
+        return ((property in object) && is(object.constructor.prototype[property], 'undefined'));
+      };
+    }
+
+
+    if (!Function.prototype.bind) {
+      Function.prototype.bind = function bind(that) {
+
+        var target = this;
+
+        if (typeof target != "function") {
+            throw new TypeError();
+        }
+
+        var args = slice.call(arguments, 1),
+            bound = function () {
+
+            if (this instanceof bound) {
+
+              var F = function(){};
+              F.prototype = target.prototype;
+              var self = new F();
+
+              var result = target.apply(
+                  self,
+                  args.concat(slice.call(arguments))
+              );
+              if (Object(result) === result) {
+                  return result;
+              }
+              return self;
+
+            } else {
+
+              return target.apply(
+                  that,
+                  args.concat(slice.call(arguments))
+              );
+
+            }
+
+        };
+
+        return bound;
+      };
+    }
+
+    function setCss( str ) {
+        mStyle.cssText = str;
+    }
+
+    function setCssAll( str1, str2 ) {
+        return setCss(prefixes.join(str1 + ';') + ( str2 || '' ));
+    }
+
+    function is( obj, type ) {
+        return typeof obj === type;
+    }
+
+    function contains( str, substr ) {
+        return !!~('' + str).indexOf(substr);
+    }
+
+    function testProps( props, prefixed ) {
+        for ( var i in props ) {
+            var prop = props[i];
+            if ( !contains(prop, "-") && mStyle[prop] !== undefined ) {
+                return prefixed == 'pfx' ? prop : true;
+            }
+        }
+        return false;
+    }
+
+    function testDOMProps( props, obj, elem ) {
+        for ( var i in props ) {
+            var item = obj[props[i]];
+            if ( item !== undefined) {
+
+                            if (elem === false) return props[i];
+
+                            if (is(item, 'function')){
+                                return item.bind(elem || obj);
+                }
+
+                            return item;
+            }
+        }
+        return false;
+    }
+
+    function testPropsAll( prop, prefixed, elem ) {
+
+        var ucProp  = prop.charAt(0).toUpperCase() + prop.slice(1),
+            props   = (prop + ' ' + cssomPrefixes.join(ucProp + ' ') + ucProp).split(' ');
+
+            if(is(prefixed, "string") || is(prefixed, "undefined")) {
+          return testProps(props, prefixed);
+
+            } else {
+          props = (prop + ' ' + (domPrefixes).join(ucProp + ' ') + ucProp).split(' ');
+          return testDOMProps(props, prefixed, elem);
+        }
+    }    tests['flexbox'] = function() {
+      return testPropsAll('flexWrap');
+    };
+
+
+    tests['flexboxlegacy'] = function() {
+        return testPropsAll('boxDirection');
+    };
+
+    tests['csstransforms'] = function() {
+        return !!testPropsAll('transform');
+    };
+
+
+    tests['csstransforms3d'] = function() {
+
+        var ret = !!testPropsAll('perspective');
+
+                        if ( ret && 'webkitPerspective' in docElement.style ) {
+
+                      injectElementWithStyles('@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}', function( node, rule ) {
+            ret = node.offsetLeft === 9 && node.offsetHeight === 3;
+          });
+        }
+        return ret;
+    };
+
+
+    tests['csstransitions'] = function() {
+        return testPropsAll('transition');
+    };
+
+
+
+    tests['svg'] = function() {
+        return !!document.createElementNS && !!document.createElementNS(ns.svg, 'svg').createSVGRect;
+    };
+
+    tests['inlinesvg'] = function() {
+      var div = document.createElement('div');
+      div.innerHTML = '<svg/>';
+      return (div.firstChild && div.firstChild.namespaceURI) == ns.svg;
+    };    for ( var feature in tests ) {
+        if ( hasOwnProp(tests, feature) ) {
+                                    featureName  = feature.toLowerCase();
+            Modernizr[featureName] = tests[feature]();
+
+            classes.push((Modernizr[featureName] ? '' : 'no-') + featureName);
+        }
+    }
+
+
+
+     Modernizr.addTest = function ( feature, test ) {
+       if ( typeof feature == 'object' ) {
+         for ( var key in feature ) {
+           if ( hasOwnProp( feature, key ) ) {
+             Modernizr.addTest( key, feature[ key ] );
+           }
+         }
+       } else {
+
+         feature = feature.toLowerCase();
+
+         if ( Modernizr[feature] !== undefined ) {
+                                              return Modernizr;
+         }
+
+         test = typeof test == 'function' ? test() : test;
+
+         if (typeof enableClasses !== "undefined" && enableClasses) {
+           docElement.className += ' ' + (test ? '' : 'no-') + feature;
+         }
+         Modernizr[feature] = test;
+
+       }
+
+       return Modernizr; 
+     };
+
+
+    setCss('');
+    modElem = inputElem = null;
+
+
+    Modernizr._version      = version;
+
+    Modernizr._prefixes     = prefixes;
+    Modernizr._domPrefixes  = domPrefixes;
+    Modernizr._cssomPrefixes  = cssomPrefixes;
+
+
+
+    Modernizr.testProp      = function(prop){
+        return testProps([prop]);
+    };
+
+    Modernizr.testAllProps  = testPropsAll;
+
+
+    Modernizr.testStyles    = injectElementWithStyles;    docElement.className = docElement.className.replace(/(^|\s)no-js(\s|$)/, '$1$2') +
+
+                                                    (enableClasses ? ' js ' + classes.join(' ') : '');
+
+    return Modernizr;
+
+})(this, this.document);
+;

data/styleguide/source/javascripts/views/_initializer.js.coffee

@@ -0,0 +1,15 @@
+$ ->
+  # Document ready...
+  I18n.locale = $('html').attr('lang') if I18n?
+
+  picturefill()  if typeof picturefill is "function"
+
+  Streusel.selectorType = 'css_class'
+  Streusel.selectorPrefix = 'js'
+
+  Streusel.Readmore.init()
+  Streusel.Offcanvas.init()
+  Streusel.Topbar.init()
+  Streusel.Accordion.init()
+  Streusel.Tab.init()
+  Streusel.Slider.init()

data/styleguide/source/layouts/_favicons.html.haml

@@ -0,0 +1,3 @@
+-# 1. take a svg "favicon" and generate all formats with the following service: http://realfavicongenerator.net/
+-# 2. Then add all the icons (and meta tags) with the following syntax example:
+-# = favicon_link_tag("/apple-touch-icon-57x57.png", rel: "apple-touch-icon", sizes: "57x57")

data/styleguide/source/layouts/_icons.html.erb

@@ -0,0 +1,31 @@
+<script>
+  var supportsSvg = function() {
+    var div = document.createElement('div');
+    div.innerHTML = '<svg/>';
+    return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg';
+  };
+
+  if (!supportsSvg()) {
+
+    (function(e){function t(t,n,r,o){"use strict";function a(){for(var e,n=0;u.length>n;n++)u[n].href&&u[n].href.indexOf(t)>-1&&(e=!0);e?i.media=r||"all":setTimeout(a)}var i=e.document.createElement("link"),l=n||e.document.getElementsByTagName("script")[0],u=e.document.styleSheets;return i.rel="stylesheet",i.href=t,i.media="only x",i.onload=o||null,l.parentNode.insertBefore(i,l),a(),i}var n=function(r,o){"use strict";if(r&&3===r.length){var a=e.navigator,i=e.Image,l=!(!document.createElementNS||!document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||e.opera&&-1===a.userAgent.indexOf("Chrome")||-1!==a.userAgent.indexOf("Series40")),u=new i;u.onerror=function(){n.method="png",n.href=r[2],t(r[2])},u.onload=function(){var e=1===u.width&&1===u.height,a=r[e&&l?0:e?1:2];n.method=e&&l?"svg":e?"datapng":"png",n.href=a,t(a,null,null,o)},u.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",document.documentElement.className+=" grunticon"}};n.loadCSS=t,e.grunticon=n})(this);
+
+    grunticon(["", "<%= asset_path('fallbacks/icons.data.png.css')%>", "<%= asset_path(:css, 'fallbacks/icons.fallback.css')%>"]);
+
+  } else {
+
+    var ajax = new XMLHttpRequest();
+    ajax.open("GET", "<%= asset_path('icons/icon-sprite.svg')%>", true);
+    ajax.onload = function(e) {
+      var div = document.createElement("div");
+      div.innerHTML = ajax.responseText;
+      document.body.insertBefore(div, document.body.childNodes[0]);
+    }
+    ajax.send();
+
+  }
+
+</script>
+
+<noscript>
+  <link href="<%= asset_path('fallbacks/icons.fallback.css')%>" rel="stylesheet" />
+</noscript>

data/styleguide/source/layouts/_typekit.html.haml

@@ -0,0 +1,4 @@
+- if false #Rails.application.config.typekit_key.present?
+  = javascript_include_tag "//use.typekit.net/#{Rails.application.config.typekit_key}.js"
+  :javascript
+    try{Typekit.load();}catch(e){}

data/styleguide/source/layouts/application.html.haml

@@ -0,0 +1,58 @@
+!!! 5
+/[if IE 8]
+  %html.no-js.lt-ie10.lt-ie9{ lang: I18n.locale }
+/[if IE 9]
+  %html.no-js.lt-ie10{ lang: I18n.locale }
+<!--[if gt IE 9]><!-->
+%html.no-js{ lang: I18n.locale }
+  <!--<![endif]-->
+  %head
+    %meta{ charset: 'utf-8' }
+    %meta{ 'http-equiv' => 'X-UA-Compatible', content: 'IE=edge' }
+    - if  content_for?(:head)
+      = yield(:head)
+    - else
+      %title 'Untitled'
+      %meta{ name: 'keywords', content: '' }
+      %meta{ name: 'description', content: '' }
+
+    %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1.0' }
+
+    -# Favicons
+    = render 'layouts/favicons'
+
+    = stylesheet_link_tag    'partystreusel/application', media: 'all'
+
+    <!--[if (lt IE 9) & (!IEMobile)]>
+    = javascript_include_tag 'html5shiv-printshiv'
+    = stylesheet_link_tag    'ie8', media: 'screen'
+    <![endif]-->
+
+    -# JavaScripts
+    = render 'layouts/icons'
+
+    = csrf_meta_tags
+
+  %body.js-offcanvas{ class: body_class }
+    .offcanvas__outer
+      .offcanvas__inner
+        %header.page__header{role: "banner"}
+          = render 'partials/header'
+          = render 'partials/offcanvas'
+        %main#maincontent{role: "content"}
+          = yield
+
+        %footer{role: "contentinfo"}
+          = render 'partials/footer'
+        .offcanvas__overlay
+
+    -# Typekit
+    = render 'layouts/typekit'
+
+    -# Application JavaScripts
+    != google_analytics_code
+    = javascript_include_tag 'application'#, async: !ScreenConcept.config.assets.debug
+
+    <!--[if lte IE 8]>
+    = javascript_include_tag 'rem'
+    <![endif]-->

data/styleguide/source/partials/_google_analytics.html.erb

@@ -0,0 +1,9 @@
+<script>
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+  ga('create', '<%= google_analytics_code %>');
+  ga('send', 'pageview');
+</script>

data/styleguide/source/partials/_header.html.haml

@@ -0,0 +1,3 @@
+%button.offcanvas__opener.js-offcanvas__toggler{ href: '#'}
+  - streusel_icon( 'menu')
+  Menu

data/styleguide/source/partials/_offcanvas.html.haml

@@ -0,0 +1,6 @@
+%nav.offcanvas__container{role: 'navigation'}
+  .offcanvas__container-inner
+    %button.offcanvas__close.js-offcanvas__toggler{ href: '#'}
+      - streusel_icon( 'close')
+      Close
+    = render 'partials/offcanvas_nav'

data/styleguide/source/partials/_offcanvas_nav.html.haml

@@ -0,0 +1,22 @@
+= render 'styleguide/styleguide_nav'
+
+-# %ul.offcanvas-nav
+-#   %li
+-#     = link_to 'NavItem', '#', class: 'offcanvas-nav__link'
+-#   %li
+-#     = link_to 'NavItem with Sub', '#', class: 'offcanvas-nav__link'
+-#     %ul.offcanvas-nav__sub.offcanvas-nav__sub--open
+-#       %li
+-#         = link_to 'NavItem', '/', class: 'offcanvas-nav__link'
+-#       %li
+-#         = link_to 'NavItem active', '/', class: 'offcanvas-nav__link offcanvas-nav__link--active'
+-#       %li
+-#         = link_to 'NavItem', '/', class: 'offcanvas-nav__link'
+-#       %li
+-#         = link_to 'NavItem', '/', class: 'offcanvas-nav__link'
+-#   %li
+-#     = link_to 'NavItem', '#', class: 'offcanvas-nav__link'
+-#   %li
+-#     = link_to 'NavItem', '#', class: 'offcanvas-nav__link offcanvas-nav__link--active'
+-#   %li
+-#     = link_to 'NavItem', '#', class: 'offcanvas-nav__link'

data/styleguide/source/styleguide/_styleguide_nav.html.haml

@@ -0,0 +1,80 @@
+%ul.offcanvas-nav
+  %li
+    %a.offcanvas-nav__link{ href: '#'} Base Styles
+    %ul.offcanvas-nav__sub
+      %li
+        = link_to 'Typography', '/styleguide/typo.html', class: 'offcanvas-nav__link'
+      %li
+        = link_to 'Tables', '/styleguide/table.html', class: 'offcanvas-nav__link'
+
+  %li
+    %a.offcanvas-nav__link{ href: '#'} Icons
+    %ul.offcanvas-nav__sub
+      %li
+        = link_to 'Icons', '/styleguide/icons.html', class: 'offcanvas-nav__link'
+
+  %li
+    %a.offcanvas-nav__link{ href: '#'} Form
+    %ul.offcanvas-nav__sub
+      %li
+        = link_to 'Base form styles', '/styleguide/form.html', class: 'offcanvas-nav__link'
+      %li
+        = link_to 'Switches', '/styleguide/switches.html', class: 'offcanvas-nav__link'
+      %li
+        = link_to 'Options (radio/checkbox)', '/styleguide/options.html', class: 'offcanvas-nav__link'
+
+  %li
+    %a.offcanvas-nav__link{ href: '#'} Buttons
+    %ul.offcanvas-nav__sub
+      %li
+        = link_to 'Buttons', '/styleguide/buttons.html', class: 'offcanvas-nav__link'
+      %li
+        = link_to 'Dropdowns', '/styleguide/dropdowns.html', class: 'offcanvas-nav__link'
+
+  %li
+    %a.offcanvas-nav__link{ href: '#'} Navigation
+    %ul.offcanvas-nav__sub
+      %li
+        = link_to 'TopBar', '/styleguide/topbar.html', class: 'offcanvas-nav__link'
+      %li
+        = link_to 'IconBar', '/styleguide/iconbar.html', class: 'offcanvas-nav__link'
+      %li
+        = link_to 'Breadcrumb', '/styleguide/breadcrumb.html', class: 'offcanvas-nav__link'
+
+  %li
+    %a.offcanvas-nav__link{ href: '#'} Content
+    %ul.offcanvas-nav__sub
+      %li
+        = link_to 'Base content', '/styleguide/content.html', class: 'offcanvas-nav__link'
+      %li
+        = link_to 'Read More', '/styleguide/readmore.html', class: 'offcanvas-nav__link'
+      %li
+        = link_to 'Accordion', '/styleguide/accordion.html', class: 'offcanvas-nav__link'
+      %li
+        = link_to 'Tab', '/styleguide/tab.html', class: 'offcanvas-nav__link'
+      %li
+        = link_to 'Two Column', '/styleguide/two_column.html', class: 'offcanvas-nav__link'
+      %li
+        = link_to 'Image', '/styleguide/image.html', class: 'offcanvas-nav__link'
+      %li
+        = link_to 'Linklist', '/styleguide/linklist.html', class: 'offcanvas-nav__link'
+
+  %li
+    %a.offcanvas-nav__link{ href: '#'} Teaser
+    %ul.offcanvas-nav__sub
+      %li
+        = link_to 'Teaser', '/styleguide/teaser.html', class: 'offcanvas-nav__link'
+      %li
+        = link_to 'Teaser Card', '/styleguide/teaser_card.html', class: 'offcanvas-nav__link'
+      %li
+        = link_to 'Teaser List', '/styleguide/teaser_list.html', class: 'offcanvas-nav__link'
+      %li
+        = link_to 'Teaser Assets', '/styleguide/teaser_assets.html', class: 'offcanvas-nav__link'
+
+  %li
+    %a.offcanvas-nav__link{ href: '#'} Media
+    %ul.offcanvas-nav__sub
+      %li
+        = link_to 'Slider', '/styleguide/slider.html', class: 'offcanvas-nav__link'
+      %li
+        = link_to 'Embeds (Videos)', '/styleguide/embeds.html', class: 'offcanvas-nav__link'

data/styleguide/source/styleguide/accordion.html.haml

@@ -0,0 +1,27 @@
+%article
+  %header
+    %h1 Akkordeon
+    %a{ href: '/styleguide/' } Back to Index
+  %hr
+  %section.accordion.js-accordion{ 'data-scroll-offset' => -10 }
+    %section.accordion__item.accordion__item--open
+      %h1.accordion__title Lorem ipsum dolor
+      .accordion__content
+        %section.sc-content
+          %p
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+    %section.accordion__item
+      %h1.accordion__title Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
+      .accordion__content
+        %section.sc-content
+          %p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+    %section.accordion__item
+      %h1.accordion__title Lorem ipsum dolor
+      .accordion__content
+        %section.sc-content
+          %p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+    %section.accordion__item
+      %h1.accordion__title Lorem ipsum dolor
+      .accordion__content
+        %section.sc-content
+          %p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

data/styleguide/source/styleguide/breadcrumb.html.haml

@@ -0,0 +1,18 @@
+%article
+  %header
+    %h1 Breadcrumb
+    %a{ href: '/styleguide/' } Back to Index
+  %hr
+  %section.sc-content
+    %ol.breadcrumb{ :'aria-label' => "breadcrumb", role: 'navigation', itemprop: 'breadcrumb', itemscope: '', itemtype: 'http://schema.org/BreadcrumbList'}
+      %li.breadcrumb__item{ itemscope: '', itemtype: 'http://data-vocabulary.org/Breadcrumb' }
+        %a{ itemprop: 'url', href: 'http://goto', :'aria-level' => '1'}
+          %span{ itemprop: 'title' } Stufe 1
+      %li.breadcrumb__item{ itemscope: '', itemtype: 'http://data-vocabulary.org/Breadcrumb' }
+        %a{ itemprop: 'url', href: 'http://goto', :'aria-level' => '2'}
+          %span{ itemprop: 'title' } Stufe 2
+      %li.breadcrumb__item{ itemscope: '', itemtype: 'http://data-vocabulary.org/Breadcrumb' }
+        %a{ itemprop: 'url', href: 'http://goto', :'aria-level' => '3'}
+          %span{ itemprop: 'title' } Stufe 3
+      %li.breadcrumb__item.breadcrumb__item--active{ itemscope: '', itemtype: 'http://data-vocabulary.org/Breadcrumb' }
+        %span{ itemprop: 'title' } Stufe 4

data/styleguide/source/styleguide/buttons.html.haml

@@ -0,0 +1,70 @@
+%article
+  %header
+    %h1 Buttons
+    %a{ href: '/styleguide/' } Back to Index
+  %hr
+  %section
+    %div
+      %pre
+        %code Default: .btn
+      %a.btn{href: '#'} LinkButton 1
+      %button.btn{href: '#'} Button 1
+    %hr.sc-hr-alternate
+    %div
+      %pre
+        %code Secondary: .btn.btn--secondary
+      %a.btn.btn--secondary{href: '#'} LinkButton 2
+      %button.btn.btn--secondary{href: '#'} Button 2
+    %hr.sc-hr-alternate
+    %div
+      %pre
+        %code Tertiary: .btn.btn--tertiary
+      %a.btn.btn--tertiary{href: '#'} LinkButton 3
+      %button.btn.btn--tertiary{href: '#'} Button 3
+    %hr.sc-hr-alternate
+    %div
+      %pre
+        %code Icon: .btn.btn--icon
+      %a.btn.btn--icon{href: '#'}
+        - streusel_icon( 'folder')
+      %button.btn.btn--icon{href: '#'}
+        - streusel_icon( 'folder')
+
+    %hr.sc-hr-alternate
+    %div
+      %pre
+        %code Expanded: .btn.btn--expanded
+      %a.btn.btn--expanded{href: '#'} Linkbutton Expanded
+      %button.btn.btn--expanded{href: '#'} Linkbutton Expanded
+    %hr.sc-hr-alternate
+    %div
+      %pre
+        %code Small: .btn.btn--small
+      %a.btn.btn--small{href: '#'} LinkButton Small
+      %button.btn.btn--small{href: '#'} Button Small
+    %hr.sc-hr-alternate
+    %div
+      %pre
+        %code Button Group: div.btn__group around buttons
+      .btn__group{ role: "group", :'aria-label' => "..." }
+        %a.btn{href: '#'} Button in Group 1
+        %a.btn{href: '#'} Button in Group 2
+        %a.btn{href: '#'} Button in Group 3
+
+    %hr.sc-hr-alternate
+    %div
+      %pre
+        %code All Buttons types with Icons inside
+      %a.btn{href: '#'}
+        Button with Icon
+        - streusel_icon( 'download')
+      %a.btn.btn--secondary{href: '#'}
+        - streusel_icon( 'download')
+        Button with Icon
+      %a.btn.btn--tertiary{href: '#'}
+        - streusel_icon( 'download')
+        Button with Icon
+      %a.btn{href: '#'}
+        - streusel_icon( 'search')
+      %a.btn.btn--icon{href: '#'}
+        - streusel_icon( 'folder')