partystreusel 1.1.1 → 1.2.0

data/styleguide/source/styleguide/teaser_card.html.haml

@@ -0,0 +1,79 @@
+%article
+  %header
+    %h1 Teaser Card
+    %a{ href: '/styleguide/' } Back to Index
+  %hr
+  %aside.teaser.teaser--card
+    .teaser__container
+      %section.teaser__item
+        %a.teaser__link{ href: '#'}
+          %img.teaser__img{ src: 'http://placehold.it/300x300&text=teaser'}
+          .teaser__content
+            %h3 Produkt oder Bereich
+            %p Preis 12 CHF oder ein Produkt Eigenschaft
+            %button.btn.btn--tertiary.teaser__btn Kaufen
+        %a.btn.btn--icon.teaser__link--secondary{ href: 'http://google.com' }
+          - streusel_icon( 'download')
+      %section.teaser__item
+        %a.teaser__link{ href: '#'}
+          %img.teaser__img{ src: 'http://placehold.it/300x300&text=teaser'}
+          .teaser__content
+            %h3 Produkt oder Bereich
+            %p Preis 12 CHF oder ein Produkt Eigenschaft
+            %button.btn.btn--tertiary.teaser__btn Kaufen
+        %a.btn.btn--icon.teaser__link--secondary{ href: 'http://google.com' }
+          - streusel_icon( 'download')
+      %section.teaser__item
+        %a.teaser__link{ href: '#'}
+          %img.teaser__img{ src: 'http://placehold.it/300x300&text=teaser'}
+          .teaser__content
+            %h3 Produkt oder Bereich
+            %p Preis 12 CHF oder ein Produkt Eigenschaft
+            %button.btn.btn--tertiary.teaser__btn Kaufen
+        %a.btn.btn--icon.teaser__link--secondary{ href: 'http://google.com' }
+          - streusel_icon( 'download')
+      %section.teaser__item
+        %a.teaser__link{ href: '#'}
+          %img.teaser__img{ src: 'http://placehold.it/300x300&text=teaser'}
+          .teaser__content
+            %h3 Produkt oder Bereich
+            %p Preis 12 CHF oder ein Produkt Eigenschaft
+            %button.btn.btn--tertiary.teaser__btn Kaufen
+        %a.btn.btn--icon.teaser__link--secondary{ href: 'http://google.com' }
+          - streusel_icon( 'download')
+      %section.teaser__item
+        %a.teaser__link{ href: '#'}
+          %img.teaser__img{ src: 'http://placehold.it/300x300&text=teaser'}
+          .teaser__content
+            %h3 Produkt oder Bereich
+            %p Preis 12 CHF oder ein Produkt Eigenschaft
+            %button.btn.btn--tertiary.teaser__btn Kaufen
+        %a.btn.btn--icon.teaser__link--secondary{ href: 'http://google.com' }
+          - streusel_icon( 'download')
+      %section.teaser__item
+        %a.teaser__link{ href: '#'}
+          %img.teaser__img{ src: 'http://placehold.it/300x300&text=teaser'}
+          .teaser__content
+            %h3 Produkt oder Bereich
+            %p Preis 12 CHF oder ein Produkt Eigenschaft
+            %button.btn.btn--tertiary.teaser__btn Kaufen
+        %a.btn.btn--icon.teaser__link--secondary{ href: 'http://google.com' }
+          - streusel_icon( 'download')
+      %section.teaser__item
+        %a.teaser__link{ href: '#'}
+          %img.teaser__img{ src: 'http://placehold.it/300x300&text=teaser'}
+          .teaser__content
+            %h3 Produkt oder Bereich
+            %p Preis 12 CHF oder ein Produkt Eigenschaft
+            %button.btn.btn--tertiary.teaser__btn Kaufen
+        %a.btn.btn--icon.teaser__link--secondary{ href: 'http://google.com' }
+          - streusel_icon( 'download')
+      %section.teaser__item
+        %a.teaser__link{ href: '#'}
+          %img.teaser__img{ src: 'http://placehold.it/300x300&text=teaser'}
+          .teaser__content
+            %h3 Produkt oder Bereich
+            %p Preis 12 CHF oder ein Produkt Eigenschaft
+            %button.btn.btn--tertiary.teaser__btn Kaufen
+        %a.btn.btn--icon.teaser__link--secondary{ href: 'http://google.com' }
+          - streusel_icon( 'download')

