diff --git a/dist/index.html b/dist/index.html index 15b2136..8650bbb 100644 --- a/dist/index.html +++ b/dist/index.html @@ -13,10 +13,22 @@ - - - - - - - -
+ + + + + +
-
- -

Flat Sass Boilerplate gives you an amount of basic settings, components, helpers, mixins and functions. diff --git a/src/example/example.scss b/src/example/example.scss index e051cec..ef766f4 100644 --- a/src/example/example.scss +++ b/src/example/example.scss @@ -1,22 +1,13 @@ @import '../scss/crispy', - 'site/base', 'site/container', - 'site/footer', - 'site/header', - 'components/button', - 'components/nav', - 'templates/home'; // components @include crispy__button(); -@include crispy__code(); -@include crispy__group(); @include crispy__heading(); -@include crispy__hero(); @include crispy__icon(); @include crispy__modal(); @include crispy__panel(); diff --git a/src/scss/_config.scss b/src/scss/_config.scss index 32dd96f..be23ac3 100644 --- a/src/scss/_config.scss +++ b/src/scss/_config.scss @@ -6,6 +6,8 @@ * */ +// @TODO adding colors for link and hover + // font $crispy__font-size: 16px !default; $crispy__golden-ratio: 1.618 !default; diff --git a/src/scss/_base.scss b/src/scss/_normalize.scss similarity index 91% rename from src/scss/_base.scss rename to src/scss/_normalize.scss index 70c7b12..b93a688 100644 --- a/src/scss/_base.scss +++ b/src/scss/_normalize.scss @@ -1,17 +1,21 @@ /** - * base + * normalize * * * @author Björn Hase * */ +@import + 'normalize'; + html { font-size: 100%; } body, html { + margin: 0; height: 100%; } @@ -47,7 +51,7 @@ a { color: $crispy__color-primary; &:hover { - color: $crispy__color-text; + color: $crispy__color-hover; } &:focus { @@ -90,11 +94,11 @@ ul ul { } ol { - list-style: decimal inside; + list-style: decimal outside; } ul { - list-style: disc inside; + list-style: disc outside; } dd, @@ -130,5 +134,6 @@ body { color: $crispy__color-text; background-color: $crispy__color-background; direction: $crispy__direction; + @include crispy__font-size($crispy__font-size); } diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index 1ffd9b9..4c7a375 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -6,6 +6,7 @@ * */ + $crispy__button__padding: toEm(10px 25px) !default; $crispy__button__up__margin: toEm(20px) !default; diff --git a/src/scss/components/_code.scss b/src/scss/components/_code.scss index da3a581..a981148 100644 --- a/src/scss/components/_code.scss +++ b/src/scss/components/_code.scss @@ -11,6 +11,7 @@ * */ + $crispy__code__font-size: $crispy__font-size !default; $crispy__code__font-family: monospace, monospace !default; $crispy__code__padding: toEm(10px 20px) !default; diff --git a/src/scss/components/_group.scss b/src/scss/components/_group.scss index 1489e78..1b3c2a9 100644 --- a/src/scss/components/_group.scss +++ b/src/scss/components/_group.scss @@ -11,6 +11,7 @@ * */ + $crispy__group__character: '/' !default; $crispy__group__character__margin: toEm(0 $crispy__margin 0) !default; diff --git a/src/scss/components/_heading.scss b/src/scss/components/_heading.scss index 3d46ed5..5957d95 100644 --- a/src/scss/components/_heading.scss +++ b/src/scss/components/_heading.scss @@ -9,6 +9,7 @@ * */ + $crispy__heading__font-sizes: ( 'h1': 40px, 'h2': 36px, diff --git a/src/scss/components/_icon.scss b/src/scss/components/_icon.scss index b9f88f5..49f5344 100644 --- a/src/scss/components/_icon.scss +++ b/src/scss/components/_icon.scss @@ -3,8 +3,8 @@ * * use svg as icon * - * - * + * + * * * * @@ -14,7 +14,6 @@ $crispy__icon__vertical-align: text-bottom !default; -$crispy__icon__margin: 0 2px !default; $crispy__icon__sizes: ( 'default': $crispy__font-size, @@ -22,55 +21,16 @@ $crispy__icon__sizes: ( 'large': 28px ) !default; -$crispy__icon__colors: ( - 'default': $crispy__color-text, - 'success': $crispy__color-success, - 'warning': $crispy__color-warning, - 'danger': $crispy__color-danger -) !default; - @mixin crispy__icon() { .icon { display: inline-block; position: relative; vertical-align: $crispy__icon__vertical-align; - margin: $crispy__icon__margin; - @include crispy__icon-colors($crispy__icon__colors); @include crispy__icon-sizes($crispy__icon__sizes); } } -/** - * add modificators for icons as fill from map - * - * - * @param {map} $colors - * - */ -@mixin crispy__icon-colors($colors) { - @each $name, $color in $colors { - @if ($name == 'default') { - @include crispy__icon-color($color); - } @else { - &--#{$name} { - @include crispy__icon-color($color); - } - } - } -} - -/** - * add color as fill - * - * - * @param {color} $color - * - */ -@mixin crispy__icon-color($color) { - fill: $color; -} - /** * adding sizes for icons from map * diff --git a/src/scss/crispy.scss b/src/scss/crispy.scss index 9ac2595..39b459d 100644 --- a/src/scss/crispy.scss +++ b/src/scss/crispy.scss @@ -1,10 +1,8 @@ @import - 'normalize', 'functions/functions', 'mixins/mixins', 'config', - 'base', - + 'normalize', 'components/components', 'helpers/helpers'; diff --git a/webpack.mix.js b/webpack.mix.js index 1af5d6b..419bf4b 100644 --- a/webpack.mix.js +++ b/webpack.mix.js @@ -13,7 +13,6 @@ let mix = require('laravel-mix'); mix.sass([ 'src/sass/crispy.scss', - 'src/example/example.scss', ], 'dist/') .options({ postCss: [