diff --git a/scss/CrispyBoilerplate.scss b/scss/CrispyBoilerplate.scss index 716b958..8ba5074 100644 --- a/scss/CrispyBoilerplate.scss +++ b/scss/CrispyBoilerplate.scss @@ -2,10 +2,10 @@ '../../node_modules/normalize.css/normalize.css' 'functions/units', - 'functions/zIndex', + 'functions/z-index', 'mixins/clearfix', - 'mixins/fontSize', + 'mixins/font-size', 'mixins/list', 'components/align', @@ -15,4 +15,4 @@ 'components/icon', 'components/list', 'components/normalize', - 'components/textColors'; + 'components/text-colors'; diff --git a/scss/components/_align.scss b/scss/components/_align.scss index 7a36a20..d8637cb 100644 --- a/scss/components/_align.scss +++ b/scss/components/_align.scss @@ -1,9 +1,11 @@ /** - * align + * align * + * - text + * - floating for elements + * - centering with margin * - * - * @author Björn Hase + * @author Björn Hase * */ diff --git a/scss/components/_body.scss b/scss/components/_body.scss index 02684a8..2841af9 100644 --- a/scss/components/_body.scss +++ b/scss/components/_body.scss @@ -1,3 +1,6 @@ +@import + '../mixins/font-size'; + /** * body * diff --git a/scss/components/_button.scss b/scss/components/_button.scss index f9de720..abbdf87 100644 --- a/scss/components/_button.scss +++ b/scss/components/_button.scss @@ -1,7 +1,7 @@ /** - * Buttons + * button + * * - * mixin for basic styles of buttons * * @author Björn Hase * diff --git a/scss/components/_heading.scss b/scss/components/_heading.scss index 8191648..d06c0a2 100644 --- a/scss/components/_heading.scss +++ b/scss/components/_heading.scss @@ -1,11 +1,13 @@ @import - '../mixins/units', - '../mixins/fontSize'; + '../functions/units', + '../mixins/font-size'; /** * heading * - * basic styles for heading + * loop to create for all heading styles + * creating css-classes with same naming + * * * @author Björn Hase * @@ -35,7 +37,7 @@ $heading__margin: 0 0 pxToEm(20px) !default; margin: $heading__margin; @include font-size($font-size); - + @content; } } diff --git a/scss/components/_icon.scss b/scss/components/_icon.scss index ec56779..c3dfaba 100644 --- a/scss/components/_icon.scss +++ b/scss/components/_icon.scss @@ -1,7 +1,7 @@ /** * icon * - * basic styles for icon + * use svg as icon * * * diff --git a/scss/components/_normalize.scss b/scss/components/_normalize.scss index 1ea08ba..9ff25d1 100644 --- a/scss/components/_normalize.scss +++ b/scss/components/_normalize.scss @@ -1,3 +1,6 @@ +@import + '../functions/units'; + /** * normalize * diff --git a/scss/components/_textColors.scss b/scss/components/_text-colors.scss similarity index 88% rename from scss/components/_textColors.scss rename to scss/components/_text-colors.scss index 3f98e94..643b3fe 100644 --- a/scss/components/_textColors.scss +++ b/scss/components/_text-colors.scss @@ -1,5 +1,7 @@ /** - * classes as modificators for text-color + * text-colors + * + * modificators for text-color * * * @author Björn Hase diff --git a/scss/functions/_units.scss b/scss/functions/_units.scss index 0d37927..a764e4c 100644 --- a/scss/functions/_units.scss +++ b/scss/functions/_units.scss @@ -1,10 +1,17 @@ +/** + * functions to convert px to em and rem + * + * + * @author Björn Hase + * + */ + $base__font-size: 16px !default; -$base__line-height: 1.5 !default; /** * calculate pixel value to em * - * @param {px} $font-size + * @param {px} $fontSize * @return {em} */ @function pxToEm($font-size) { @@ -14,32 +21,10 @@ $base__line-height: 1.5 !default; /** * calculate px value to rem * - * @param {px} $px + * @param {px} $fonz-size * @param {px} $font-size * @return {em} */ @function pxToRem($font-size) { @return ($font-size / $base__font-size) * 1rem; } - -/** - * calculate em value to rem - * - * @param {em} $value - * @param {px} $font-size - * @return {px} - */ -@function emToPx($value, $font-size: $base__font-size) { - @return ($value * $font-size) * 1px; -} - -/** - * calculate line-height with font-size - * - * @param {px} $font-size - * @param {unitless} $base-line-height - * @return {unitless} - */ -@function lineHeight($font-size, $line-height: $base-line-height) { - @return unitless(emToPx($line-height * 1em) / $font-size); -} diff --git a/scss/functions/_zIndex.scss b/scss/functions/_zIndex.scss index 6cf804c..02c1ae8 100644 --- a/scss/functions/_zIndex.scss +++ b/scss/functions/_zIndex.scss @@ -1,6 +1,7 @@ /** + * z-index * - * + * handle z-index * * * @author Björn Hase @@ -12,7 +13,15 @@ $z-indexes: ( 'modal': 1000 ) !default; -@function z-index($name) { +/** + * z-index + * + * + * + * @return + * + */ +@function zIndex($name) { @if index($z-indexes, $name) { @return map($z-indexes, $name); } @else { diff --git a/scss/mixins/_clearfix.scss b/scss/mixins/_clearfix.scss index 27cb363..bf1317e 100644 --- a/scss/mixins/_clearfix.scss +++ b/scss/mixins/_clearfix.scss @@ -6,7 +6,7 @@ * */ -@mixin crispy-boilerplate-clearfix() { +@mixin clearfix() { &::before, &::after { display: table; diff --git a/scss/mixins/_fontSize.scss b/scss/mixins/_font-size.scss similarity index 52% rename from scss/mixins/_fontSize.scss rename to scss/mixins/_font-size.scss index 712d1f8..ec41acb 100644 --- a/scss/mixins/_fontSize.scss +++ b/scss/mixins/_font-size.scss @@ -1,10 +1,22 @@ +@import + '../functions/units'; + +/** + * font-size + * + * + * @author Björn Hase + * + */ + + /** * add font-size with fallback * * @param {px} $font-size * */ -@mixin fontSize($font-size) { +@mixin font-size($font-size) { font-size: $font-size; font-size: pxToRem($font-size); } diff --git a/scss/mixins/_list.scss b/scss/mixins/_list.scss index 0843509..392ded6 100644 --- a/scss/mixins/_list.scss +++ b/scss/mixins/_list.scss @@ -1,7 +1,15 @@ /** - * list + * list * * + * @author Björn Hase + * + */ + + +/** + * clear default styles from list + * * */ @mixin crispy-boilerplate-list-clear() {