data/styleguide/source/styleguide/teaser_list.html.haml

@@ -0,0 +1,55 @@
+%article
+  %header
+    %h1 Teaser List
+    %a{ href: '/styleguide/' } Back to Index
+  %hr
+  %aside.teaser.teaser--list
+    .teaser__container
+      %section.teaser__item
+        %a.teaser__link{ href: '#'}
+          .teaser__img
+            %img{ src: 'http://placehold.it/140x210&text=4:6'}
+          .teaser__content
+            %h3 Aktuelles
+            %p Uci samust autemos sitibus magnam solme dolupta quidenem a cor susam.
+            %button.btn.btn--tertiary.teaser__btn Artikel lesen
+      %section.teaser__item
+        %a.teaser__link{ href: '#'}
+          .teaser__img
+            %img{ src: 'http://placehold.it/140x210&text=4:6'}
+          .teaser__content
+            %h3 Aktuelles
+            %p Uci samust autemos sitibus magnam solme dolupta quidenem a cor susam.
+            %button.btn.btn--tertiary.teaser__btn Artikel lesen
+      %section.teaser__item
+        %a.teaser__link{ href: '#'}
+          .teaser__img
+            %img{ src: 'http://placehold.it/140x210&text=4:6'}
+          .teaser__content
+            %h3 Aktuelles
+            %p Uci samust autemos sitibus magnam solme dolupta quidenem a cor susam.
+            %button.btn.btn--tertiary.teaser__btn Artikel lesen
+      %section.teaser__item
+        %a.teaser__link{ href: '#'}
+          .teaser__img
+            %img{ src: 'http://placehold.it/140x210&text=4:6'}
+          .teaser__content
+            %h3 Aktuelles
+            %p Uci samust autemos sitibus magnam solme dolupta quidenem a cor susam.
+            %button.btn.btn--tertiary.teaser__btn Artikel lesen
+      %section.teaser__item
+        %a.teaser__link{ href: '#'}
+          .teaser__img
+            %img{ src: 'http://placehold.it/140x210&text=4:6'}
+          .teaser__content
+            %h3 Aktuelles
+            %p Uci samust autemos sitibus magnam solme dolupta quidenem a cor susam.
+            %button.btn.btn--tertiary.teaser__btn Artikel lesen
+      %section.teaser__item
+        %a.teaser__link{ href: '#'}
+          .teaser__img
+            %img{ src: 'http://placehold.it/140x210&text=4:6'}
+          .teaser__content
+            %h3 Aktuelles
+            %p Uci samust autemos sitibus magnam solme dolupta quidenem a cor susam.
+            %button.btn.btn--tertiary.teaser__btn Artikel lesen

data/styleguide/source/styleguide/topbar.html.haml

