-
-
+
+
food truck yr franzen pabst
-
-
+
+
food truck yr franzen pabst
-
-
+
+
food truck yr franzen pabst
-
-
+
+
food truck yr franzen pabst
-
-
+
+
food truck yr franzen pabst
diff --git a/dist/plain-ui.css b/dist/plain-ui.css
index 0d49536..a478447 100644
--- a/dist/plain-ui.css
+++ b/dist/plain-ui.css
@@ -15,465 +15,3531 @@
font-style: normal;
font-display: swap;
}
-/**
- * functions
- *
- *
- * @author Björn Hase, Tentakelfabrik
- * @license http://opensource.org/licenses/MIT The MIT License
- * @link https://github.com/tentakelfabrik/crispy-css
- *
- */
-/**
- * strip unit from value
- *
- * @param {mixed} $value
- * @return {number}
- *
- */
-/**
- * get value of key "default" in map
- *
- * @param {map} $value
- * @return {boolean|unit}
- *
- */
-/**
- * factor
- *
- *
- *
- * @param {integer} $x
- * @return {float}
- *
- */
-/**
- * mixins
- *
- *
- * @author Björn Hase, Tentakelfabrik
- * @license http://opensource.org/licenses/MIT The MIT License
- * @link https://github.com/tentakelfabrik/plain-ui-css
- *
- */
-/**
- * Clear Floats
- *
- *
- *
- */
-/**
- * clear styles from list
- *
- *
- */
-/**
- * media-queries as mixins
- * based on breakpoints from variables
- *
- *
- *
- */
-/**
- * Set property and his value for each Breakpoint
- *
- * (
- * $plain-ui__md: 10px
- * )
- *
- *
- * @param {css} $property
- * @param {map} $breakpoints
- * @param {Boolean} $important [false]
- *
- */
-/**
- * Set property and his value with an factor for each Breakpoint
- *
- * (
- * $plain-ui__md: 10px
- * )
- *
- * @param {css} $property
- * @param {number} $factor
- * @param {map} $breakpoints
- * @param {Boolean} $important [false]
- *
- */
-/**
- * Set font-size from Breakpoints, use for calculating difference from font-size and default font-size
- *
- * (
- * $plain-ui__md: 1rem
- * )
- *
- * @param {map} $breakpoints
- * @param {unit} $font-size
- * @param {unit} $default
- * @param {Boolean} $important [false]
- *
- */
-/**
- * variables
- *
- *
- *
- * @author Björn Hase, Tentakelfabrik
- * @license http://opensource.org/licenses/MIT The MIT License
- * @link https://github.com/tentakelfabrik/plain-ui-css
- *
- */
-/**
- * breakpoints
- *
- */
-/**
- * fonts
- *
- */
-/**
- * colors
- *
- *
- */
-/**
- * padding & margin
- *
- */
-/**
- * heading
- *
- */
-/**
- * z-index
- *
- */
-/**
- * core
- *
- *
- * @author Björn Hase, Tentakelfabrik
- * @license http://opensource.org/licenses/MIT The MIT License
- * @link https://github.com/tentakelfabrik/crispy-css
- *
- */
-/**
- * normalize
- *
- * Thanks to https://necolas.github.io/normalize.css/, use a lot from them
- *
- * @author Björn Hase, Tentakelfabrik
- * @license http://opensource.org/licenses/MIT The MIT License
- * @link https://github.com/tentakelfabrik/crispy-css
- *
- */
-/**
- * Heading
- *
- *
- * @author Björn Hase, Tentakelfabrik
- * @license http://opensource.org/licenses/MIT The MIT License
- * @link https://github.com/tentakelfabrik/crispy-css
- *
- */
-/**
- * typograhy
- *
- * @author Björn Hase, Tentakelfabrik
- * @license http://opensource.org/licenses/MIT The MIT License
- * @link https://github.com/tentakelfabrik/crispy-css
- *
- */
-html {
- font-size: 100%;
- line-height: 1.15;
- -webkit-text-size-adjust: 100%;
+:root {
+ --reflex-columns: 12;
+ --reflex-grid-spacing: 15px;
+ --reflex-xs: 576px;
+ --reflex-sm: 768px;
+ --reflex-md: 992px;
+ --reflex-lg: 1200px;
+ --reflex-xlg: 1600px;
+ --reflex-xxs-max: 575px;
+ --reflex-xs-max: 767px;
+ --reflex-sm-max: 991px;
+ --reflex-md-max: 1199px;
+ --reflex-lg-max: 1599px;
}
-body,
-html {
- margin: 0;
- height: 100%;
+.container,
+.container-full {
+ box-sizing: border-box;
+ width: 100%;
+ margin-right: auto;
+ margin-left: auto;
+ padding-right: 30px;
+ padding-left: 30px;
+}
+.container .grid,
+.container-full .grid {
+ margin-right: -15px;
+ margin-left: -15px;
}
-html,
-legend {
- box-sizing: border-box;
+@media (min-width: 576px) {
+ .container {
+ max-width: 576px;
+ }
+}
+@media (min-width: 768px) {
+ .container {
+ max-width: 768px;
+ }
+}
+@media (min-width: 992px) {
+ .container {
+ max-width: 992px;
+ }
+}
+@media (min-width: 1200px) {
+ .container {
+ max-width: 1200px;
+ }
+}
+@media (min-width: 1600px) {
+ .container {
+ max-width: 1600px;
+ }
}
-main {
+.grid {
+ box-sizing: border-box;
display: block;
+ display: flex;
+ flex-wrap: wrap;
+ padding: 0;
+ margin: 0 auto;
+ position: relative;
+ letter-spacing: -0.31em;
+ *letter-spacing: normal;
+ word-spacing: -0.43em;
+ list-style-type: none;
+}
+.grid::before, .grid::after {
+ box-sizing: border-box;
+ letter-spacing: normal;
+ word-spacing: normal;
+ white-space: normal;
}
-*,
-*::after,
-*::before {
- box-sizing: inherit;
+[class*=col-] {
+ box-sizing: border-box;
+ letter-spacing: normal;
+ word-spacing: normal;
+ white-space: normal;
+ position: relative;
+ width: 100%;
+ vertical-align: top;
+ padding: 15px;
+ display: inline-block;
+ *display: inline;
+ zoom: 1;
+}
+[class*=col-]::before, [class*=col-]::after {
+ box-sizing: border-box;
+ letter-spacing: normal;
+ word-spacing: normal;
+ white-space: normal;
+}
+[class*=col-] .grid {
+ flex: 1 1 auto;
+ margin: -15px;
}
-table {
- border-collapse: collapse;
- border-spacing: 0;
+.col-12 {
+ width: 100%;
+ *width: 99.9%;
}
-figcaption {
- margin: 10px 0;
+.col-11 {
+ width: 91.6666666667%;
+ *width: 91.5666666667%;
}
-/**
- * form elements
- *
- *
- */
-button,
-input,
-optgroup,
-select,
-textarea {
- margin: 0;
+.col-10 {
+ width: 83.3333333333%;
+ *width: 83.2333333333%;
}
-button,
-select {
- text-transform: none;
+.col-9 {
+ width: 75%;
+ *width: 74.9%;
}
-button,
-[type=button],
-[type=reset],
-[type=submit] {
- -webkit-appearance: button;
+.col-8 {
+ width: 66.6666666667%;
+ *width: 66.5666666667%;
}
-button::-moz-focus-inner,
-[type=button]::-moz-focus-inner,
-[type=reset]::-moz-focus-inner,
-[type=submit]::-moz-focus-inner {
- border-style: none;
- padding: 0;
+.col-7 {
+ width: 58.3333333333%;
+ *width: 58.2333333333%;
+}
+
+.col-6 {
+ width: 50%;
+ *width: 49.9%;
+}
+
+.col-5 {
+ width: 41.6666666667%;
+ *width: 41.5666666667%;
+}
+
+.col-4 {
+ width: 33.3333333333%;
+ *width: 33.2333333333%;
+}
+
+.col-3 {
+ width: 25%;
+ *width: 24.9%;
+}
+
+.col-2 {
+ width: 16.6666666667%;
+ *width: 16.5666666667%;
+}
+
+.col-1 {
+ width: 8.3333333333%;
+ *width: 8.2333333333%;
+}
+
+@media (min-width: 576px) {
+ .col-xs-12 {
+ width: 100%;
+ *width: 99.9%;
+ }
+
+ .col-xs-11 {
+ width: 91.6666666667%;
+ *width: 91.5666666667%;
+ }
+
+ .col-xs-10 {
+ width: 83.3333333333%;
+ *width: 83.2333333333%;
+ }
+
+ .col-xs-9 {
+ width: 75%;
+ *width: 74.9%;
+ }
+
+ .col-xs-8 {
+ width: 66.6666666667%;
+ *width: 66.5666666667%;
+ }
+
+ .col-xs-7 {
+ width: 58.3333333333%;
+ *width: 58.2333333333%;
+ }
+
+ .col-xs-6 {
+ width: 50%;
+ *width: 49.9%;
+ }
+
+ .col-xs-5 {
+ width: 41.6666666667%;
+ *width: 41.5666666667%;
+ }
+
+ .col-xs-4 {
+ width: 33.3333333333%;
+ *width: 33.2333333333%;
+ }
+
+ .col-xs-3 {
+ width: 25%;
+ *width: 24.9%;
+ }
+
+ .col-xs-2 {
+ width: 16.6666666667%;
+ *width: 16.5666666667%;
+ }
+
+ .col-xs-1 {
+ width: 8.3333333333%;
+ *width: 8.2333333333%;
+ }
+}
+@media (min-width: 768px) {
+ .col-sm-12 {
+ width: 100%;
+ *width: 99.9%;
+ }
+
+ .col-sm-11 {
+ width: 91.6666666667%;
+ *width: 91.5666666667%;
+ }
+
+ .col-sm-10 {
+ width: 83.3333333333%;
+ *width: 83.2333333333%;
+ }
+
+ .col-sm-9 {
+ width: 75%;
+ *width: 74.9%;
+ }
+
+ .col-sm-8 {
+ width: 66.6666666667%;
+ *width: 66.5666666667%;
+ }
+
+ .col-sm-7 {
+ width: 58.3333333333%;
+ *width: 58.2333333333%;
+ }
+
+ .col-sm-6 {
+ width: 50%;
+ *width: 49.9%;
+ }
+
+ .col-sm-5 {
+ width: 41.6666666667%;
+ *width: 41.5666666667%;
+ }
+
+ .col-sm-4 {
+ width: 33.3333333333%;
+ *width: 33.2333333333%;
+ }
+
+ .col-sm-3 {
+ width: 25%;
+ *width: 24.9%;
+ }
+
+ .col-sm-2 {
+ width: 16.6666666667%;
+ *width: 16.5666666667%;
+ }
+
+ .col-sm-1 {
+ width: 8.3333333333%;
+ *width: 8.2333333333%;
+ }
+}
+@media (min-width: 992px) {
+ .col-md-12 {
+ width: 100%;
+ *width: 99.9%;
+ }
+
+ .col-md-11 {
+ width: 91.6666666667%;
+ *width: 91.5666666667%;
+ }
+
+ .col-md-10 {
+ width: 83.3333333333%;
+ *width: 83.2333333333%;
+ }
+
+ .col-md-9 {
+ width: 75%;
+ *width: 74.9%;
+ }
+
+ .col-md-8 {
+ width: 66.6666666667%;
+ *width: 66.5666666667%;
+ }
+
+ .col-md-7 {
+ width: 58.3333333333%;
+ *width: 58.2333333333%;
+ }
+
+ .col-md-6 {
+ width: 50%;
+ *width: 49.9%;
+ }
+
+ .col-md-5 {
+ width: 41.6666666667%;
+ *width: 41.5666666667%;
+ }
+
+ .col-md-4 {
+ width: 33.3333333333%;
+ *width: 33.2333333333%;
+ }
+
+ .col-md-3 {
+ width: 25%;
+ *width: 24.9%;
+ }
+
+ .col-md-2 {
+ width: 16.6666666667%;
+ *width: 16.5666666667%;
+ }
+
+ .col-md-1 {
+ width: 8.3333333333%;
+ *width: 8.2333333333%;
+ }
+}
+@media (min-width: 1200px) {
+ .col-lg-12 {
+ width: 100%;
+ *width: 99.9%;
+ }
+
+ .col-lg-11 {
+ width: 91.6666666667%;
+ *width: 91.5666666667%;
+ }
+
+ .col-lg-10 {
+ width: 83.3333333333%;
+ *width: 83.2333333333%;
+ }
+
+ .col-lg-9 {
+ width: 75%;
+ *width: 74.9%;
+ }
+
+ .col-lg-8 {
+ width: 66.6666666667%;
+ *width: 66.5666666667%;
+ }
+
+ .col-lg-7 {
+ width: 58.3333333333%;
+ *width: 58.2333333333%;
+ }
+
+ .col-lg-6 {
+ width: 50%;
+ *width: 49.9%;
+ }
+
+ .col-lg-5 {
+ width: 41.6666666667%;
+ *width: 41.5666666667%;
+ }
+
+ .col-lg-4 {
+ width: 33.3333333333%;
+ *width: 33.2333333333%;
+ }
+
+ .col-lg-3 {
+ width: 25%;
+ *width: 24.9%;
+ }
+
+ .col-lg-2 {
+ width: 16.6666666667%;
+ *width: 16.5666666667%;
+ }
+
+ .col-lg-1 {
+ width: 8.3333333333%;
+ *width: 8.2333333333%;
+ }
+}
+@media (min-width: 1600px) {
+ .col-xlg-12 {
+ width: 100%;
+ *width: 99.9%;
+ }
+
+ .col-xlg-11 {
+ width: 91.6666666667%;
+ *width: 91.5666666667%;
+ }
+
+ .col-xlg-10 {
+ width: 83.3333333333%;
+ *width: 83.2333333333%;
+ }
+
+ .col-xlg-9 {
+ width: 75%;
+ *width: 74.9%;
+ }
+
+ .col-xlg-8 {
+ width: 66.6666666667%;
+ *width: 66.5666666667%;
+ }
+
+ .col-xlg-7 {
+ width: 58.3333333333%;
+ *width: 58.2333333333%;
+ }
+
+ .col-xlg-6 {
+ width: 50%;
+ *width: 49.9%;
+ }
+
+ .col-xlg-5 {
+ width: 41.6666666667%;
+ *width: 41.5666666667%;
+ }
+
+ .col-xlg-4 {
+ width: 33.3333333333%;
+ *width: 33.2333333333%;
+ }
+
+ .col-xlg-3 {
+ width: 25%;
+ *width: 24.9%;
+ }
+
+ .col-xlg-2 {
+ width: 16.6666666667%;
+ *width: 16.5666666667%;
+ }
+
+ .col-xlg-1 {
+ width: 8.3333333333%;
+ *width: 8.2333333333%;
+ }
+}
+.col-auto {
+ flex: 1 0 0px;
+ width: auto;
+}
+
+@media (min-width: 576px) {
+ .col-xs-auto {
+ flex: 1 0 0px;
+ width: auto;
+ }
+}
+@media (min-width: 768px) {
+ .col-sm-auto {
+ flex: 1 0 0px;
+ width: auto;
+ }
+}
+@media (min-width: 992px) {
+ .col-md-auto {
+ flex: 1 0 0px;
+ width: auto;
+ }
+}
+@media (min-width: 1200px) {
+ .col-lg-auto {
+ flex: 1 0 0px;
+ width: auto;
+ }
+}
+@media (min-width: 1600px) {
+ .col-xlg-auto {
+ flex: 1 0 0px;
+ width: auto;
+ }
+}
+.order-12 {
+ order: 12;
+}
+
+.order-11 {
+ order: 11;
+}
+
+.order-10 {
+ order: 10;
+}
+
+.order-9 {
+ order: 9;
+}
+
+.order-8 {
+ order: 8;
+}
+
+.order-7 {
+ order: 7;
+}
+
+.order-6 {
+ order: 6;
+}
+
+.order-5 {
+ order: 5;
+}
+
+.order-4 {
+ order: 4;
+}
+
+.order-3 {
+ order: 3;
+}
+
+.order-2 {
+ order: 2;
+}
+
+.order-1 {
+ order: 1;
+}
+
+.order-0 {
+ order: 0;
+}
+
+@media (min-width: 576px) {
+ .order-xs-12 {
+ order: 12;
+ }
+
+ .order-xs-11 {
+ order: 11;
+ }
+
+ .order-xs-10 {
+ order: 10;
+ }
+
+ .order-xs-9 {
+ order: 9;
+ }
+
+ .order-xs-8 {
+ order: 8;
+ }
+
+ .order-xs-7 {
+ order: 7;
+ }
+
+ .order-xs-6 {
+ order: 6;
+ }
+
+ .order-xs-5 {
+ order: 5;
+ }
+
+ .order-xs-4 {
+ order: 4;
+ }
+
+ .order-xs-3 {
+ order: 3;
+ }
+
+ .order-xs-2 {
+ order: 2;
+ }
+
+ .order-xs-1 {
+ order: 1;
+ }
+
+ .order-xs-0 {
+ order: 0;
+ }
+}
+@media (min-width: 768px) {
+ .order-sm-12 {
+ order: 12;
+ }
+
+ .order-sm-11 {
+ order: 11;
+ }
+
+ .order-sm-10 {
+ order: 10;
+ }
+
+ .order-sm-9 {
+ order: 9;
+ }
+
+ .order-sm-8 {
+ order: 8;
+ }
+
+ .order-sm-7 {
+ order: 7;
+ }
+
+ .order-sm-6 {
+ order: 6;
+ }
+
+ .order-sm-5 {
+ order: 5;
+ }
+
+ .order-sm-4 {
+ order: 4;
+ }
+
+ .order-sm-3 {
+ order: 3;
+ }
+
+ .order-sm-2 {
+ order: 2;
+ }
+
+ .order-sm-1 {
+ order: 1;
+ }
+
+ .order-sm-0 {
+ order: 0;
+ }
+}
+@media (min-width: 992px) {
+ .order-md-12 {
+ order: 12;
+ }
+
+ .order-md-11 {
+ order: 11;
+ }
+
+ .order-md-10 {
+ order: 10;
+ }
+
+ .order-md-9 {
+ order: 9;
+ }
+
+ .order-md-8 {
+ order: 8;
+ }
+
+ .order-md-7 {
+ order: 7;
+ }
+
+ .order-md-6 {
+ order: 6;
+ }
+
+ .order-md-5 {
+ order: 5;
+ }
+
+ .order-md-4 {
+ order: 4;
+ }
+
+ .order-md-3 {
+ order: 3;
+ }
+
+ .order-md-2 {
+ order: 2;
+ }
+
+ .order-md-1 {
+ order: 1;
+ }
+
+ .order-md-0 {
+ order: 0;
+ }
+}
+@media (min-width: 1200px) {
+ .order-lg-12 {
+ order: 12;
+ }
+
+ .order-lg-11 {
+ order: 11;
+ }
+
+ .order-lg-10 {
+ order: 10;
+ }
+
+ .order-lg-9 {
+ order: 9;
+ }
+
+ .order-lg-8 {
+ order: 8;
+ }
+
+ .order-lg-7 {
+ order: 7;
+ }
+
+ .order-lg-6 {
+ order: 6;
+ }
+
+ .order-lg-5 {
+ order: 5;
+ }
+
+ .order-lg-4 {
+ order: 4;
+ }
+
+ .order-lg-3 {
+ order: 3;
+ }
+
+ .order-lg-2 {
+ order: 2;
+ }
+
+ .order-lg-1 {
+ order: 1;
+ }
+
+ .order-lg-0 {
+ order: 0;
+ }
+}
+@media (min-width: 1600px) {
+ .order-xlg-12 {
+ order: 12;
+ }
+
+ .order-xlg-11 {
+ order: 11;
+ }
+
+ .order-xlg-10 {
+ order: 10;
+ }
+
+ .order-xlg-9 {
+ order: 9;
+ }
+
+ .order-xlg-8 {
+ order: 8;
+ }
+
+ .order-xlg-7 {
+ order: 7;
+ }
+
+ .order-xlg-6 {
+ order: 6;
+ }
+
+ .order-xlg-5 {
+ order: 5;
+ }
+
+ .order-xlg-4 {
+ order: 4;
+ }
+
+ .order-xlg-3 {
+ order: 3;
+ }
+
+ .order-xlg-2 {
+ order: 2;
+ }
+
+ .order-xlg-1 {
+ order: 1;
+ }
+
+ .order-xlg-0 {
+ order: 0;
+ }
+}
+.offset-11 {
+ margin-left: 91.6666666667%;
+ *margin-left: 91.5666666667%;
+}
+
+.offset-10 {
+ margin-left: 83.3333333333%;
+ *margin-left: 83.2333333333%;
+}
+
+.offset-9 {
+ margin-left: 75%;
+ *margin-left: 74.9%;
+}
+
+.offset-8 {
+ margin-left: 66.6666666667%;
+ *margin-left: 66.5666666667%;
+}
+
+.offset-7 {
+ margin-left: 58.3333333333%;
+ *margin-left: 58.2333333333%;
+}
+
+.offset-6 {
+ margin-left: 50%;
+ *margin-left: 49.9%;
+}
+
+.offset-5 {
+ margin-left: 41.6666666667%;
+ *margin-left: 41.5666666667%;
+}
+
+.offset-4 {
+ margin-left: 33.3333333333%;
+ *margin-left: 33.2333333333%;
+}
+
+.offset-3 {
+ margin-left: 25%;
+ *margin-left: 24.9%;
+}
+
+.offset-2 {
+ margin-left: 16.6666666667%;
+ *margin-left: 16.5666666667%;
+}
+
+.offset-1 {
+ margin-left: 8.3333333333%;
+ *margin-left: 8.2333333333%;
+}
+
+@media (min-width: 576px) {
+ .offset-xs-11 {
+ margin-left: 91.6666666667%;
+ *margin-left: 91.5666666667%;
+ }
+
+ .offset-xs-10 {
+ margin-left: 83.3333333333%;
+ *margin-left: 83.2333333333%;
+ }
+
+ .offset-xs-9 {
+ margin-left: 75%;
+ *margin-left: 74.9%;
+ }
+
+ .offset-xs-8 {
+ margin-left: 66.6666666667%;
+ *margin-left: 66.5666666667%;
+ }
+
+ .offset-xs-7 {
+ margin-left: 58.3333333333%;
+ *margin-left: 58.2333333333%;
+ }
+
+ .offset-xs-6 {
+ margin-left: 50%;
+ *margin-left: 49.9%;
+ }
+
+ .offset-xs-5 {
+ margin-left: 41.6666666667%;
+ *margin-left: 41.5666666667%;
+ }
+
+ .offset-xs-4 {
+ margin-left: 33.3333333333%;
+ *margin-left: 33.2333333333%;
+ }
+
+ .offset-xs-3 {
+ margin-left: 25%;
+ *margin-left: 24.9%;
+ }
+
+ .offset-xs-2 {
+ margin-left: 16.6666666667%;
+ *margin-left: 16.5666666667%;
+ }
+
+ .offset-xs-1 {
+ margin-left: 8.3333333333%;
+ *margin-left: 8.2333333333%;
+ }
+
+ .offset-xs-0 {
+ margin-left: 0;
+ *margin-left: -0.1%;
+ }
+}
+@media (min-width: 768px) {
+ .offset-sm-11 {
+ margin-left: 91.6666666667%;
+ *margin-left: 91.5666666667%;
+ }
+
+ .offset-sm-10 {
+ margin-left: 83.3333333333%;
+ *margin-left: 83.2333333333%;
+ }
+
+ .offset-sm-9 {
+ margin-left: 75%;
+ *margin-left: 74.9%;
+ }
+
+ .offset-sm-8 {
+ margin-left: 66.6666666667%;
+ *margin-left: 66.5666666667%;
+ }
+
+ .offset-sm-7 {
+ margin-left: 58.3333333333%;
+ *margin-left: 58.2333333333%;
+ }
+
+ .offset-sm-6 {
+ margin-left: 50%;
+ *margin-left: 49.9%;
+ }
+
+ .offset-sm-5 {
+ margin-left: 41.6666666667%;
+ *margin-left: 41.5666666667%;
+ }
+
+ .offset-sm-4 {
+ margin-left: 33.3333333333%;
+ *margin-left: 33.2333333333%;
+ }
+
+ .offset-sm-3 {
+ margin-left: 25%;
+ *margin-left: 24.9%;
+ }
+
+ .offset-sm-2 {
+ margin-left: 16.6666666667%;
+ *margin-left: 16.5666666667%;
+ }
+
+ .offset-sm-1 {
+ margin-left: 8.3333333333%;
+ *margin-left: 8.2333333333%;
+ }
+
+ .offset-sm-0 {
+ margin-left: 0;
+ *margin-left: -0.1%;
+ }
+}
+@media (min-width: 992px) {
+ .offset-md-11 {
+ margin-left: 91.6666666667%;
+ *margin-left: 91.5666666667%;
+ }
+
+ .offset-md-10 {
+ margin-left: 83.3333333333%;
+ *margin-left: 83.2333333333%;
+ }
+
+ .offset-md-9 {
+ margin-left: 75%;
+ *margin-left: 74.9%;
+ }
+
+ .offset-md-8 {
+ margin-left: 66.6666666667%;
+ *margin-left: 66.5666666667%;
+ }
+
+ .offset-md-7 {
+ margin-left: 58.3333333333%;
+ *margin-left: 58.2333333333%;
+ }
+
+ .offset-md-6 {
+ margin-left: 50%;
+ *margin-left: 49.9%;
+ }
+
+ .offset-md-5 {
+ margin-left: 41.6666666667%;
+ *margin-left: 41.5666666667%;
+ }
+
+ .offset-md-4 {
+ margin-left: 33.3333333333%;
+ *margin-left: 33.2333333333%;
+ }
+
+ .offset-md-3 {
+ margin-left: 25%;
+ *margin-left: 24.9%;
+ }
+
+ .offset-md-2 {
+ margin-left: 16.6666666667%;
+ *margin-left: 16.5666666667%;
+ }
+
+ .offset-md-1 {
+ margin-left: 8.3333333333%;
+ *margin-left: 8.2333333333%;
+ }
+
+ .offset-md-0 {
+ margin-left: 0;
+ *margin-left: -0.1%;
+ }
+}
+@media (min-width: 1200px) {
+ .offset-lg-11 {
+ margin-left: 91.6666666667%;
+ *margin-left: 91.5666666667%;
+ }
+
+ .offset-lg-10 {
+ margin-left: 83.3333333333%;
+ *margin-left: 83.2333333333%;
+ }
+
+ .offset-lg-9 {
+ margin-left: 75%;
+ *margin-left: 74.9%;
+ }
+
+ .offset-lg-8 {
+ margin-left: 66.6666666667%;
+ *margin-left: 66.5666666667%;
+ }
+
+ .offset-lg-7 {
+ margin-left: 58.3333333333%;
+ *margin-left: 58.2333333333%;
+ }
+
+ .offset-lg-6 {
+ margin-left: 50%;
+ *margin-left: 49.9%;
+ }
+
+ .offset-lg-5 {
+ margin-left: 41.6666666667%;
+ *margin-left: 41.5666666667%;
+ }
+
+ .offset-lg-4 {
+ margin-left: 33.3333333333%;
+ *margin-left: 33.2333333333%;
+ }
+
+ .offset-lg-3 {
+ margin-left: 25%;
+ *margin-left: 24.9%;
+ }
+
+ .offset-lg-2 {
+ margin-left: 16.6666666667%;
+ *margin-left: 16.5666666667%;
+ }
+
+ .offset-lg-1 {
+ margin-left: 8.3333333333%;
+ *margin-left: 8.2333333333%;
+ }
+
+ .offset-lg-0 {
+ margin-left: 0;
+ *margin-left: -0.1%;
+ }
+}
+@media (min-width: 1600px) {
+ .offset-xlg-11 {
+ margin-left: 91.6666666667%;
+ *margin-left: 91.5666666667%;
+ }
+
+ .offset-xlg-10 {
+ margin-left: 83.3333333333%;
+ *margin-left: 83.2333333333%;
+ }
+
+ .offset-xlg-9 {
+ margin-left: 75%;
+ *margin-left: 74.9%;
+ }
+
+ .offset-xlg-8 {
+ margin-left: 66.6666666667%;
+ *margin-left: 66.5666666667%;
+ }
+
+ .offset-xlg-7 {
+ margin-left: 58.3333333333%;
+ *margin-left: 58.2333333333%;
+ }
+
+ .offset-xlg-6 {
+ margin-left: 50%;
+ *margin-left: 49.9%;
+ }
+
+ .offset-xlg-5 {
+ margin-left: 41.6666666667%;
+ *margin-left: 41.5666666667%;
+ }
+
+ .offset-xlg-4 {
+ margin-left: 33.3333333333%;
+ *margin-left: 33.2333333333%;
+ }
+
+ .offset-xlg-3 {
+ margin-left: 25%;
+ *margin-left: 24.9%;
+ }
+
+ .offset-xlg-2 {
+ margin-left: 16.6666666667%;
+ *margin-left: 16.5666666667%;
+ }
+
+ .offset-xlg-1 {
+ margin-left: 8.3333333333%;
+ *margin-left: 8.2333333333%;
+ }
+
+ .offset-xlg-0 {
+ margin-left: 0;
+ *margin-left: -0.1%;
+ }
+}
+.wrap {
+ flex-wrap: wrap;
+}
+
+.no-wrap {
+ flex-wrap: nowrap;
+}
+.no-wrap [class*=col-] {
+ flex-shrink: 1;
+}
+
+.wrap-reverse {
+ flex-wrap: wrap-reverse;
+}
+
+.direction-row {
+ flex-direction: row;
+}
+
+.direction-row-reverse {
+ flex-direction: row-reverse;
+}
+
+.direction-column {
+ flex-direction: column;
+}
+
+.direction-column-reverse {
+ flex-direction: column-reverse;
+}
+
+.align-start {
+ align-items: flex-start;
+}
+
+.align-end {
+ align-items: flex-end;
+}
+.align-end [class*=col-] {
+ vertical-align: bottom;
+}
+
+.align-center {
+ align-items: center;
+}
+.align-center [class*=col-] {
+ vertical-align: middle;
+}
+
+.align-baseline {
+ align-items: baseline;
+}
+
+.align-content-start {
+ align-content: flex-start;
+}
+
+.align-content-end {
+ align-content: flex-end;
+}
+.align-content-end [class*=col-] {
+ vertical-align: bottom;
+}
+
+.align-content-center {
+ align-content: center;
+}
+
+.align-content-space-between {
+ align-content: space-between;
+}
+
+.align-content-space-around {
+ align-content: space-around;
+}
+
+.align-self-stretch {
+ align-self: stretch;
+}
+
+.align-self-start {
+ align-self: flex-start;
+}
+
+.align-self-end {
+ align-self: flex-end;
+ vertical-align: bottom;
+}
+
+.align-self-center {
+ align-self: center;
+ vertical-align: middle;
+}
+
+.align-self-baseline {
+ align-self: baseline;
+ vertical-align: baseline;
+}
+
+.justify-start {
+ justify-content: flex-start;
+}
+.justify-start.grid {
+ text-align: left;
+}
+
+.justify-end {
+ justify-content: flex-end;
+}
+.justify-end.grid {
+ text-align: right;
+ -moz-text-align-last: right;
+ text-align-last: right;
+}
+.justify-end.grid [class*=col-] {
+ text-align: left;
+ text-align: start;
+ -moz-text-align-last: left;
+ -moz-text-align-last: start;
+ text-align-last: left;
+ text-align-last: start;
+}
+
+.justify-center {
+ justify-content: center;
+}
+.justify-center.grid {
+ text-align: center;
+ -moz-text-align-last: center;
+ text-align-last: center;
+}
+.justify-center.grid [class*=col-] {
+ text-align: left;
+ text-align: start;
+ -moz-text-align-last: left;
+ -moz-text-align-last: start;
+ text-align-last: left;
+ text-align-last: start;
+}
+
+.justify-space-between {
+ justify-content: space-between;
+}
+.justify-space-between.grid {
+ text-align: justify;
+ -moz-text-align-last: justify;
+ text-align-last: justify;
+}
+.justify-space-between.grid [class*=col-] {
+ text-align: left;
+ text-align: start;
+ -moz-text-align-last: left;
+ -moz-text-align-last: start;
+ text-align-last: left;
+ text-align-last: start;
+}
+
+.justify-space-around {
+ justify-content: space-around;
+}
+.justify-space-around.grid {
+ text-align: justify;
+ -moz-text-align-last: justify;
+ text-align-last: justify;
+}
+.justify-space-around.grid [class*=col-] {
+ text-align: left;
+ text-align: start;
+ -moz-text-align-last: left;
+ -moz-text-align-last: start;
+ text-align-last: left;
+ text-align-last: start;
+}
+
+.grid-bleed [class*=col-] {
+ padding: 0;
+}
+
+.col-grid {
+ display: flex;
+ flex-direction: column;
+}
+.col-grid.direction-row {
+ flex-direction: row;
+}
+
+.col-bleed {
+ padding: 0;
+}
+
+.col-bleed-x {
+ padding: 15px 0;
+}
+
+.col-bleed-y {
+ padding: 0 15px;
+}
+
+.flex-img {
+ display: block;
+ flex: 0 0 auto;
+ max-width: 100%;
+ height: auto;
+ width: 100%;
+ *width: auto;
+}
+
+.flex-footer {
+ width: 100%;
+ margin-top: auto;
+ margin-bottom: 0;
+}
+.flex-footer > :last-child {
+ margin-bottom: 0;
+}
+
+@media (min-width: 0px) and (max-width: 575px) {
+ .hidden-xxs {
+ display: none;
+ }
+}
+
+@media (min-width: 576px) {
+ .hidden-xs-up {
+ display: none;
+ }
+}
+
+@media (max-width: 767px) {
+ .hidden-xs-down {
+ display: none;
+ }
+}
+
+@media (min-width: 576px) and (max-width: 767px) {
+ .hidden-xs {
+ display: none;
+ }
+}
+
+@media (min-width: 768px) {
+ .hidden-sm-up {
+ display: none;
+ }
+}
+
+@media (max-width: 991px) {
+ .hidden-sm-down {
+ display: none;
+ }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+ .hidden-sm {
+ display: none;
+ }
+}
+
+@media (min-width: 992px) {
+ .hidden-md-up {
+ display: none;
+ }
+}
+
+@media (max-width: 1199px) {
+ .hidden-md-down {
+ display: none;
+ }
+}
+
+@media (min-width: 992px) and (max-width: 1199px) {
+ .hidden-md {
+ display: none;
+ }
+}
+
+@media (min-width: 1200px) {
+ .hidden-lg-up {
+ display: none;
+ }
+}
+
+@media (max-width: 1599px) {
+ .hidden-lg-down {
+ display: none;
+ }
+}
+
+@media (min-width: 1200px) and (max-width: 1599px) {
+ .hidden-lg {
+ display: none;
+ }
+}
+
+@media (min-width: 1600px) {
+ .hidden-xlg {
+ display: none;
+ }
+}
+
+/**
+ * functions
+ *
+ *
+ * @author Björn Hase, Tentakelfabrik
+ * @license http://opensource.org/licenses/MIT The MIT License
+ * @link https://github.com/tentakelfabrik/crispy-css
+ *
+ */
+/**
+ * strip unit from value
+ *
+ * @param {mixed} $value
+ * @return {number}
+ *
+ */
+/**
+ * get value of key "default" in map
+ *
+ * @param {map} $value
+ * @return {boolean|unit}
+ *
+ */
+/**
+ * factor
+ *
+ *
+ *
+ * @param {integer} $x
+ * @return {float}
+ *
+ */
+/**
+ * mixins
+ *
+ *
+ * @author Björn Hase, Tentakelfabrik
+ * @license http://opensource.org/licenses/MIT The MIT License
+ * @link https://github.com/tentakelfabrik/plain-ui-css
+ *
+ */
+/**
+ * Clear Floats
+ *
+ *
+ *
+ */
+/**
+ * clear styles from list
+ *
+ *
+ */
+/**
+ * media-queries as mixins
+ * based on breakpoints from variables
+ *
+ *
+ *
+ */
+/**
+ * Set property and his value for each Breakpoint
+ *
+ * (
+ * $plain-ui__md: 10px
+ * )
+ *
+ *
+ * @param {css} $property
+ * @param {map} $breakpoints
+ * @param {Boolean} $important [false]
+ *
+ */
+/**
+ * Set property and his value with an factor for each Breakpoint
+ *
+ * (
+ * $plain-ui__md: 10px
+ * )
+ *
+ * @param {css} $property
+ * @param {number} $factor
+ * @param {map} $breakpoints
+ * @param {Boolean} $important [false]
+ *
+ */
+/**
+ * Set font-size from Breakpoints, use for calculating difference from font-size and default font-size
+ *
+ * (
+ * $plain-ui__md: 1rem
+ * )
+ *
+ * @param {map} $breakpoints
+ * @param {unit} $font-size
+ * @param {unit} $default
+ * @param {Boolean} $important [false]
+ *
+ */
+/**
+ * variables
+ *
+ *
+ *
+ * @author Björn Hase, Tentakelfabrik
+ * @license http://opensource.org/licenses/MIT The MIT License
+ * @link https://github.com/tentakelfabrik/plain-ui-css
+ *
+ */
+/**
+ * breakpoints
+ *
+ */
+/**
+ * fonts
+ *
+ */
+/**
+ * colors
+ *
+ *
+ */
+/**
+ * padding & margin
+ *
+ */
+/**
+ * z-index
+ *
+ */
+/**
+ * core
+ *
+ *
+ * @author Björn Hase, Tentakelfabrik
+ * @license http://opensource.org/licenses/MIT The MIT License
+ * @link https://github.com/tentakelfabrik/crispy-css
+ *
+ */
+/**
+ * normalize
+ *
+ * Thanks to https://necolas.github.io/normalize.css/, use a lot from them
+ *
+ * @author Björn Hase, Tentakelfabrik
+ * @license http://opensource.org/licenses/MIT The MIT License
+ * @link https://github.com/tentakelfabrik/crispy-css
+ *
+ */
+/**
+ * Heading
+ *
+ *
+ * @author Björn Hase, Tentakelfabrik
+ * @license http://opensource.org/licenses/MIT The MIT License
+ * @link https://github.com/tentakelfabrik/crispy-css
+ *
+ */
+/**
+ * typograhy
+ *
+ * @author Björn Hase, Tentakelfabrik
+ * @license http://opensource.org/licenses/MIT The MIT License
+ * @link https://github.com/tentakelfabrik/crispy-css
+ *
+ */
+html {
+ font-size: 100%;
+ line-height: 1.15;
+ -webkit-text-size-adjust: 100%;
+}
+
+body,
+html {
+ margin: 0;
+ height: 100%;
+}
+
+html,
+legend {
+ box-sizing: border-box;
+}
+
+main {
+ display: block;
+}
+
+*,
+*::after,
+*::before {
+ box-sizing: inherit;
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+figcaption {
+ margin: 10px 0;
+}
+
+/**
+ * form elements
+ *
+ *
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+ margin: 0;
+}
+
+button,
+select {
+ text-transform: none;
+}
+
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+ -webkit-appearance: button;
+}
+
+button::-moz-focus-inner,
+[type=button]::-moz-focus-inner,
+[type=reset]::-moz-focus-inner,
+[type=submit]::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+
+button:-moz-focusring,
+[type=button]:-moz-focusring,
+[type=reset]:-moz-focusring,
+[type=submit]:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+
+legend {
+ box-sizing: border-box;
+ display: table;
+ max-width: 100%;
+ padding: 0;
+ white-space: normal;
+}
+
+[type=number]::-webkit-inner-spin-button,
+[type=number]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+[type=search] {
+ -webkit-appearance: textfield;
+ outline-offset: -2px;
+}
+
+[type=search]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ font: inherit;
+}
+
+/**
+ * hr
+ *
+ */
+hr {
+ box-sizing: content-box;
+ height: 0;
+ overflow: visible;
+ border: 0;
+ margin: 0.3em 0;
+}
+
+progress {
+ vertical-align: baseline;
+}
+
+details {
+ display: block;
+}
+
+summary {
+ display: list-item;
+}
+
+h1, .h1,
+h2, .h2,
+h3, .h3,
+h4, .h4,
+h5, .h5,
+h6, .h6 {
+ font-family: "IBM Plex Mono", sans-serif;
+ font-weight: bold;
+ line-height: 1.2;
+ margin: 0 0 15px;
+}
+@media only screen and (min-width: 992px) {
+ h1, .h1,
+h2, .h2,
+h3, .h3,
+h4, .h4,
+h5, .h5,
+h6, .h6 {
+ margin: 0 0 20px;
+ }
+}
+
+h5 {
+ line-height: 1.4;
+}
+
+h6 {
+ line-height: 1.4;
+}
+
+h1, .h1 {
+ font-size: 2.5rem;
+}
+@media only screen and (min-width: 992px) {
+ h1, .h1 {
+ font-size: 3rem;
+ }
+}
+
+h2, .h2 {
+ font-size: 2rem;
+}
+@media only screen and (min-width: 992px) {
+ h2, .h2 {
+ font-size: 2.4rem;
+ }
+}
+
+h3, .h3 {
+ font-size: 1.75rem;
+}
+@media only screen and (min-width: 992px) {
+ h3, .h3 {
+ font-size: 2.1rem;
+ }
+}
+
+h4, .h4 {
+ font-size: 1.5rem;
+}
+@media only screen and (min-width: 992px) {
+ h4, .h4 {
+ font-size: 1.8rem;
+ }
+}
+
+h5, .h5 {
+ font-size: 1.25rem;
+}
+@media only screen and (min-width: 992px) {
+ h5, .h5 {
+ font-size: 1.5rem;
+ }
+}
+
+h6, .h6 {
+ font-size: 1rem;
+}
+@media only screen and (min-width: 992px) {
+ h6, .h6 {
+ font-size: 1.2rem;
+ }
+}
+
+p {
+ margin: 0 0 15px;
+}
+
+a,
+ins,
+u {
+ -webkit-text-decoration-skip: ink edges;
+ text-decoration-skip: ink edges;
+}
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+sub,
+sup {
+ font-size: 70%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+abbr[title] {
+ border-bottom: 1px dotted;
+ cursor: help;
+ text-decoration: none;
+}
+
+mark {
+ padding: 0.25em;
+}
+
+/**
+ * blockquote
+ *
+ *
+ */
+blockquote {
+ border-left: 1px solid #3e3e3e;
+ margin-left: 0;
+ padding: 5px 12px;
+}
+blockquote p:last-child {
+ margin-bottom: 0;
+}
+
+/**
+ * lists
+ *
+ */
+dl,
+ol,
+ul {
+ padding: 0;
+ margin: 0 0 15px;
+}
+
+ol,
+ul {
+ margin-left: 1.5em;
+}
+
+ol ol,
+ul ul {
+ margin-top: 0;
+ margin-left: 1em;
+}
+
+ol {
+ list-style: decimal outside;
+}
+
+ul {
+ list-style: disc outside;
+}
+
+dl {
+ margin-left: 0.5em;
+}
+
+dd,
+dt {
+ margin: 0;
+}
+
+dt {
+ font-weight: bold;
+}
+
+/**
+ *
+ *
+ *
+ *
+ */
+/**
+ *
+ *
+ *
+ *
+ */
+/**
+ *
+ *
+ *
+ */
+/**
+ *
+ *
+ *
+ *
+ */
+/**
+ *
+ *
+ *
+ *
+ */
+/**
+ *
+ * 
+ *
+ * food truck yr franzen pabst
+ *
+ *
+ *
+ */
+/**
+ *
+ *
+ *
+ */
+/**
+ *
+ *
+ */
+/**
+ *
+ *
+ *
+ *
+ */
+/**
+ * masonry
+ *
+ *
- *
- *
- * food truck yr franzen pabst
- *
- *
- *
- */
-/**
- *
- *
- *
- */
-/**
- *
- *
- */
-/**
- *
- *
- *
- *
- */
-/**
- *
- *
- *
- *
- */
a {
color: #fff;
}
@@ -519,6 +3585,103 @@ body {
border-radius: 0 !important;
}
+/**
+ * z-index
+ *
+ *
+ */
+.z-index-1 {
+ z-index: 1;
+}
+
+.z-index-2 {
+ z-index: 2;
+}
+
+.z-index-3 {
+ z-index: 3;
+}
+
+.z-index-4 {
+ z-index: 4;
+}
+
+.z-index-5 {
+ z-index: 5;
+}
+
+.z-index-6 {
+ z-index: 6;
+}
+
+.z-index-7 {
+ z-index: 7;
+}
+
+.z-index-8 {
+ z-index: 8;
+}
+
+.z-index-9 {
+ z-index: 9;
+}
+
+.z-index-10 {
+ z-index: 10;
+}
+
+/**
+ *
+ *
+ */
+.w-col-1 {
+ width: 8.3333333333%;
+}
+
+.w-col-2 {
+ width: 16.6666666667%;
+}
+
+.w-col-3 {
+ width: 25%;
+}
+
+.w-col-4 {
+ width: 33.3333333333%;
+}
+
+.w-col-5 {
+ width: 41.6666666667%;
+}
+
+.w-col-6 {
+ width: 50%;
+}
+
+.w-col-7 {
+ width: 58.3333333333%;
+}
+
+.w-col-8 {
+ width: 66.6666666667%;
+}
+
+.w-col-9 {
+ width: 75%;
+}
+
+.w-col-10 {
+ width: 83.3333333333%;
+}
+
+.w-col-11 {
+ width: 91.6666666667%;
+}
+
+.w-col-12 {
+ width: 100%;
+}
+
/**
*
*
@@ -754,7 +3917,8 @@ body {
-moz-appearance: none;
appearance: none;
position: relative;
- display: inline-block;
+ display: inline-flex;
+ align-items: center;
text-decoration: none;
font-family: "IBM Plex Mono", sans-serif;
border: 1px solid #3e3e3e;
@@ -763,7 +3927,8 @@ body {
border-radius: 2px;
transition: background-color 0.1s;
margin-bottom: 0.5em;
- padding: 0.5em 1.3em;
+ padding: 0 1.3em;
+ min-height: 2.8em;
font-size: 1rem;
width: 100%;
}
diff --git a/src/scss/_core.scss b/src/scss/_core.scss
index b8c9bd6..6a0d357 100644
--- a/src/scss/_core.scss
+++ b/src/scss/_core.scss
@@ -15,8 +15,7 @@
@include plain-ui__core__normalize();
@include plain-ui__core__heading();
-
-//@include plain__core__typography();
+@include plain-ui__core__typography();
@mixin plain-ui__core() {
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index d8c8dd6..8155a60 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -92,30 +92,6 @@ $plain-ui__padding-breakpoints: (
) !default;
-/**
- * heading
- *
- */
-
-$plain-ui__heading__font-sizes: (
- 'h1': $plain-ui__font-size * 2.5,
- 'h2': $plain-ui__font-size * 2,
- 'h3': $plain-ui__font-size * 1.75,
- 'h4': $plain-ui__font-size * 1.5,
- 'h5': $plain-ui__font-size * 1.25,
- 'h6': $plain-ui__font-size
-) !default;
-
-$plain-ui__heading__font-sizes__breakpoints: (
- $plain-ui__md: 1.2rem
-) !default;
-
-$plain-ui__heading__font-weight: bold !default;
-$plain-ui__heading__font-family: $plain-ui__font-family !default;
-$plain-ui__heading__margin: $plain-ui__margin !default;
-$plain-ui__heading__margin-breakpoints: $plain-ui__margin-breakpoints !default;
-
-
/**
* z-index
*
diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss
index 067943d..faa8832 100644
--- a/src/scss/components/_button.scss
+++ b/src/scss/components/_button.scss
@@ -10,7 +10,9 @@
appearance: none;
position: relative;
- display: inline-block;
+
+ display: inline-flex;
+ align-items: center;
text-decoration: none;
font-family: $plain-ui__font-family;
@@ -23,7 +25,9 @@
transition: background-color 0.1s;
margin-bottom: 0.5em;
- padding: 0.5em 1.3em;
+ padding: 0 1.3em;
+ min-height: 2.8em;
+
font-size: 1rem;
width: 100%;
diff --git a/src/scss/core/_content.scss b/src/scss/core/_content.scss
new file mode 100644
index 0000000..e478adc
--- /dev/null
+++ b/src/scss/core/_content.scss
@@ -0,0 +1,16 @@
+/**
+ * Heading
+ *
+ *
+ * @author Björn Hase, Tentakelfabrik
+ * @license http://opensource.org/licenses/MIT The MIT License
+ * @link https://github.com/tentakelfabrik/crispy-css
+ *
+ */
+
+@mixin plain-ui__core__content()
+{
+ .content {
+
+ }
+}
\ No newline at end of file
diff --git a/src/scss/core/_heading.scss b/src/scss/core/_heading.scss
index 5aa02eb..a6068b6 100644
--- a/src/scss/core/_heading.scss
+++ b/src/scss/core/_heading.scss
@@ -10,6 +10,24 @@
@mixin plain-ui__core__heading()
{
+ $plain-ui__heading__font-sizes: (
+ 'h1': $plain-ui__font-size * 2.5,
+ 'h2': $plain-ui__font-size * 2,
+ 'h3': $plain-ui__font-size * 1.75,
+ 'h4': $plain-ui__font-size * 1.5,
+ 'h5': $plain-ui__font-size * 1.25,
+ 'h6': $plain-ui__font-size
+ ) !default;
+
+ $plain-ui__heading__font-sizes__breakpoints: (
+ $plain-ui__md: 1.2rem
+ ) !default;
+
+ $plain-ui__heading__font-weight: bold !default;
+ $plain-ui__heading__font-family: $plain-ui__font-family !default;
+ $plain-ui__heading__margin: $plain-ui__margin !default;
+ $plain-ui__heading__margin-breakpoints: $plain-ui__margin-breakpoints !default;
+
h1, .h1,
h2, .h2,
h3, .h3,
diff --git a/src/scss/core/helpers/_sizing.scss b/src/scss/core/helpers/_sizing.scss
deleted file mode 100644
index 1171fe0..0000000
--- a/src/scss/core/helpers/_sizing.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- *
- *
- *
- *
- */
-
-@mixin plain-ui__helpers__sizing()
-{
-
-}
\ No newline at end of file
diff --git a/src/scss/core/helpers/_core.scss b/src/scss/helpers/_core.scss
similarity index 90%
rename from src/scss/core/helpers/_core.scss
rename to src/scss/helpers/_core.scss
index 4d50e3e..4e1ae50 100644
--- a/src/scss/core/helpers/_core.scss
+++ b/src/scss/helpers/_core.scss
@@ -29,6 +29,31 @@
border-radius: 0 !important;
}
+ /**
+ * z-index
+ *
+ *
+ */
+
+ $plain-ui__z-index: 10;
+
+ @for $i from 1 through $plain-ui__z-index {
+ .z-index-#{$i} {
+ z-index: $i;
+ }
+ }
+
+ /**
+ *
+ *
+ */
+
+ @for $i from 1 through $reflex-columns {
+ .w-col-#{$i} {
+ width: percentage(($i / $reflex-columns));
+ }
+ }
+
/**
*
*
diff --git a/src/scss/layout/_flex.scss b/src/scss/layout/_flex.scss
index 70e1c7d..7ddf283 100644
--- a/src/scss/layout/_flex.scss
+++ b/src/scss/layout/_flex.scss
@@ -1,4 +1,3 @@
@import 'reflex-grid';
-$reflex-prefix: 'flex';
$legacy-support: false;
\ No newline at end of file
diff --git a/src/scss/layout/_masonry.scss b/src/scss/layout/_masonry.scss
index b4ab861..2e2523d 100644
--- a/src/scss/layout/_masonry.scss
+++ b/src/scss/layout/_masonry.scss
@@ -1,10 +1,25 @@
/**
+ * masonry
*
+ *
+ * 
+ *
+ *
+ */
+/**
+ *
+ *
+ *
+ */
+/**
+ *
+ *
+ *
+ */
+/**
+ *
+ *
+ *
+ *
+ *
+ */
+:root {
+ --reflex-columns: 12;
+ --reflex-grid-spacing: 15px;
+ --reflex-xs: 576px;
+ --reflex-sm: 768px;
+ --reflex-md: 992px;
+ --reflex-lg: 1200px;
+ --reflex-xlg: 1600px;
+ --reflex-xxs-max: 575px;
+ --reflex-xs-max: 767px;
+ --reflex-sm-max: 991px;
+ --reflex-md-max: 1199px;
+ --reflex-lg-max: 1599px;
+}
+
+.container,
+.container-full {
+ box-sizing: border-box;
+ width: 100%;
+ margin-right: auto;
+ margin-left: auto;
+ padding-right: 30px;
+ padding-left: 30px;
+}
+
+.container .grid,
+.container-full .grid {
+ margin-right: -15px;
+ margin-left: -15px;
+}
+
+@media (min-width: 576px) {
+ .container {
+ max-width: 576px;
+ }
+}
+@media (min-width: 768px) {
+ .container {
+ max-width: 768px;
+ }
+}
+@media (min-width: 992px) {
+ .container {
+ max-width: 992px;
+ }
+}
+@media (min-width: 1200px) {
+ .container {
+ max-width: 1200px;
+ }
+}
+@media (min-width: 1600px) {
+ .container {
+ max-width: 1600px;
+ }
+}
+.grid {
+ box-sizing: border-box;
+ display: block;
+ display: flex;
+ flex-wrap: wrap;
+ padding: 0;
+ margin: 0 auto;
+ position: relative;
+ letter-spacing: -0.31em;
+ *letter-spacing: normal;
+ word-spacing: -0.43em;
+ list-style-type: none;
+}
+
+.grid::before, .grid::after {
+ box-sizing: border-box;
+ letter-spacing: normal;
+ word-spacing: normal;
+ white-space: normal;
+}
+
+[class*=col-] {
+ box-sizing: border-box;
+ letter-spacing: normal;
+ word-spacing: normal;
+ white-space: normal;
+ position: relative;
+ width: 100%;
+ vertical-align: top;
+ padding: 15px;
+ display: inline-block;
+ *display: inline;
+ zoom: 1;
+}
+
+[class*=col-]::before, [class*=col-]::after {
+ box-sizing: border-box;
+ letter-spacing: normal;
+ word-spacing: normal;
+ white-space: normal;
+}
+
+[class*=col-] .grid {
+ flex: 1 1 auto;
+ margin: -15px;
+}
+
+.col-12 {
+ width: 100%;
+ *width: 99.9%;
+}
+
+.col-11 {
+ width: 91.66666667%;
+ *width: 91.56666667%;
+}
+
+.col-10 {
+ width: 83.33333333%;
+ *width: 83.23333333%;
+}
+
+.col-9 {
+ width: 75%;
+ *width: 74.9%;
+}
+
+.col-8 {
+ width: 66.66666667%;
+ *width: 66.56666667%;
+}
+
+.col-7 {
+ width: 58.33333333%;
+ *width: 58.23333333%;
+}
+
+.col-6 {
+ width: 50%;
+ *width: 49.9%;
+}
+
+.col-5 {
+ width: 41.66666667%;
+ *width: 41.56666667%;
+}
+
+.col-4 {
+ width: 33.33333333%;
+ *width: 33.23333333%;
+}
+
+.col-3 {
+ width: 25%;
+ *width: 24.9%;
+}
+
+.col-2 {
+ width: 16.66666667%;
+ *width: 16.56666667%;
+}
+
+.col-1 {
+ width: 8.33333333%;
+ *width: 8.23333333%;
+}
+
+@media (min-width: 576px) {
+ .col-xs-12 {
+ width: 100%;
+ *width: 99.9%;
+ }
+
+ .col-xs-11 {
+ width: 91.66666667%;
+ *width: 91.56666667%;
+ }
+
+ .col-xs-10 {
+ width: 83.33333333%;
+ *width: 83.23333333%;
+ }
+
+ .col-xs-9 {
+ width: 75%;
+ *width: 74.9%;
+ }
+
+ .col-xs-8 {
+ width: 66.66666667%;
+ *width: 66.56666667%;
+ }
+
+ .col-xs-7 {
+ width: 58.33333333%;
+ *width: 58.23333333%;
+ }
+
+ .col-xs-6 {
+ width: 50%;
+ *width: 49.9%;
+ }
+
+ .col-xs-5 {
+ width: 41.66666667%;
+ *width: 41.56666667%;
+ }
+
+ .col-xs-4 {
+ width: 33.33333333%;
+ *width: 33.23333333%;
+ }
+
+ .col-xs-3 {
+ width: 25%;
+ *width: 24.9%;
+ }
+
+ .col-xs-2 {
+ width: 16.66666667%;
+ *width: 16.56666667%;
+ }
+
+ .col-xs-1 {
+ width: 8.33333333%;
+ *width: 8.23333333%;
+ }
+}
+@media (min-width: 768px) {
+ .col-sm-12 {
+ width: 100%;
+ *width: 99.9%;
+ }
+
+ .col-sm-11 {
+ width: 91.66666667%;
+ *width: 91.56666667%;
+ }
+
+ .col-sm-10 {
+ width: 83.33333333%;
+ *width: 83.23333333%;
+ }
+
+ .col-sm-9 {
+ width: 75%;
+ *width: 74.9%;
+ }
+
+ .col-sm-8 {
+ width: 66.66666667%;
+ *width: 66.56666667%;
+ }
+
+ .col-sm-7 {
+ width: 58.33333333%;
+ *width: 58.23333333%;
+ }
+
+ .col-sm-6 {
+ width: 50%;
+ *width: 49.9%;
+ }
+
+ .col-sm-5 {
+ width: 41.66666667%;
+ *width: 41.56666667%;
+ }
+
+ .col-sm-4 {
+ width: 33.33333333%;
+ *width: 33.23333333%;
+ }
+
+ .col-sm-3 {
+ width: 25%;
+ *width: 24.9%;
+ }
+
+ .col-sm-2 {
+ width: 16.66666667%;
+ *width: 16.56666667%;
+ }
+
+ .col-sm-1 {
+ width: 8.33333333%;
+ *width: 8.23333333%;
+ }
+}
+@media (min-width: 992px) {
+ .col-md-12 {
+ width: 100%;
+ *width: 99.9%;
+ }
+
+ .col-md-11 {
+ width: 91.66666667%;
+ *width: 91.56666667%;
+ }
+
+ .col-md-10 {
+ width: 83.33333333%;
+ *width: 83.23333333%;
+ }
+
+ .col-md-9 {
+ width: 75%;
+ *width: 74.9%;
+ }
+
+ .col-md-8 {
+ width: 66.66666667%;
+ *width: 66.56666667%;
+ }
+
+ .col-md-7 {
+ width: 58.33333333%;
+ *width: 58.23333333%;
+ }
+
+ .col-md-6 {
+ width: 50%;
+ *width: 49.9%;
+ }
+
+ .col-md-5 {
+ width: 41.66666667%;
+ *width: 41.56666667%;
+ }
+
+ .col-md-4 {
+ width: 33.33333333%;
+ *width: 33.23333333%;
+ }
+
+ .col-md-3 {
+ width: 25%;
+ *width: 24.9%;
+ }
+
+ .col-md-2 {
+ width: 16.66666667%;
+ *width: 16.56666667%;
+ }
+
+ .col-md-1 {
+ width: 8.33333333%;
+ *width: 8.23333333%;
+ }
+}
+@media (min-width: 1200px) {
+ .col-lg-12 {
+ width: 100%;
+ *width: 99.9%;
+ }
+
+ .col-lg-11 {
+ width: 91.66666667%;
+ *width: 91.56666667%;
+ }
+
+ .col-lg-10 {
+ width: 83.33333333%;
+ *width: 83.23333333%;
+ }
+
+ .col-lg-9 {
+ width: 75%;
+ *width: 74.9%;
+ }
+
+ .col-lg-8 {
+ width: 66.66666667%;
+ *width: 66.56666667%;
+ }
+
+ .col-lg-7 {
+ width: 58.33333333%;
+ *width: 58.23333333%;
+ }
+
+ .col-lg-6 {
+ width: 50%;
+ *width: 49.9%;
+ }
+
+ .col-lg-5 {
+ width: 41.66666667%;
+ *width: 41.56666667%;
+ }
+
+ .col-lg-4 {
+ width: 33.33333333%;
+ *width: 33.23333333%;
+ }
+
+ .col-lg-3 {
+ width: 25%;
+ *width: 24.9%;
+ }
+
+ .col-lg-2 {
+ width: 16.66666667%;
+ *width: 16.56666667%;
+ }
+
+ .col-lg-1 {
+ width: 8.33333333%;
+ *width: 8.23333333%;
+ }
+}
+@media (min-width: 1600px) {
+ .col-xlg-12 {
+ width: 100%;
+ *width: 99.9%;
+ }
+
+ .col-xlg-11 {
+ width: 91.66666667%;
+ *width: 91.56666667%;
+ }
+
+ .col-xlg-10 {
+ width: 83.33333333%;
+ *width: 83.23333333%;
+ }
+
+ .col-xlg-9 {
+ width: 75%;
+ *width: 74.9%;
+ }
+
+ .col-xlg-8 {
+ width: 66.66666667%;
+ *width: 66.56666667%;
+ }
+
+ .col-xlg-7 {
+ width: 58.33333333%;
+ *width: 58.23333333%;
+ }
+
+ .col-xlg-6 {
+ width: 50%;
+ *width: 49.9%;
+ }
+
+ .col-xlg-5 {
+ width: 41.66666667%;
+ *width: 41.56666667%;
+ }
+
+ .col-xlg-4 {
+ width: 33.33333333%;
+ *width: 33.23333333%;
+ }
+
+ .col-xlg-3 {
+ width: 25%;
+ *width: 24.9%;
+ }
+
+ .col-xlg-2 {
+ width: 16.66666667%;
+ *width: 16.56666667%;
+ }
+
+ .col-xlg-1 {
+ width: 8.33333333%;
+ *width: 8.23333333%;
+ }
+}
+.col-auto {
+ flex: 1 0 0px;
+ width: auto;
+}
+
+@media (min-width: 576px) {
+ .col-xs-auto {
+ flex: 1 0 0px;
+ width: auto;
+ }
+}
+@media (min-width: 768px) {
+ .col-sm-auto {
+ flex: 1 0 0px;
+ width: auto;
+ }
+}
+@media (min-width: 992px) {
+ .col-md-auto {
+ flex: 1 0 0px;
+ width: auto;
+ }
+}
+@media (min-width: 1200px) {
+ .col-lg-auto {
+ flex: 1 0 0px;
+ width: auto;
+ }
+}
+@media (min-width: 1600px) {
+ .col-xlg-auto {
+ flex: 1 0 0px;
+ width: auto;
+ }
+}
+.order-12 {
+ order: 12;
+}
+
+.order-11 {
+ order: 11;
+}
+
+.order-10 {
+ order: 10;
+}
+
+.order-9 {
+ order: 9;
+}
+
+.order-8 {
+ order: 8;
+}
+
+.order-7 {
+ order: 7;
+}
+
+.order-6 {
+ order: 6;
+}
+
+.order-5 {
+ order: 5;
+}
+
+.order-4 {
+ order: 4;
+}
+
+.order-3 {
+ order: 3;
+}
+
+.order-2 {
+ order: 2;
+}
+
+.order-1 {
+ order: 1;
+}
+
+.order-0 {
+ order: 0;
+}
+
+@media (min-width: 576px) {
+ .order-xs-12 {
+ order: 12;
+ }
+
+ .order-xs-11 {
+ order: 11;
+ }
+
+ .order-xs-10 {
+ order: 10;
+ }
+
+ .order-xs-9 {
+ order: 9;
+ }
+
+ .order-xs-8 {
+ order: 8;
+ }
+
+ .order-xs-7 {
+ order: 7;
+ }
+
+ .order-xs-6 {
+ order: 6;
+ }
+
+ .order-xs-5 {
+ order: 5;
+ }
+
+ .order-xs-4 {
+ order: 4;
+ }
+
+ .order-xs-3 {
+ order: 3;
+ }
+
+ .order-xs-2 {
+ order: 2;
+ }
+
+ .order-xs-1 {
+ order: 1;
+ }
+
+ .order-xs-0 {
+ order: 0;
+ }
+}
+@media (min-width: 768px) {
+ .order-sm-12 {
+ order: 12;
+ }
+
+ .order-sm-11 {
+ order: 11;
+ }
+
+ .order-sm-10 {
+ order: 10;
+ }
+
+ .order-sm-9 {
+ order: 9;
+ }
+
+ .order-sm-8 {
+ order: 8;
+ }
+
+ .order-sm-7 {
+ order: 7;
+ }
+
+ .order-sm-6 {
+ order: 6;
+ }
+
+ .order-sm-5 {
+ order: 5;
+ }
+
+ .order-sm-4 {
+ order: 4;
+ }
+
+ .order-sm-3 {
+ order: 3;
+ }
+
+ .order-sm-2 {
+ order: 2;
+ }
+
+ .order-sm-1 {
+ order: 1;
+ }
+
+ .order-sm-0 {
+ order: 0;
+ }
+}
+@media (min-width: 992px) {
+ .order-md-12 {
+ order: 12;
+ }
+
+ .order-md-11 {
+ order: 11;
+ }
+
+ .order-md-10 {
+ order: 10;
+ }
+
+ .order-md-9 {
+ order: 9;
+ }
+
+ .order-md-8 {
+ order: 8;
+ }
+
+ .order-md-7 {
+ order: 7;
+ }
+
+ .order-md-6 {
+ order: 6;
+ }
+
+ .order-md-5 {
+ order: 5;
+ }
+
+ .order-md-4 {
+ order: 4;
+ }
+
+ .order-md-3 {
+ order: 3;
+ }
+
+ .order-md-2 {
+ order: 2;
+ }
+
+ .order-md-1 {
+ order: 1;
+ }
+
+ .order-md-0 {
+ order: 0;
+ }
+}
+@media (min-width: 1200px) {
+ .order-lg-12 {
+ order: 12;
+ }
+
+ .order-lg-11 {
+ order: 11;
+ }
+
+ .order-lg-10 {
+ order: 10;
+ }
+
+ .order-lg-9 {
+ order: 9;
+ }
+
+ .order-lg-8 {
+ order: 8;
+ }
+
+ .order-lg-7 {
+ order: 7;
+ }
+
+ .order-lg-6 {
+ order: 6;
+ }
+
+ .order-lg-5 {
+ order: 5;
+ }
+
+ .order-lg-4 {
+ order: 4;
+ }
+
+ .order-lg-3 {
+ order: 3;
+ }
+
+ .order-lg-2 {
+ order: 2;
+ }
+
+ .order-lg-1 {
+ order: 1;
+ }
+
+ .order-lg-0 {
+ order: 0;
+ }
+}
+@media (min-width: 1600px) {
+ .order-xlg-12 {
+ order: 12;
+ }
+
+ .order-xlg-11 {
+ order: 11;
+ }
+
+ .order-xlg-10 {
+ order: 10;
+ }
+
+ .order-xlg-9 {
+ order: 9;
+ }
+
+ .order-xlg-8 {
+ order: 8;
+ }
+
+ .order-xlg-7 {
+ order: 7;
+ }
+
+ .order-xlg-6 {
+ order: 6;
+ }
+
+ .order-xlg-5 {
+ order: 5;
+ }
+
+ .order-xlg-4 {
+ order: 4;
+ }
+
+ .order-xlg-3 {
+ order: 3;
+ }
+
+ .order-xlg-2 {
+ order: 2;
+ }
+
+ .order-xlg-1 {
+ order: 1;
+ }
+
+ .order-xlg-0 {
+ order: 0;
+ }
+}
+.offset-11 {
+ margin-left: 91.66666667%;
+ *margin-left: 91.56666667%;
+}
+
+.offset-10 {
+ margin-left: 83.33333333%;
+ *margin-left: 83.23333333%;
+}
+
+.offset-9 {
+ margin-left: 75%;
+ *margin-left: 74.9%;
+}
+
+.offset-8 {
+ margin-left: 66.66666667%;
+ *margin-left: 66.56666667%;
+}
+
+.offset-7 {
+ margin-left: 58.33333333%;
+ *margin-left: 58.23333333%;
+}
+
+.offset-6 {
+ margin-left: 50%;
+ *margin-left: 49.9%;
+}
+
+.offset-5 {
+ margin-left: 41.66666667%;
+ *margin-left: 41.56666667%;
+}
+
+.offset-4 {
+ margin-left: 33.33333333%;
+ *margin-left: 33.23333333%;
+}
+
+.offset-3 {
+ margin-left: 25%;
+ *margin-left: 24.9%;
+}
+
+.offset-2 {
+ margin-left: 16.66666667%;
+ *margin-left: 16.56666667%;
+}
+
+.offset-1 {
+ margin-left: 8.33333333%;
+ *margin-left: 8.23333333%;
+}
+
+@media (min-width: 576px) {
+ .offset-xs-11 {
+ margin-left: 91.66666667%;
+ *margin-left: 91.56666667%;
+ }
+
+ .offset-xs-10 {
+ margin-left: 83.33333333%;
+ *margin-left: 83.23333333%;
+ }
+
+ .offset-xs-9 {
+ margin-left: 75%;
+ *margin-left: 74.9%;
+ }
+
+ .offset-xs-8 {
+ margin-left: 66.66666667%;
+ *margin-left: 66.56666667%;
+ }
+
+ .offset-xs-7 {
+ margin-left: 58.33333333%;
+ *margin-left: 58.23333333%;
+ }
+
+ .offset-xs-6 {
+ margin-left: 50%;
+ *margin-left: 49.9%;
+ }
+
+ .offset-xs-5 {
+ margin-left: 41.66666667%;
+ *margin-left: 41.56666667%;
+ }
+
+ .offset-xs-4 {
+ margin-left: 33.33333333%;
+ *margin-left: 33.23333333%;
+ }
+
+ .offset-xs-3 {
+ margin-left: 25%;
+ *margin-left: 24.9%;
+ }
+
+ .offset-xs-2 {
+ margin-left: 16.66666667%;
+ *margin-left: 16.56666667%;
+ }
+
+ .offset-xs-1 {
+ margin-left: 8.33333333%;
+ *margin-left: 8.23333333%;
+ }
+
+ .offset-xs-0 {
+ margin-left: 0;
+ *margin-left: -0.1%;
+ }
+}
+@media (min-width: 768px) {
+ .offset-sm-11 {
+ margin-left: 91.66666667%;
+ *margin-left: 91.56666667%;
+ }
+
+ .offset-sm-10 {
+ margin-left: 83.33333333%;
+ *margin-left: 83.23333333%;
+ }
+
+ .offset-sm-9 {
+ margin-left: 75%;
+ *margin-left: 74.9%;
+ }
+
+ .offset-sm-8 {
+ margin-left: 66.66666667%;
+ *margin-left: 66.56666667%;
+ }
+
+ .offset-sm-7 {
+ margin-left: 58.33333333%;
+ *margin-left: 58.23333333%;
+ }
+
+ .offset-sm-6 {
+ margin-left: 50%;
+ *margin-left: 49.9%;
+ }
+
+ .offset-sm-5 {
+ margin-left: 41.66666667%;
+ *margin-left: 41.56666667%;
+ }
+
+ .offset-sm-4 {
+ margin-left: 33.33333333%;
+ *margin-left: 33.23333333%;
+ }
+
+ .offset-sm-3 {
+ margin-left: 25%;
+ *margin-left: 24.9%;
+ }
+
+ .offset-sm-2 {
+ margin-left: 16.66666667%;
+ *margin-left: 16.56666667%;
+ }
+
+ .offset-sm-1 {
+ margin-left: 8.33333333%;
+ *margin-left: 8.23333333%;
+ }
+
+ .offset-sm-0 {
+ margin-left: 0;
+ *margin-left: -0.1%;
+ }
+}
+@media (min-width: 992px) {
+ .offset-md-11 {
+ margin-left: 91.66666667%;
+ *margin-left: 91.56666667%;
+ }
+
+ .offset-md-10 {
+ margin-left: 83.33333333%;
+ *margin-left: 83.23333333%;
+ }
+
+ .offset-md-9 {
+ margin-left: 75%;
+ *margin-left: 74.9%;
+ }
+
+ .offset-md-8 {
+ margin-left: 66.66666667%;
+ *margin-left: 66.56666667%;
+ }
+
+ .offset-md-7 {
+ margin-left: 58.33333333%;
+ *margin-left: 58.23333333%;
+ }
+
+ .offset-md-6 {
+ margin-left: 50%;
+ *margin-left: 49.9%;
+ }
+
+ .offset-md-5 {
+ margin-left: 41.66666667%;
+ *margin-left: 41.56666667%;
+ }
+
+ .offset-md-4 {
+ margin-left: 33.33333333%;
+ *margin-left: 33.23333333%;
+ }
+
+ .offset-md-3 {
+ margin-left: 25%;
+ *margin-left: 24.9%;
+ }
+
+ .offset-md-2 {
+ margin-left: 16.66666667%;
+ *margin-left: 16.56666667%;
+ }
+
+ .offset-md-1 {
+ margin-left: 8.33333333%;
+ *margin-left: 8.23333333%;
+ }
+
+ .offset-md-0 {
+ margin-left: 0;
+ *margin-left: -0.1%;
+ }
+}
+@media (min-width: 1200px) {
+ .offset-lg-11 {
+ margin-left: 91.66666667%;
+ *margin-left: 91.56666667%;
+ }
+
+ .offset-lg-10 {
+ margin-left: 83.33333333%;
+ *margin-left: 83.23333333%;
+ }
+
+ .offset-lg-9 {
+ margin-left: 75%;
+ *margin-left: 74.9%;
+ }
+
+ .offset-lg-8 {
+ margin-left: 66.66666667%;
+ *margin-left: 66.56666667%;
+ }
+
+ .offset-lg-7 {
+ margin-left: 58.33333333%;
+ *margin-left: 58.23333333%;
+ }
+
+ .offset-lg-6 {
+ margin-left: 50%;
+ *margin-left: 49.9%;
+ }
+
+ .offset-lg-5 {
+ margin-left: 41.66666667%;
+ *margin-left: 41.56666667%;
+ }
+
+ .offset-lg-4 {
+ margin-left: 33.33333333%;
+ *margin-left: 33.23333333%;
+ }
+
+ .offset-lg-3 {
+ margin-left: 25%;
+ *margin-left: 24.9%;
+ }
+
+ .offset-lg-2 {
+ margin-left: 16.66666667%;
+ *margin-left: 16.56666667%;
+ }
+
+ .offset-lg-1 {
+ margin-left: 8.33333333%;
+ *margin-left: 8.23333333%;
+ }
+
+ .offset-lg-0 {
+ margin-left: 0;
+ *margin-left: -0.1%;
+ }
+}
+@media (min-width: 1600px) {
+ .offset-xlg-11 {
+ margin-left: 91.66666667%;
+ *margin-left: 91.56666667%;
+ }
+
+ .offset-xlg-10 {
+ margin-left: 83.33333333%;
+ *margin-left: 83.23333333%;
+ }
+
+ .offset-xlg-9 {
+ margin-left: 75%;
+ *margin-left: 74.9%;
+ }
+
+ .offset-xlg-8 {
+ margin-left: 66.66666667%;
+ *margin-left: 66.56666667%;
+ }
+
+ .offset-xlg-7 {
+ margin-left: 58.33333333%;
+ *margin-left: 58.23333333%;
+ }
+
+ .offset-xlg-6 {
+ margin-left: 50%;
+ *margin-left: 49.9%;
+ }
+
+ .offset-xlg-5 {
+ margin-left: 41.66666667%;
+ *margin-left: 41.56666667%;
+ }
+
+ .offset-xlg-4 {
+ margin-left: 33.33333333%;
+ *margin-left: 33.23333333%;
+ }
+
+ .offset-xlg-3 {
+ margin-left: 25%;
+ *margin-left: 24.9%;
+ }
+
+ .offset-xlg-2 {
+ margin-left: 16.66666667%;
+ *margin-left: 16.56666667%;
+ }
+
+ .offset-xlg-1 {
+ margin-left: 8.33333333%;
+ *margin-left: 8.23333333%;
+ }
+
+ .offset-xlg-0 {
+ margin-left: 0;
+ *margin-left: -0.1%;
+ }
+}
+.wrap {
+ flex-wrap: wrap;
+}
+
+.no-wrap {
+ flex-wrap: nowrap;
+}
+
+.no-wrap [class*=col-] {
+ flex-shrink: 1;
+}
+
+.wrap-reverse {
+ flex-wrap: wrap-reverse;
+}
+
+.direction-row {
+ flex-direction: row;
+}
+
+.direction-row-reverse {
+ flex-direction: row-reverse;
+}
+
+.direction-column {
+ flex-direction: column;
+}
+
+.direction-column-reverse {
+ flex-direction: column-reverse;
+}
+
+.align-start {
+ align-items: flex-start;
+}
+
+.align-end {
+ align-items: flex-end;
+}
+
+.align-end [class*=col-] {
+ vertical-align: bottom;
+}
+
+.align-center {
+ align-items: center;
+}
+
+.align-center [class*=col-] {
+ vertical-align: middle;
+}
+
+.align-baseline {
+ align-items: baseline;
+}
+
+.align-content-start {
+ align-content: flex-start;
+}
+
+.align-content-end {
+ align-content: flex-end;
+}
+
+.align-content-end [class*=col-] {
+ vertical-align: bottom;
+}
+
+.align-content-center {
+ align-content: center;
+}
+
+.align-content-space-between {
+ align-content: space-between;
+}
+
+.align-content-space-around {
+ align-content: space-around;
+}
+
+.align-self-stretch {
+ align-self: stretch;
+}
+
+.align-self-start {
+ align-self: flex-start;
+}
+
+.align-self-end {
+ align-self: flex-end;
+ vertical-align: bottom;
+}
+
+.align-self-center {
+ align-self: center;
+ vertical-align: middle;
+}
+
+.align-self-baseline {
+ align-self: baseline;
+ vertical-align: baseline;
+}
+
+.justify-start {
+ justify-content: flex-start;
+}
+
+.justify-start.grid {
+ text-align: left;
+}
+
+.justify-end {
+ justify-content: flex-end;
+}
+
+.justify-end.grid {
+ text-align: right;
+ -moz-text-align-last: right;
+ text-align-last: right;
+}
+
+.justify-end.grid [class*=col-] {
+ text-align: left;
+ text-align: start;
+ -moz-text-align-last: left;
+ -moz-text-align-last: start;
+ text-align-last: left;
+ text-align-last: start;
+}
+
+.justify-center {
+ justify-content: center;
+}
+
+.justify-center.grid {
+ text-align: center;
+ -moz-text-align-last: center;
+ text-align-last: center;
+}
+
+.justify-center.grid [class*=col-] {
+ text-align: left;
+ text-align: start;
+ -moz-text-align-last: left;
+ -moz-text-align-last: start;
+ text-align-last: left;
+ text-align-last: start;
+}
+
+.justify-space-between {
+ justify-content: space-between;
}
-button:-moz-focusring,
-[type=button]:-moz-focusring,
-[type=reset]:-moz-focusring,
-[type=submit]:-moz-focusring {
- outline: 1px dotted ButtonText;
+.justify-space-between.grid {
+ text-align: justify;
+ -moz-text-align-last: justify;
+ text-align-last: justify;
}
-legend {
- box-sizing: border-box;
- display: table;
- max-width: 100%;
- padding: 0;
- white-space: normal;
+.justify-space-between.grid [class*=col-] {
+ text-align: left;
+ text-align: start;
+ -moz-text-align-last: left;
+ -moz-text-align-last: start;
+ text-align-last: left;
+ text-align-last: start;
}
-[type=number]::-webkit-inner-spin-button,
-[type=number]::-webkit-outer-spin-button {
- height: auto;
+.justify-space-around {
+ justify-content: space-around;
}
-[type=search] {
- -webkit-appearance: textfield;
- outline-offset: -2px;
+.justify-space-around.grid {
+ text-align: justify;
+ -moz-text-align-last: justify;
+ text-align-last: justify;
}
-[type=search]::-webkit-search-decoration {
- -webkit-appearance: none;
+.justify-space-around.grid [class*=col-] {
+ text-align: left;
+ text-align: start;
+ -moz-text-align-last: left;
+ -moz-text-align-last: start;
+ text-align-last: left;
+ text-align-last: start;
}
-::-webkit-file-upload-button {
- -webkit-appearance: button;
- font: inherit;
+.grid-bleed [class*=col-] {
+ padding: 0;
}
-/**
- * hr
- *
- */
-hr {
- box-sizing: content-box;
- height: 0;
- overflow: visible;
- border: 0;
- margin: 0.3em 0;
+.col-grid {
+ display: flex;
+ flex-direction: column;
}
-progress {
- vertical-align: baseline;
+.col-grid.direction-row {
+ flex-direction: row;
}
-details {
- display: block;
+.col-bleed {
+ padding: 0;
}
-summary {
- display: list-item;
+.col-bleed-x {
+ padding: 15px 0;
}
-h1, .h1,
-h2, .h2,
-h3, .h3,
-h4, .h4,
-h5, .h5,
-h6, .h6 {
- font-family: "IBM Plex Mono", sans-serif;
- font-weight: bold;
- line-height: 1.2;
- margin: 0 0 15px;
+.col-bleed-y {
+ padding: 0 15px;
}
-@media only screen and (min-width: 992px) {
- h1, .h1,
-h2, .h2,
-h3, .h3,
-h4, .h4,
-h5, .h5,
-h6, .h6 {
- margin: 0 0 20px;
- }
+
+.flex-img {
+ display: block;
+ flex: 0 0 auto;
+ max-width: 100%;
+ height: auto;
+ width: 100%;
+ *width: auto;
}
-h5 {
- line-height: 1.4;
+.flex-footer {
+ width: 100%;
+ margin-top: auto;
+ margin-bottom: 0;
}
-h6 {
- line-height: 1.4;
+.flex-footer > :last-child {
+ margin-bottom: 0;
}
-h1, .h1 {
- font-size: 2.5rem;
+@media (max-width: 575px) {
+ .hidden-xxs {
+ display: none;
+ }
}
-@media only screen and (min-width: 992px) {
- h1, .h1 {
- font-size: 3rem;
+@media (min-width: 576px) {
+ .hidden-xs-up {
+ display: none;
}
}
-
-h2, .h2 {
- font-size: 2rem;
+@media (max-width: 767px) {
+ .hidden-xs-down {
+ display: none;
+ }
}
-@media only screen and (min-width: 992px) {
- h2, .h2 {
- font-size: 2.4rem;
+@media (min-width: 576px) and (max-width: 767px) {
+ .hidden-xs {
+ display: none;
}
}
-
-h3, .h3 {
- font-size: 1.75rem;
+@media (min-width: 768px) {
+ .hidden-sm-up {
+ display: none;
+ }
}
-@media only screen and (min-width: 992px) {
- h3, .h3 {
- font-size: 2.1rem;
+@media (max-width: 991px) {
+ .hidden-sm-down {
+ display: none;
}
}
-
-h4, .h4 {
- font-size: 1.5rem;
+@media (min-width: 768px) and (max-width: 991px) {
+ .hidden-sm {
+ display: none;
+ }
}
-@media only screen and (min-width: 992px) {
- h4, .h4 {
- font-size: 1.8rem;
+@media (min-width: 992px) {
+ .hidden-md-up {
+ display: none;
}
}
-
-h5, .h5 {
- font-size: 1.25rem;
+@media (max-width: 1199px) {
+ .hidden-md-down {
+ display: none;
+ }
}
-@media only screen and (min-width: 992px) {
- h5, .h5 {
- font-size: 1.5rem;
+@media (min-width: 992px) and (max-width: 1199px) {
+ .hidden-md {
+ display: none;
}
}
-
-h6, .h6 {
- font-size: 1rem;
+@media (min-width: 1200px) {
+ .hidden-lg-up {
+ display: none;
+ }
}
-@media only screen and (min-width: 992px) {
- h6, .h6 {
- font-size: 1.2rem;
+@media (max-width: 1599px) {
+ .hidden-lg-down {
+ display: none;
+ }
+}
+@media (min-width: 1200px) and (max-width: 1599px) {
+ .hidden-lg {
+ display: none;
+ }
+}
+@media (min-width: 1600px) {
+ .hidden-xlg {
+ display: none;
}
}
-
-/**
- *
- *
- *
- *
- */
-/**
- *
- *
- *
- *
- */
-/**
- *
- *
- *
- */
-/**
- *
- *
- *
- *
- */
-/**
- *
- *
- *
- *
- */
-/**
- *
+ *
+ *
+ *
- *
- *
- *
- */
-/**
- *
- *
- *
- */
-/**
- *
- *
- *
- */
-/**
- *
- *
+ *
*
*
*/
-@mixin plain-ui__layout__masonry() {
+
+@mixin plain-ui__layout__masonry()
+{
+ $plain-ui__masonry_sizes: (
+ 1: 25%,
+ 2: 55%,
+ 3: 20%,
+ 4: 67%,
+ 5: 33%
+ ) !default;
+
.masonry {
display: flex;
width: 100%;
@@ -19,24 +34,10 @@
@include plain-ui__media-sm() {
height: 300px;
- &:nth-child(4n+1) {
- width: 25%;
- }
-
- &:nth-child(4n+2) {
- width: 55%;
- }
-
- &:nth-child(4n+3) {
- width: 20%;
- }
-
- &:nth-child(4n+4) {
- width: 67%;
- }
-
- &:nth-child(4n+5) {
- width: 33%;
+ @each $index, $size in $plain-ui__masonry_sizes {
+ &:nth-child(4n+#{$index}) {
+ width: #{$size};
+ }
}
}
}
diff --git a/src/scss/plain-ui.scss b/src/scss/plain-ui.scss
index 9cb8b5f..f018264 100644
--- a/src/scss/plain-ui.scss
+++ b/src/scss/plain-ui.scss
@@ -1,13 +1,14 @@
@import
'../fonts/stylesheet',
+ 'node_modules/reflex-grid/scss/reflex',
'functions',
'mixins',
'variables',
'core',
- 'core/helpers/core',
+ 'helpers/core',
'components/badge',
'components/button',
@@ -21,7 +22,8 @@
'components/slider',
'components/bar',
- 'layout/masonry';
+ 'layout/masonry',
+ 'layout/flex';
@include plain-ui__core();
@include plain-ui__helpers__core();
diff --git a/src/scss/views/_dark.scss b/src/scss/themes/_dark.scss
similarity index 100%
rename from src/scss/views/_dark.scss
rename to src/scss/themes/_dark.scss
diff --git a/src/scss/views/_light.scss b/src/scss/themes/_light.scss
similarity index 100%
rename from src/scss/views/_light.scss
rename to src/scss/themes/_light.scss
*
+ *
+ *