diff --git a/README.md b/README.md index 5abcf92..168192c 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,20 @@ # cripsy-boilerplate Flat Sass Boilerplate to give you a amount of Basic Settings, Mixins and Functions. -This Boilerplate uses hover.css and normalize.css +This Boilerplate uses + +* normalize.css / +* reflex-grid / + +# media queries + +The queries are only + +``` +@include crispy__media-xs() { + +} +``` ``` npm install crispy-boilerplate --save diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..76a8fc2 --- /dev/null +++ b/demo/index.html @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/package.json b/package.json index a5d979c..3251c3d 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "author": "Björn Hase", "license": "MIT", "dependencies": { - "normalize.css": "^7.0.0" + "normalize.css": "^7.0.0", + "reflex-grid": "^2.0.1" } } diff --git a/scss/components/_body.scss b/scss/components/_body.scss deleted file mode 100644 index 8bde77a..0000000 --- a/scss/components/_body.scss +++ /dev/null @@ -1,36 +0,0 @@ -/** - * body - * - * - * - * @author Björn Hase - * - */ - - -// text -$body__font-size: 12px !default; -$body__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default; -$body__line-height: 1.5 !default; -$body__direction: ltr !default; - -// colors -$body__color: black !default; -$body__background-color: white !default; - -@mixin crispy-boilerplate-body { - body { - font-family: $body__font-family; - font-weight: normal; - line-height: $body__line-height; - - color: $body__color; - background-color: $body__background-color; - - direction: $body__direction; - - @include font-size($body__font-size); - - @content; - } -} diff --git a/scss/components/_button.scss b/scss/components/_button.scss deleted file mode 100644 index 40f417e..0000000 --- a/scss/components/_button.scss +++ /dev/null @@ -1,34 +0,0 @@ -/** - * button - * - * - * - * @author Björn Hase - * - */ - - -@mixin crispy-boilerplate-button() { - .button { - position: relative; - display: inline-block; - - vertical-align: middle; - appearance: none; - - &--wide { - width: 100%; - } - - &:hover { - cursor: pointer; - text-decoration: none; - } - - &:focus { - outline: none; - } - - @content; - } -} diff --git a/scss/components/_clearfix.scss b/scss/components/_clearfix.scss deleted file mode 100644 index a77d49e..0000000 --- a/scss/components/_clearfix.scss +++ /dev/null @@ -1,14 +0,0 @@ -/** - * clearfix - * - * - * @author Björn Hase - * - */ - - -@mixin crispy-boilerplate-clearfix() { - .clearfix { - @include clearfix(); - } -} diff --git a/scss/components/_heading.scss b/scss/components/_heading.scss deleted file mode 100644 index 1e3a2b3..0000000 --- a/scss/components/_heading.scss +++ /dev/null @@ -1,42 +0,0 @@ -/** - * heading - * - * loop to create for all heading styles - * creating css-classes with same naming - * - * - * @author Björn Hase - * - */ - - -// text -$heading__font-sizes: ( - 'h1': 36px, - 'h2': 30px, - 'h3': 24px, - 'h4': 18px, - 'h5': 14px, - 'h6': 12px -) !default; - -$heading__font-weight: bold !default; -$heading__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default; -$heading__line-height: 1.5 !default; - -$heading__margin: pxToEm(20px) 0 pxToEm(5px) !default; - -@mixin crispy-boilerplate-heading { - @each $h, $font-size in $heading__font-sizes { - #{$h}, .#{$h} { - font-family: $heading__font-family; - font-weight: $heading__font-weight; - line-height: $heading__line-height; - margin: $heading__margin; - - @include font-size($font-size); - - @content; - } - } -} diff --git a/scss/components/_normalize.scss b/scss/components/_normalize.scss deleted file mode 100644 index 73f5645..0000000 --- a/scss/components/_normalize.scss +++ /dev/null @@ -1,47 +0,0 @@ -/** - * normalize - * - * - * @author Björn Hase - * - */ - - -$normalize__margin: 0 0 pxToEm(20px) !default; - -@mixin crispy-boilerplate-normalize { - html { - font-size: 100%; - } - - body, - html { - height: 100%; - } - - html, - legend { - box-sizing: border-box; - } - - *, - *::after, - *::before { - box-sizing: inherit; - } - - table { - border-collapse: collapse; - border-spacing: 0; - } - - p { - margin: $normalize__margin; - } - - ul, ol, dl { - margin: $normalize__margin; - } - - @content; -} diff --git a/scss/components/_text-colors.scss b/scss/components/_text-colors.scss deleted file mode 100644 index 8fbdfd9..0000000 --- a/scss/components/_text-colors.scss +++ /dev/null @@ -1,26 +0,0 @@ -/** - * text-colors - * - * modificators for text-color - * - * - * @author Björn Hase - * - */ - - -$text-colors: ( - 'success': green, - 'warning': yellow, - 'danger': red, - 'white': white, - 'black': black -) !default; - -@mixin crispy-boilerplate-text-colors() { - @each $name, $color in $text-colors { - .text-#{$name} { - color: $color; - } - } -} diff --git a/scss/example.scss b/scss/example.scss deleted file mode 100644 index c127b82..0000000 --- a/scss/example.scss +++ /dev/null @@ -1,32 +0,0 @@ -@import - 'crispyBoilerplate'; - -@include crispy-boilerplate-align(); -@include crispy-boilerplate-clearfix(); -@include crispy-boilerplate-list(); -@include crispy-boilerplate-text-colors(); -@include crispy-boilerplate-animation(); - -@include crispy-boilerplate-normalize() { - // adding styles -}; - -@include crispy-boilerplate-body() { - // adding styles -}; - -@include crispy-boilerplate-button() { - // adding styles -}; - -@include crispy-boilerplate-heading() { - // adding styles -}; - -@include crispy-boilerplate-icon() { - // adding styles -}; - -.clearfix { - @include crispy-boilerplate-clearfix(); -}; diff --git a/src/scss/_base.scss b/src/scss/_base.scss new file mode 100644 index 0000000..0060834 --- /dev/null +++ b/src/scss/_base.scss @@ -0,0 +1,68 @@ +/** + * base + * + * + * @author Björn Hase + * + */ + +html { + font-size: 100%; +} + +body, +html { + height: 100%; +} + +html, +legend { + box-sizing: border-box; +} + +*, +*::after, +*::before { + box-sizing: inherit; +} + +img { + width: 100%; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +p { + margin: 0 0 $crispy__margin 0; +} + +ul, ol, dl { + margin: 0 0 $crispy__margin 0; +} + +ul { + list-style-position: outside; +} + +a { + color: $crispy__color-primary; + + &:focus { + outline: none; + } +} + +body { + font-family: $crispy__body__font-family; + font-weight: normal; + font-size: 100%; + line-height: $crispy__body__line-height; + color: $crispy__body__color-text; + background-color: $crispy__body__background-color; + direction: $crispy__body__direction; + + @include font-size($crispy__body__font-size); +} diff --git a/src/scss/_config.scss b/src/scss/_config.scss new file mode 100644 index 0000000..1dc4f97 --- /dev/null +++ b/src/scss/_config.scss @@ -0,0 +1,23 @@ +/** + * default + * + * + */ + +$crispy__font-size: 16px !default; +$crispy__golden-ratio: 1.618 !default; + +$crispy__margin: pxToEm(20px) !default; + +$cripsy__color-primary: #5ca4a9 !default; +$cripsy__color-success: #6a8d73 !default; +$cripsy__color-warning: #f4f1bb !default; +$cripsy__color-danger: #ed6a5a !default; +$cripsy__color-text: #969696 !default; +$crispy__color-background: #e6ebe0 !default; + +$crispy__body__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default; +$crispy__body__line-height: $base__golden-ratio !default; +$crispy__body__direction: ltr !default; +$crispy__body__color: $cripsy__color-text !default; +$crispy__body__background-color: $crispy__color-background !default; diff --git a/scss/_mixins.scss b/src/scss/_mixins.scss similarity index 100% rename from scss/_mixins.scss rename to src/scss/_mixins.scss diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss new file mode 100644 index 0000000..9525250 --- /dev/null +++ b/src/scss/components/_button.scss @@ -0,0 +1,49 @@ +/** + * button + * + * + * @author Björn Hase + * + */ + +$crispy__button__up-margin: pxToEm(20px) !default; +$crispy__button__up-padding: pxToEm(5px) !default; + +@mixin crispy__button() { + .button { + position: relative; + display: inline-block; + + vertical-align: middle; + appearance: none; + + &--wide { + width: 100%; + } + + // button for scroll up and down + &--up, &--down { + position: absolute; + bottom: 0; + margin: $crispy__button__up-margin; + padding: $crispy__button__up-padding; + } + + &--down { + bottom: 0; + } + + &--up { + bottom: 0; + } + + &:hover { + cursor: pointer; + text-decoration: none; + } + + &:focus { + outline: none; + } + } +} diff --git a/src/scss/components/_heading.scss b/src/scss/components/_heading.scss new file mode 100644 index 0000000..4f1059d --- /dev/null +++ b/src/scss/components/_heading.scss @@ -0,0 +1,43 @@ +/** + * heading + * + * create classes for heading similar to there name + * + * + * @author Björn Hase + * + */ + +$crispy__heading__font-sizes: ( + 'h1': 36px, + 'h2': 30px, + 'h3': 24px, + 'h4': 18px, + 'h5': 14px, + 'h6': 12px +) !default; + +$crispy__heading__font-weight: bold !default; +$crispy__heading__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default; +$crispy__heading__line-height: $crispy__golden-ratio !default; +$crispy__heading__margin: 0 0 pxToEm(20px) !default; + +@mixin crispy__heading { + h1, .h1, + h2, .h2, + h3, .h3, + h4, .h4, + h5, .h5, + h6, .h6 { + font-family: $heading__font-family; + font-weight: $heading__font-weight; + line-height: $heading__line-height; + margin: $heading__margin; + } + + @each $h, $font-size in $heading__font-sizes { + #{$h}, .#{$h} { + @include font-size($font-size); + } + } +} diff --git a/scss/components/_icon.scss b/src/scss/components/_icon.scss similarity index 50% rename from scss/components/_icon.scss rename to src/scss/components/_icon.scss index 9247e84..7a34792 100644 --- a/scss/components/_icon.scss +++ b/src/scss/components/_icon.scss @@ -3,7 +3,7 @@ * * use svg as icon * - * + * * * * @@ -13,33 +13,29 @@ */ -$icon__vertical-align: middle !default; -$icon__margin: 0 2px !default; +$crispy__icon__vertical-align: middle !default; +$crispy__icon__margin: 0 2px !default; -// width & height -$icon__sizes: ( +$crispy__icon__sizes: ( 'default': 18px, 'small': 14px, 'large': 28px ) !default; -// colors -$icon__colors: ( - 'default' : black, - 'secondary' : grey, +$crispy__icon__colors: ( + 'default': black, + 'secondary': grey, ) !default; -@mixin crispy-boilerplate-icon() { +@mixin crispy__icon() { .icon { display: inline-block; position: relative; - vertical-align: $icon__vertical-align; - margin: $icon__margin; + vertical-align: $crispy__icon__vertical-align; + margin: $crispy__icon__margin; - @include crispy-boilerplate-icon-colors($icon__colors); - @include crispy-boilerplate-icon-sizes($icon__sizes); - - @content; + @include crispy__icon-colors($crispy__icon__colors); + @include crispy__icon-sizes($crispy__icon__sizes); } } @@ -50,13 +46,13 @@ $icon__colors: ( * @param {map} $colors * */ -@mixin crispy-boilerplate-icon-colors($colors) { +@mixin crispy__icon-colors($colors) { @each $name, $color in $colors { @if ($name == 'default') { - @include crispy-boilerplate-icon-color($color); + @include crispy__icon-color($color); } @else { &--#{$name} { - @include crispy-boilerplate-icon-color($color); + @include crispy__icon-color($color); } } } @@ -69,7 +65,7 @@ $icon__colors: ( * @param {color} $color * */ -@mixin crispy-boilerplate-icon-color($color) { +@mixin crispy__icon-color($color) { fill: $color; } @@ -80,13 +76,13 @@ $icon__colors: ( * @param {map} $sizes * */ -@mixin crispy-boilerplate-icon-sizes($sizes) { +@mixin crispy__icon-sizes($sizes) { @each $name, $size in $sizes { @if ($name == 'default') { - @include crispy-boilerplate-icon-size($size); + @include crispy__icon-size($size); } @else { &--#{$name} { - @include crispy-boilerplate-icon-size($size); + @include crispy__icon-size($size); } } } @@ -99,7 +95,6 @@ $icon__colors: ( * @param {px} $size * */ -@mixin crispy-boilerplate-icon-size($size) { +@mixin crispy__icon-size($size) { width: $size; - height: $size; } diff --git a/scss/components/_list.scss b/src/scss/components/_list.scss similarity index 76% rename from scss/components/_list.scss rename to src/scss/components/_list.scss index 1cd93a4..2ca1bf3 100644 --- a/scss/components/_list.scss +++ b/src/scss/components/_list.scss @@ -8,11 +8,8 @@ * */ - -@mixin crispy-boilerplate-list { +@mixin crispy__list { .list { - list-style-position: outside; - &--horizontal { li { float: left; @@ -20,7 +17,7 @@ } &--clear { - @include crispy-boilerplate-list-clear(); + @include crispy__list-clear(); } } diff --git a/src/scss/components/_table.scss b/src/scss/components/_table.scss new file mode 100644 index 0000000..6b8ae45 --- /dev/null +++ b/src/scss/components/_table.scss @@ -0,0 +1,55 @@ +/** + * table + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *
nameage
The Shawshank Redemption12
+ * + * @author Björn Hase + * + */ + + $crispy__table__padding: pxToEm(10px) pxToEm(8px) !default; + + $crispy__table__color: $crispy__color-text !default; + $crispy__table__border-color: lighten($crispy__color-text, 40%) !default; + $crispy__table__striped__background-color: lighten($table__border-color, 4%) !default; + + @mixin crispy__table() { + .table { + width: 100%; + + &--strippd { + tr { + &:nth-child(even) { + background-color: $crispy__table__striped__background-color; + } + } + } + + td { + color: $crispy__table__color; + } + + th, td { + padding: $crispy__table__padding; + text-align: left; + border-bottom: 1px solid $crispy__table__border-color; + } + + th { + border-bottom-width: 2px; + } + } + } diff --git a/scss/crispyBoilerplate.scss b/src/scss/crispy.scss similarity index 100% rename from scss/crispyBoilerplate.scss rename to src/scss/crispy.scss diff --git a/src/scss/example.scss b/src/scss/example.scss new file mode 100644 index 0000000..2187c9a --- /dev/null +++ b/src/scss/example.scss @@ -0,0 +1,2 @@ +@import + 'crispyBoilerplate'; diff --git a/scss/functions/_units.scss b/src/scss/functions/_units.scss similarity index 71% rename from scss/functions/_units.scss rename to src/scss/functions/_units.scss index a764e4c..42e50ff 100644 --- a/scss/functions/_units.scss +++ b/src/scss/functions/_units.scss @@ -6,7 +6,6 @@ * */ -$base__font-size: 16px !default; /** * calculate pixel value to em @@ -15,7 +14,7 @@ $base__font-size: 16px !default; * @return {em} */ @function pxToEm($font-size) { - @return ($font-size / $base__font-size) * 1em; + @return ($font-size / $crispy__font-size) * 1em; } /** @@ -26,5 +25,5 @@ $base__font-size: 16px !default; * @return {em} */ @function pxToRem($font-size) { - @return ($font-size / $base__font-size) * 1rem; + @return ($font-size / $crispy__font-size) * 1rem; } diff --git a/scss/functions/_zIndex.scss b/src/scss/functions/_zIndex.scss similarity index 72% rename from scss/functions/_zIndex.scss rename to src/scss/functions/_zIndex.scss index ffc354b..8a9ec4a 100644 --- a/scss/functions/_zIndex.scss +++ b/src/scss/functions/_zIndex.scss @@ -8,20 +8,6 @@ * */ -$z-indexes: ( - 'site-header': 100, - 'modal': 1000 -) !default; - -/** - * z-index - * - * - * - * - * @return - * - */ @function zIndex($name) { @if index($z-indexes, $name) { @return map($z-indexes, $name); diff --git a/scss/components/_align.scss b/src/scss/helper/_align.scss similarity index 82% rename from scss/components/_align.scss rename to src/scss/helper/_align.scss index c13a325..a36d900 100644 --- a/scss/components/_align.scss +++ b/src/scss/helper/_align.scss @@ -1,16 +1,13 @@ /** * align * - * - text - * - floating for elements - * - centering with margin + * * * @author Björn Hase * */ - -@mixin crispy-boilerplate-align() { +@mixin crispy-align() { .text-left { text-align: left; } @@ -43,4 +40,8 @@ margin-left: auto; margin-right: auto; } + + .clearfix { + @include $crispy__clearfix(); + } } diff --git a/src/scss/helper/_background-color.scss b/src/scss/helper/_background-color.scss new file mode 100644 index 0000000..8145725 --- /dev/null +++ b/src/scss/helper/_background-color.scss @@ -0,0 +1,19 @@ +/** + * background-color + * + * modificators for text-color + * + * + * @author Björn Hase + * + */ + +$crispy__background-colors: $crispy__colors !default; + +@mixin crispy__background-color() { + @each $name, $color in $crispy__background-color { + .background-#{$name} { + background-color: $color; + } + } +} diff --git a/src/scss/helper/_helper.scss b/src/scss/helper/_helper.scss new file mode 100644 index 0000000..e69de29 diff --git a/scss/components/_margin.scss b/src/scss/helper/_margin.scss similarity index 60% rename from scss/components/_margin.scss rename to src/scss/helper/_margin.scss index ee96b2d..f8ed8c7 100644 --- a/scss/components/_margin.scss +++ b/src/scss/helper/_margin.scss @@ -1,47 +1,46 @@ /** * margin * - * modificators for margin + * * * * @author Björn Hase * */ - -$margin-top: pxToEm(5px) !default; -$margin-bottom: pxToEm(20px) !default; +$margin-top: $crispy__margin !default; +$margin-bottom: $crispy__margin !default; @mixin crispy-boilerplate-margin() { - .margin-top-y0 { + .margin-top-0x { margin-top: 0; } - .margin-top-y1 { + .margin-top-1x { margin-top: $margin-top; } - .margin-top-y2 { + .margin-top-2x { margin-top: $margin-top * 2; } - .margin-top-y3 { + .margin-top-3x { margin-top: $margin-top * 3; } - .margin-bottom-y0 { + .margin-bottom-0x { margin-bottom: 0; } - .margin-bottom-y1 { + .margin-bottom-1x { margin-bottom: $margin-bottom; } - .margin-bottom-y2 { + .margin-bottom-2x { margin-bottom: $margin-bottom * 2; } - .margin-bottom-y3 { + .margin-bottom-3x { margin-bottom: $margin-bottom * 3; } } diff --git a/src/scss/helper/_media.scss b/src/scss/helper/_media.scss new file mode 100644 index 0000000..ab5b639 --- /dev/null +++ b/src/scss/helper/_media.scss @@ -0,0 +1 @@ +// reflex grid commands for reflex grid diff --git a/src/scss/helper/_text-color.scss b/src/scss/helper/_text-color.scss new file mode 100644 index 0000000..bd6f5cb --- /dev/null +++ b/src/scss/helper/_text-color.scss @@ -0,0 +1,19 @@ +/** + * text-colors + * + * modificators for text-color + * + * + * @author Björn Hase + * + */ + +$crispy__text-colors: $crispy__colors !default; + +@mixin crispy-text-colors() { + @each $name, $color in $crispy__text-colors { + .text-#{$name} { + color: $color; + } + } +} diff --git a/src/scss/helper/_typography.scss b/src/scss/helper/_typography.scss new file mode 100644 index 0000000..3ef58d5 --- /dev/null +++ b/src/scss/helper/_typography.scss @@ -0,0 +1,5 @@ +/** + * + * + * + */ diff --git a/src/scss/helper/_visibilty.scss b/src/scss/helper/_visibilty.scss new file mode 100644 index 0000000..70878c1 --- /dev/null +++ b/src/scss/helper/_visibilty.scss @@ -0,0 +1,7 @@ +.hide { + display: none; +} + +.show { + +} diff --git a/src/scss/helper/_visible.scss b/src/scss/helper/_visible.scss new file mode 100644 index 0000000..7b7a65f --- /dev/null +++ b/src/scss/helper/_visible.scss @@ -0,0 +1,235 @@ +/** + * + * + * + * + */ + + +.show { + display: block; +} + +.hide { + display: none; + + &--xs { + @include media-xs { + display: none; + } + } + + &--sm { + + } + + &--md { + + } + + &--lg { + + } +} + +.lg-visible, +.md-visible, +.sm-visible, +.xs-visible { + display: none !important; +} + +.lg-visible-block, +.lg-visible-inline, +.lg-visible-inline-block, +.md-visible-block, +.md-visible-inline, +.md-visible-inline-block, +.sm-visible-block, +.sm-visible-inline, +.sm-visible-inline-block, +.xs-visible-block, +.xs-visible-inline, +.xs-visible-inline-block { + display: none !important; +} + +/** + * show + * + * + */ + +@media (max-width: 767px) { + .xs-visible { + display: block !important; + } + + table.xs-visible { + display: table !important; + } + + tr.xs-visible { + display: table-row !important; + } + + td.xs-visible, + th.xs-visible { + display: table-cell !important; + } +} + +@media (max-width: 767px) { + .xs-visible-block { + display: block !important; + } +} + +@media (max-width: 767px) { + .xs-visible-inline { + display: inline !important; + } +} + +@media (max-width: 767px) { + .xs-visible-inline-block { + display: inline-block !important; + } +} + +@media (min-width: 768px) and (max-width: 991px) { + .sm-visible { + display: block !important; + } + + table.sm-visible { + display: table !important; + } + + tr.sm-visible { + display: table-row !important; + } + + td.sm-visible, + th.sm-visible { + display: table-cell !important; + } +} + +@media (min-width: 768px) and (max-width: 991px) { + .sm-visible-block { + display: block !important; + } +} + +@media (min-width: 768px) and (max-width: 991px) { + .sm-visible-inline { + display: inline !important; + } +} + +@media (min-width: 768px) and (max-width: 991px) { + .sm-visible-inline-block { + display: inline-block !important; + } +} + +@media (min-width: 992px) and (max-width: 1199px) { + .md-visible { + display: block !important; + } + + table.md-visible { + display: table !important; + } + + tr.md-visible { + display: table-row !important; + } + + td.md-visible, + th.md-visible { + display: table-cell !important; + } +} + +@media (min-width: 992px) and (max-width: 1199px) { + .md-visible-block { + display: block !important; + } +} + +@media (min-width: 992px) and (max-width: 1199px) { + .md-visible-inline { + display: inline !important; + } +} + +@media (min-width: 992px) and (max-width: 1199px) { + .md-visible-inline-block { + display: inline-block !important; + } +} + +@media (min-width: 1200px) { + .lg-visible { + display: block !important; + } + + table.lg-visible { + display: table !important; + } + + tr.lg-visible { + display: table-row !important; + } + + td.lg-visible, + th.lg-visible { + display: table-cell !important; + } +} + +@media (min-width: 1200px) { + .lg-visible-block { + display: block !important; + } +} + +@media (min-width: 1200px) { + .lg-visible-inline { + display: inline !important; + } +} + +@media (min-width: 1200px) { + .lg-visible-inline-block { + display: inline-block !important; + } +} + +/** + * hidden + * + * + */ +@media (max-width: 767px) { + .xs-hidden { + display: none !important; + } +} +@media (min-width: 768px) and (max-width: 991px) { + .sm-hidden { + display: none !important; + } +} +@media (min-width: 992px) and (max-width: 1199px) { + .md-hidden { + display: none !important; + } +} +@media (min-width: 1200px) { + .lg-hidden { + display: none !important; + } +}