@@ -0,0 +1,72 @@
+%article
+  %header
+    %h1 TopBar
+    %a{ href: '/styleguide/' } Back to Index
+  %hr
+  %pre closed on small
+  %nav.topbar.js-topbar{role: 'navigation'}
+    .topbar__mobile-menu
+      %button
+        Menu
+        - streusel_icon( 'menu')
+    %ul.topbar__list
+      %li.topbar__item
+        %a{ href: '#'} Nav content 1
+      %li.topbar__item.topbar__item--active
+        %a{ href: '#'} Nav active 1
+      %li.topbar__item
+        %a{ href: '#'} Nav long long 1
+      %li.topbar__item
+        %a{ href: '#'} Nav another 1
+      %li.topbar__item
+        %a{ href: '#'} Nav last 1
+
+  %hr.sc-hr-alternate
+  %pre 1lvl open on small (.topbar--open)
+  %nav.topbar.js-topbar.topbar--open{role: 'navigation'}
+    .topbar__mobile-menu
+      %button
+        Menu
+        - streusel_icon( 'menu')
+    %ul.topbar__list
+      %li.topbar__item
+        %a{ href: '#'} Nav content 1
+      %li.topbar__item.topbar__item--active
+        %a{ href: '#'} Nav active 1
+        %ul.topbar__sub-list
+          %li.topbar__sub-item
+            %a{ href: '#'} Nav content 1
+          %li.topbar__sub-item
+            %a{ href: '#'} Nav active 1
+      %li.topbar__item
+        %a{ href: '#'} Nav long long 1
+      %li.topbar__item
+        %a{ href: '#'} Nav another 1
+      %li.topbar__item
+        %a{ href: '#'} Nav last 1
+
+  %hr.sc-hr-alternate
+  %pre 1lvl open on small, 2lvl level open (.topbar__sub-list--open)
+  %nav.topbar.js-topbar.topbar--open{role: 'navigation'}
+    .topbar__mobile-menu
+      %button
+        Menu
+        - streusel_icon( 'menu')
+    %ul.topbar__list
+      %li.topbar__item
+        %a{ href: '#'} Nav with sub 1
+      %li.topbar__item.topbar__item--active
+        %a{ href: '#'} Nav with sub 1
+        %ul.topbar__sub-list.topbar__sub-list--open
+          %li.topbar__sub-item
+            %a{ href: '#'} Nav content 1
+          %li.topbar__sub-item
+            %a{ href: '#'} Nav active 1
+      %li.topbar__item
+        %a{ href: '#'} Nav long long 1 Nav long long 1 Nav long long 1
+      %li.topbar__item
+        %a{ href: '#'} Nav another 1
+      %li.topbar__item
+        %a{ href: '#'} Nav last 1
+
+  %hr.sc-hr-alternate

data/styleguide/source/styleguide/two_column.html.haml

@@ -0,0 +1,18 @@
+%article
+  %header
+    %h1 TWO COLUMN
+    %a{ href: '/styleguide/' } Back to Index
+  %hr
+
+  .two-column
+    .two-column__first
+      %section.sc-content
+        %h2 Lorem ipsum dolor sit amet
+        %p.sc-lead
+          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.
+
+    .two-column__second
+      %section.sc-content
+        %h2 Lorem ipsum dolor sit amet
+        %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.

data/styleguide/source/styleguide/typo.html.haml

@@ -0,0 +1,71 @@
+%article
+  %header
+    %h1 TYPO
+    %a{ href: '/styleguide/' } Back to Index
+  %hr
+  %h1 h1 A short heading
+  %h2 h2 A short heading
+  %h3 h3 A short heading
+  %h4 h4 A short heading
+  %h5 h5 A short heading
+  %h6 h6 A short heading
+  %p
+    The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds.
+    The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds.
+  %h1 h1 A long heading A long heading A long heading
+  %p
+    The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds. The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds.
+  %h2 h2 A short heading
+  %p
+    The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds. The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds.
+  %h3 h3 A short heading
+  %p
+    The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds. The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds.
+  %h4 h4 A short heading
+  %p
+    The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds. The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds.
+  %h5 h5 A short heading
+  %p
+    The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds. The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds.
+  %h6 h6 A short heading
+  %p
+    The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds. The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds.
+  %p
+    The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds. The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds.
+  %p
+    The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds. The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds.
+    %a{ href: '#' }
+      color is preset
+    to the Foundation primary color.
+    %strong
+      make it bold! You can also you to
+    %em
+      italicize your words
+    %small
+      small typo
+
+  %ul
+    %li List item with a much longer description or more content.
+    %li List item
+    %li List item
+    %ul
+      %li Nested List Item
+      %li Nested List Item
+      %li Nested List Item
+    %li List item
+    %li List item
+    %li List item
+
+  %ol
+    %li List Item 1
+    %li List Item 2
+    %li List Item 3
+
+  %p
+    The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds. The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds.
+
+  %blockquote
+    The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds.
+
+  %p
+    The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds. The difficulty lies, not in the new ideas, but in escaping the old ones, which ramify, for those brought up as most of us have been, into every corner of our minds.

data/styleguide/source/stylesheets/fallbacks/grunticon.loader.js

