diff --git a/README.md b/README.md index 836b6f4..5a93f32 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,11 @@ # cripsy-boilerplate -A simple mini-framework for basic styling. +A simple mini-framework for basic styling and few Functions to simplify handling with values. ## Components +There a few Components that also provide a Closure to adding additional Styles. + ### body Styles for Body, including Format for Fonts and Colors. @@ -18,15 +20,15 @@ Basic Styles for SVG-Icons. ### list -Basic Styles for +Additional Styles for lists, also Modificators for horzizonal lists. ### heading Styling h1-h6 and create also CSS-Classes with same name. -### Normalize +### normalize -Basic Normalizing for a few Elements. +Basic Normalizing for a few Elements. Also adding to some elements a basic margin. ## Functions @@ -38,7 +40,7 @@ Function to convert from px to em or rem. ### clearfix -Adding Clearfix +Styling for Clearfix with pseudo-classes. ### fontSite diff --git a/scss/CrispyBoilerplate.scss b/scss/CrispyBoilerplate.scss index 7044c21..716b958 100644 --- a/scss/CrispyBoilerplate.scss +++ b/scss/CrispyBoilerplate.scss @@ -6,10 +6,13 @@ 'mixins/clearfix', 'mixins/fontSize', + 'mixins/list', - 'components/button', + 'components/align', 'components/body', - 'components/icon', + 'components/button', 'components/heading', + 'components/icon', + 'components/list', 'components/normalize', - 'components/list'; + 'components/textColors'; diff --git a/scss/components/_align.scss b/scss/components/_align.scss new file mode 100644 index 0000000..7a36a20 --- /dev/null +++ b/scss/components/_align.scss @@ -0,0 +1,43 @@ +/** + * align + * + * + * + * @author Björn Hase + * + */ + +@mixin crispy-boilerplate-align() { + .--text-left { + text-align: left; + } + + .--text-right { + text-align: right; + } + + .--text-center { + text-align: center; + } + + .--text-justify { + text-align: justify; + } + + .--float-left { + float: left; + } + + .--float-right { + float: right; + } + + .--float-none { + float: none; + } + + .--centered { + margin-left: auto; + margin-right: auto; + } +} diff --git a/scss/components/_list.scss b/scss/components/_list.scss index 7d013c9..056c0b7 100644 --- a/scss/components/_list.scss +++ b/scss/components/_list.scss @@ -17,6 +17,10 @@ float: left; } } + + &--no-style { + list-style: none; + } } .d-list { diff --git a/scss/components/_textColors.scss b/scss/components/_textColors.scss new file mode 100644 index 0000000..3f98e94 --- /dev/null +++ b/scss/components/_textColors.scss @@ -0,0 +1,23 @@ +/** + * classes as modificators for text-color + * + * + * @author Björn Hase + * + */ + +$text-colors: ( + 'success': $base-color-success, + 'warning': $base-color-warning, + 'danger': $base-color-danger, + 'white': white, + 'black': black +) !default; + +@mixin crispy-boilerplate-text-colors() { + @each $name, $color in $text-colors { + .--text-#{$name} { + color: $color; + } + } +} diff --git a/scss/mixins/_list.scss b/scss/mixins/_list.scss new file mode 100644 index 0000000..c723565 --- /dev/null +++ b/scss/mixins/_list.scss @@ -0,0 +1,16 @@ +/** + * list + * + * + * + */ +@mixin cripsy-boilerplate-list-reset() { + list-style: none; + margin: 0; + padding: 0; + + li { + margin: 0; + padding: 0; + } +}