diff --git a/README.md b/README.md index 2d1bf8d..a6a405a 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,10 @@ npm install crispy-boilerplate --save There a few Components, some are also provide a Closure to adding additional Styles. +### align + +Additional Styles for modificators for align text, floating and centering elements. + ### body Styles for Body, including Format for Fonts and Colors. @@ -18,6 +22,10 @@ Styles for Body, including Format for Fonts and Colors. Styles for Buttons. +### heading + +Styling h1-h6 and create also CSS-Classes with same name. + ### icon Styles to use SVG as Icons. @@ -26,9 +34,9 @@ Styles to use SVG as Icons. Additional Styles for Lists and modificators. -### heading +### margin -Styling h1-h6 and create also CSS-Classes with same name. +Additional Styles for modificators to margin-top and margin-bottom. ### normalize diff --git a/scss/components/_margin.scss b/scss/components/_margin.scss new file mode 100644 index 0000000..675cf82 --- /dev/null +++ b/scss/components/_margin.scss @@ -0,0 +1,49 @@ +@import + '../mixins/units'; + +/** + * margin + * + * modificators for margin + * + * + * @author Björn Hase + * + */ + +$margin-top: em(5px) !default; +$margin-bottom: em(20px) !default; + +@mixin crispy-boilerplate-margin() { + .--margin-top-y0 { + margin-top: 0; + } + + .--margin-top-y1 { + margin-top: $margin-top; + } + + .--margin-top-y2 { + margin-top: $margin-top * 2; + } + + .--margin-top-y3 { + margin-top: $margin-top * 3; + } + + .--margin-bottom-y0 { + margin-bottom: 0; + } + + .--margin-bottom-y1 { + margin-bottom: $margin-bottom; + } + + .--margin-bottom-y2 { + margin-bottom: $margin-bottom * 2; + } + + .--margin-bottom-y3 { + margin-bottom: $margin-bottom * 3; + } +} diff --git a/scss/CrispyBoilerplate.scss b/scss/crispyBoilerplate.scss similarity index 93% rename from scss/CrispyBoilerplate.scss rename to scss/crispyBoilerplate.scss index 79696f7..e2cb0dc 100644 --- a/scss/CrispyBoilerplate.scss +++ b/scss/crispyBoilerplate.scss @@ -14,5 +14,6 @@ 'components/heading', 'components/icon', 'components/list', + 'components/margin', 'components/normalize', 'components/text-colors'; diff --git a/scss/functions/_zIndex.scss b/scss/functions/_zIndex.scss index 02c1ae8..ffc354b 100644 --- a/scss/functions/_zIndex.scss +++ b/scss/functions/_zIndex.scss @@ -16,6 +16,7 @@ $z-indexes: ( /** * z-index * + * * * * @return