@@ -0,0 +1,3 @@
+/*! grunt-grunticon Stylesheet Loader - v2.1.6 | https://github.com/filamentgroup/grunticon | (c) 2015 Scott Jehl, Filament Group, Inc. | MIT license. */
+
+(function(e){function n(n,t,o,a){"use strict";var i=e.document.createElement("link"),r=t||e.document.getElementsByTagName("script")[0],d=e.document.styleSheets;return i.rel="stylesheet",i.href=n,i.media="only x",a&&(i.onload=a),r.parentNode.insertBefore(i,r),i.onloadcssdefined=function(e){for(var t,o=0;d.length>o;o++)d[o].href&&d[o].href.indexOf(n)>-1&&(t=!0);t?e():setTimeout(function(){i.onloadcssdefined(e)})},i.onloadcssdefined(function(){i.media=o||"all"}),i}function t(e,n){e.onload=function(){e.onload=null,n&&n.call(e)},"isApplicationInstalled"in navigator&&"onloadcssdefined"in e&&e.onloadcssdefined(n)}var o=function(a,i){"use strict";if(a&&3===a.length){var r=e.Image,d=!(!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===navigator.userAgent.indexOf("Chrome")||-1!==navigator.userAgent.indexOf("Series40")),c=new r;c.onerror=function(){o.method="png",o.href=a[2],n(a[2])},c.onload=function(){var e=1===c.width&&1===c.height,r=a[e&&d?0:e?1:2];o.method=e&&d?"svg":e?"datapng":"png",o.href=r,t(n(r),i)},c.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",document.documentElement.className+=" grunticon"}};o.loadCSS=n,o.onloadCSS=t,e.grunticon=o})(this);

data/styleguide/source/stylesheets/partystreusel/_helpers.sass

@@ -0,0 +1,10 @@
+.hide
+  display: none
+
+%clearfix
+  +clearfix
+
+%hide-text
+  font: 0/0 a
+  text-shadow: none
+  color: transparent

data/styleguide/source/stylesheets/partystreusel/_mixins.sass

@@ -0,0 +1,14 @@
+@function space($factor)
+  @return rem($default-space-value) * ($factor)
+
+=hide-text
+  font: 0/0 a
+  text-shadow: none
+  color: transparent
+
+=omega-reset($nth)
+  &:nth-child(#{$nth})
+    margin-right: +flex-gutter()
+
+  &:nth-child(#{$nth}+1)
+    clear: none

data/styleguide/source/stylesheets/partystreusel/_settings.sass

@@ -0,0 +1,129 @@
+// This is the the base for the em/rem mixins and the grid calculation.
+$em-base: 16px
+
+//////////////////////////////
+// GRID
+// --------------------------
+
+// Since the typical default browser font-size is 16px,
+// that makes the calculation for grid size.
+$gutter: em(20)
+$grid-columns: 12
+$max-width: rem(1200)
+$border-box-sizing: true
+
+// Debug Grid
+$visual-grid: false  // a helper to show the columns
+$visual-grid-color: #ff0000
+$visual-grid-index: back // or front
+$visual-grid-opacity: 0.1
+
+//////////////////////////////
+// MEDIA QUERIES & BREAKPOINTS
+// --------------------------
+
+// Media Query Ranges
+$medium-point: 33.75em // 540px
+$large-point:  50em    // 800px
+$xlarge-point:  75em    // 1200px
+
+$medium: new-breakpoint(min-width $medium-point 12)
+$large: new-breakpoint(min-width $large-point 12)
+$xlarge: new-breakpoint(min-width $xlarge-point 12)
+
+//////////////////////////////
+// COLOR & BASE
+// --------------------------
+
+// COLOR variables
+$black:       #333
+$white:       #fff
+$grey-dark:   rgb(172,172,172)
+$grey:        rgb(215,215,215)
+$grey-light:  rgb(240,240,240)
+$orange:      #F08A24
+$red:         #D60051
+$blue-light:  #A0D3E8
+$green:       #43AC6A
+
+// COLOR NAMING
+$primary-color:   $red
+$secondary-color: $grey
+$tertiary-color:  $black
+$alert-color:     $red
+$success-color:   $green
+$warning-color:   $orange
+$info-color:      $blue-light
+
+// Use these to control various global styles
+$body-bg: $white
+$body-font-color: $black
+$default-space-value: 12 // e.g. used for paddings
+
+//////////////////////////////
+// TYPOGRAPHY
+// --------------------------
+$line-height-factor: 1.2
+
+$body-font-family:  "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif
+$body-font-size:    100%
+$body-font-weight:  normal
+$body-font-style:   normal
+$body-line-height:  $line-height-factor
+
+// HEADINGS font styles
+$header-font-family:    $body-font-family
+$header-font-weight:    900
+$header-font-style:     normal
+$header-font-color:     $body-font-color
+$header-text-rendering: optimizeLegibility
+
+// HEADINGS sizes
+// Set here the font-sizes for small,
+// use the variable in small/base and redefine it in medium/large
+$h1-font-size: rem(36)
+$h2-font-size: rem(24)
+$h3-font-size: rem(19)
+$h4-font-size: rem(16)
+
+// HEADINGS line-heights
+$h1-line-height: 1
+$h2-line-height: 1
+$h3-line-height: 1.26
+$h4-line-height: 1.125
+
+// PARAGRAPHS
+$paragraph-font-family: inherit
+$paragraph-font-weight: normal
+$paragraph-font-size: rem(16)
+$paragraph-line-height: 1.5
+$paragraph-margin-bottom: rem(12)
+$paragraph-text-rendering: optimizeLegibility
+
+// <SMALL>
+$small-font-color: $grey-dark
+
+// ANCHORS
+$anchor-text-decoration: none
+$anchor-font-color: $primary-color
+$anchor-font-color-hover: $secondary-color
+
+// <HR>
+$hr-margin-top: rem(18)
+$hr-margin-bottom: $hr-margin-top
+$hr-border-width: rem(1)
+$hr-border-style: solid
+$hr-border-color: $body-font-color
+
+// LISTS
+$list-style-position: outside
+$list-side-margin: 0
+$list-nested-margin: 0
+$list-side-padding: rem(18)
+$list-ol-side-padding: rem(23)
+
+// BLOCKQUOTE
+$blockquote-font-family: inherit
+$blockquote-font-size: rem(16)
+$blockquote-font-style: italic
+$blockquote-margin: 0 0 $paragraph-margin-bottom 0

data/styleguide/source/stylesheets/partystreusel/_styleguide.sass

@@ -0,0 +1,32 @@
+.styleguide-nav
+  .offcanvas-nav
+
+    > li
+      padding-top: space(2)
+      margin-bottom: space(2)
+      border-top-color: $grey
+      border-top-width: rem(2)
+
+      &:first-child
+        border: 0
+
+      > a
+        font-weight: bold
+        font-size: rem(24)
+        pointer-events: none
+
+        &:hover
+          background-color: transparent
+          cursor: default
+          color: $body-font-color
+
+  .offcanvas-nav__sub
+    display: block
+
+    a
+      color: $primary-color
+      padding: space(.5) space(1) space(.5) space(2)
+
+      &:hover
+        background-color: transparent
+        color: $grey-dark

data/styleguide/source/stylesheets/partystreusel/all.css

@@ -0,0 +1,55 @@
+@charset "utf-8";
+
+body {
+  background: #d4d4d4 url("../images/background.png");
+  text-align: center;
+  font-family: sans-serif; }
+
+h1 {
+  color: rgba(0, 0, 0, .3);
+  font-weight: bold;
+  font-size: 32px;
+  letter-spacing: -1px;
+  text-transform: uppercase;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
+  background: url("../images/middleman.png") no-repeat center 100px;
+  padding: 350px 0 10px;
+  margin: 0; }
+
+.doc {
+  font-size: 14px;
+  margin: 0; }
+  .doc:before,
+  .doc:after {
+    opacity: .2;
+    padding: 6px;
+    font-style: normal;
+    position: relative;
+    content: "•"; }
+  .doc a {
+    color: rgba(0, 0, 0, 0.3); }
+    .doc a:hover {
+      color: #666; }
+
+.welcome {
+  -webkit-animation-name: welcome;
+  -webkit-animation-duration: .9s; }
+
+@-webkit-keyframes welcome {
+  from {
+    -webkit-transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+   -webkit-transform: scale(0);
+   opacity: 0;
+  }
+  82.5% {
+    -webkit-transform: scale(1.03);
+    -webkit-animation-timing-function: ease-out;
+    opacity: 1;
+  }
+  to {
+    -webkit-transform: scale(1);
+  }
+}

data/styleguide/source/stylesheets/partystreusel/application.css.sass

@@ -0,0 +1,94 @@
+// Normalize CSS
+#= require normalize-rails/normalize
+
+// Bourbon imports
+@import bourbon
+
+// Project settings
+@import neat-helpers
+@import settings
+
+// Bourbon Neat imports
+@import neat
+
+// Mixins & Helpers import
+@import helpers
+@import mixins
+
+// Project base styles
+@import small/typo
+
+// Project layout styles
+@import small/layout
+@import small/states
+
+// Project modules
+@import small/modules/icons
+@import small/modules/grid
+@import small/modules/button
+@import small/modules/dropdown
+@import small/modules/table
+@import small/modules/content
+@import small/modules/readmore
+@import small/modules/switch
+@import small/modules/form
+@import small/modules/options
+@import small/modules/tab
+@import small/modules/breadcrumb
+@import small/modules/topbar
+@import small/modules/iconbar
+@import small/modules/offcanvas
+@import small/modules/offcanvas_nav
+@import small/modules/accordion
+@import small/modules/slider
+@import small/modules/embeds
+@import small/modules/two_column
+@import small/modules/image
+@import small/modules/links
+@import small/modules/teaser
+@import small/modules/teaser--card
+@import small/modules/teaser--list
+@import small/modules/teaser--assets
+
+// IMPORT STYLESHEETS FOR MEDIUM VIEWPORT */
+@media screen and (min-width: #{$medium-point})
+  @import medium/typo
+
+  @import medium/modules/content
+  @import medium/modules/form
+  @import medium/modules/iconbar
+  @import medium/modules/links
+  @import medium/modules/teaser
+  @import medium/modules/teaser--card
+  @import medium/modules/teaser--list
+  @import medium/modules/teaser--assets
+
+// IMPORT STYLESHEETS FOR LARGE VIEWPORT */
+@media screen and (min-width: #{$large-point})
+  @import large/typo
+  @import large/layout
+  @import large/states
+
+  @import large/modules/content
+  @import large/modules/readmore
+  @import large/modules/form
+  @import large/modules/tab
+  @import large/modules/breadcrumb
+  @import large/modules/topbar
+  @import large/modules/accordion
+  @import large/modules/slider
+  @import large/modules/two_column
+  @import large/modules/image
+  @import large/modules/links
+  @import large/modules/teaser
+  @import large/modules/teaser--card
+  @import large/modules/teaser--list
+  @import large/modules/teaser--assets
+
+// IMPORT STYLESHEETS FOR X-LARGE VIEWPORT */
+@media screen and (min-width: #{$xlarge-point})
+
+  @import xlarge/modules/teaser_card
+  @import xlarge/modules/teaser_assets
+
+@import styleguide

data/styleguide/source/stylesheets/partystreusel/fallbacks/_icons_preview_template.hbs

@@ -0,0 +1,25 @@
+%article
+  %header
+    %h1 Icons
+    %a{ href: '/styleguide/' } Back to Index
+  %hr
+  %section.sc-content
+    %p.sc-lead
+      %strong This file is generated by Grunt.JS task. Don't change this file!
+      %br
+      %br
+      Use the following helper to include a icon:
+    %pre - streusel_icon( 'NAME' )
+    %p.sc-lead
+      Use the modifier classes "icon--m" & "icon--l" for different sizes:
+    %pre - streusel_icon( 'NAME', 'icon--m')
+
+    %hr
+    {{#each icons}}{{#with this}}
+    %div
+      %pre
+        %code {{name}}
+      - streusel_icon( '{{name}}')
+      - streusel_icon( '{{name}}', 'icon--m')
+      - streusel_icon( '{{name}}', 'icon--l')
+    %hr{{/with}}{{/each}}

data/styleguide/source/stylesheets/partystreusel/fallbacks/_icons_stylesheet_template.hbs

@@ -0,0 +1 @@
+{{#each customselectors}}{{this}},{{/each}}{{prefix}}{{name}} { background-image: url('{{datauri}}'); }