diff --git a/package.json b/package.json index 3251c3d..d9c08d1 100644 --- a/package.json +++ b/package.json @@ -1,15 +1,27 @@ { "name": "crispy-boilerplate", - "version": "0.9.3", + "version": "0.9.4", "description": "Flat Sass Boilerplate to give you a amount of Basic Settings, Mixins and Functions", "repository": { "type": "git", - "url": "git@github.com:nirgendswo/crispy-boilerplate.git" + "url": "git@github.com:HerrHase/crispy-boilerplate.git" }, "author": "Björn Hase", "license": "MIT", "dependencies": { "normalize.css": "^7.0.0", "reflex-grid": "^2.0.1" + }, + "config": { + "dest_dir": "dest/", + "src_dir": "src/", + }, + "scripts": { + "preinstall": "npm install -g node-sass clean-css-cli postcss-cli autoprefixer", + "build": "npm run css:build", + "css:build": "npm run css:clean && npm run css:postcss && npm run css:minify", + "css:clean": "rimraf $npm_package_config_dist_dir/css/*", + "css:postcss": "postcss $npm_package_config_dest_dir/css/*.css --use autoprefixer -d $npm_package_config_dest_dir/css/", + "css:minify": "cleancss $npm_package_config_dest_dir/css/landingPage.css > $npm_package_config_dest_dir/css/landingPage.min.css" } } diff --git a/src/scss/_base.scss b/src/scss/_base.scss index 0060834..3119209 100644 --- a/src/scss/_base.scss +++ b/src/scss/_base.scss @@ -1,3 +1,10 @@ +@import + '../../normalize.css/normalize', + '../../reflex-grid/scss/reflex', + + 'functions/functions', + 'mixins/mixins'; + /** * base * @@ -35,26 +42,72 @@ table { border-spacing: 0; } +// paragraphs p { margin: 0 0 $crispy__margin 0; } -ul, ol, dl { - margin: 0 0 $crispy__margin 0; -} - -ul { - list-style-position: outside; +// Semantic text elements +a, +ins, +u { + text-decoration-skip: ink edges; } a { color: $crispy__color-primary; + &:hover { + color: $crispy__color-text; + } + &:focus { outline: none; } } +abbr[title] { + border-bottom: 1px dotted; + cursor: help; + text-decoration: none; +} + +kbd { + // ? +} + +mark { + padding: pxToEm(10px); + +} + +// blockquote +blockquote { + border-left: 1px solid $crispy__color-text; + margin-left: 0; + padding: pxToEm(10px) pxToEm(20px); + + p:last-child { + margin-bottom: 0; + } +} + +// lists +ul, ol, dl { + margin: 0 0 $crispy__margin 0; +} + +ul { + list-style-position: outside; +} + +// divider +hr { + border: 0; + border-top: 1px solid $crispy__color-text; +} + +// body body { font-family: $crispy__body__font-family; font-weight: normal; diff --git a/src/scss/_config.scss b/src/scss/_config.scss index 1dc4f97..7f61b92 100644 --- a/src/scss/_config.scss +++ b/src/scss/_config.scss @@ -1,14 +1,19 @@ /** - * default + * config * * + * @author Björn Hase + * */ +// font $crispy__font-size: 16px !default; $crispy__golden-ratio: 1.618 !default; +// margin $crispy__margin: pxToEm(20px) !default; +// colors $cripsy__color-primary: #5ca4a9 !default; $cripsy__color-success: #6a8d73 !default; $cripsy__color-warning: #f4f1bb !default; @@ -16,6 +21,7 @@ $cripsy__color-danger: #ed6a5a !default; $cripsy__color-text: #969696 !default; $crispy__color-background: #e6ebe0 !default; +// body $crispy__body__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default; $crispy__body__line-height: $base__golden-ratio !default; $crispy__body__direction: ltr !default; diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss deleted file mode 100644 index 48cf659..0000000 --- a/src/scss/_mixins.scss +++ /dev/null @@ -1,65 +0,0 @@ -/** - * add font-size in px as fallback - * and in rem - * - * - * @param {px} $font-size - * - */ -@mixin font-size($font-size) { - font-size: $font-size; - font-size: pxToRem($font-size); -} - -/** - * add modificators for font-size from a map - * - * - * @param {map} $font-sizes - * - */ -@mixin font-sizes($font-sizes) { - @each $name, $font-size in $font-sizes { - @if ($name == 'default') { - @include font-size($font-size); - } @else { - &--#{$name} { - @include font-size($font-size); - } - } - } -} - -/** - * clearfix to end floating - * - * - * - */ -@mixin clearfix() { - &::before, - &::after { - display: table; - content: ' '; - } - - &::after { - clear: both; - } -} - -/** - * clear default styles from list - * - * - */ -@mixin crispy-boilerplate-list-clear() { - list-style: none; - margin: 0; - padding: 0; - - li { - margin: 0; - padding: 0; - } -} diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index 9525250..1d771e0 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -6,9 +6,36 @@ * */ +$crispy__button__padding: pxToEm(5px) pxToEm(10px) !default; + $crispy__button__up-margin: pxToEm(20px) !default; $crispy__button__up-padding: pxToEm(5px) !default; +$crispy__button__sizes: ( + 'default': 18px, + 'small': 14px, + 'large': 28px +) !default; + +$crispy__button__colors: ( + 'default': ( + 'color': $cripsy__color-text, + 'background-color': $crispy__color-primary + ), + 'success': ( + 'color': $cripsy__color-text, + 'background-color': $crispy__color-primary + ), + 'warning': ( + 'color': $cripsy__color-text, + 'background-color': $crispy__color-primary + ), + 'danger': ( + 'color': $cripsy__color-text, + 'background-color': $crispy__color-primary + ) +) !default; + @mixin crispy__button() { .button { position: relative; @@ -17,6 +44,8 @@ $crispy__button__up-padding: pxToEm(5px) !default; vertical-align: middle; appearance: none; + padding: $crispy__button__padding; + &--wide { width: 100%; } @@ -37,6 +66,7 @@ $crispy__button__up-padding: pxToEm(5px) !default; bottom: 0; } + &:hover { cursor: pointer; text-decoration: none; diff --git a/src/scss/components/_heading.scss b/src/scss/components/_heading.scss index 4f1059d..e1403ba 100644 --- a/src/scss/components/_heading.scss +++ b/src/scss/components/_heading.scss @@ -1,7 +1,8 @@ /** * heading * - * create classes for heading similar to there name + * create classes for heading similar to there name, + * run map for sizes on each heading * * * @author Björn Hase diff --git a/src/scss/components/_icon.scss b/src/scss/components/_icon.scss index 7a34792..d7e21bb 100644 --- a/src/scss/components/_icon.scss +++ b/src/scss/components/_icon.scss @@ -23,8 +23,10 @@ $crispy__icon__sizes: ( ) !default; $crispy__icon__colors: ( - 'default': black, - 'secondary': grey, + 'default': $cripsy__color-text, + 'success': $cripsy__color-success, + 'warning': $cripsy__color-warning, + 'danger': $cripsy__color-danger ) !default; @mixin crispy__icon() { diff --git a/src/scss/components/_list.scss b/src/scss/components/_list.scss deleted file mode 100644 index 2ca1bf3..0000000 --- a/src/scss/components/_list.scss +++ /dev/null @@ -1,35 +0,0 @@ -/** - * list - * - * styles and mixins for ol and ul-element - * - * - * @author Björn Hase - * - */ - -@mixin crispy__list { - .list { - &--horizontal { - li { - float: left; - } - } - - &--clear { - @include crispy__list-clear(); - } - } - - .d-list { - &--horizontal { - dt, dd { - float: left; - } - - dd { - clear: left; - } - } - } -} diff --git a/src/scss/components/_table.scss b/src/scss/components/_table.scss index 6b8ae45..257785a 100644 --- a/src/scss/components/_table.scss +++ b/src/scss/components/_table.scss @@ -20,36 +20,39 @@ * */ - $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; - } - } - } +$crispy__table__padding: pxToEm(10px) pxToEm(8px) !default; + +$crispy__table__td__border: 1px solid lighten($crispy__color-text, 40%) !default; +$crispy__table__th__border-width: 2px !default; + +$crispy__table__color: $crispy__color-text !default; +$crispy__table__striped__background-color: lighten($table__border-color, 4%) !default; + +@mixin crispy__table() { + .table { + width: 100%; + + &--striped { + tr { + &:nth-child(even) { + background-color: $crispy__table__striped__background-color; + } + } + } + + td { + color: $crispy__table__color; + } + + td, + th { + padding: $crispy__table__padding; + text-align: left; + border-bottom: $crispy__table__td__border; + } + + th { + border-bottom-width: $crispy__table__th__border-width; + } + } +} diff --git a/src/scss/crispy.scss b/src/scss/crispy.scss index 0d61883..f35a979 100644 --- a/src/scss/crispy.scss +++ b/src/scss/crispy.scss @@ -1,18 +1,7 @@ @import - '../../normalize.css/normalize', - - 'functions/units', - 'functions/zIndex', - - 'mixins', - - 'components/align', - 'components/body', + 'helpers/helpers', + 'components/button', - 'components/clearfix', 'components/heading', 'components/icon', - 'components/list', - 'components/margin', - 'components/normalize', - 'components/text-colors'; + 'components/table'; diff --git a/src/scss/example.scss b/src/scss/example.scss deleted file mode 100644 index 2187c9a..0000000 --- a/src/scss/example.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import - 'crispyBoilerplate'; diff --git a/src/scss/functions/_functions.scss b/src/scss/functions/_functions.scss new file mode 100644 index 0000000..fcd265d --- /dev/null +++ b/src/scss/functions/_functions.scss @@ -0,0 +1,3 @@ +@import + 'units', + 'zIndex'; diff --git a/src/scss/functions/_zIndex.scss b/src/scss/functions/_zIndex.scss index 8a9ec4a..a60f8fe 100644 --- a/src/scss/functions/_zIndex.scss +++ b/src/scss/functions/_zIndex.scss @@ -1,8 +1,6 @@ /** * z-index * - * handle z-index - * * * @author Björn Hase * diff --git a/src/scss/helper/_helper.scss b/src/scss/helper/_helper.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/scss/helper/_helpers.scss b/src/scss/helper/_helpers.scss new file mode 100644 index 0000000..e090590 --- /dev/null +++ b/src/scss/helper/_helpers.scss @@ -0,0 +1,8 @@ +@import + 'align', + 'background-color', + 'margin', + 'media', + 'text-color', + 'typography', + 'visibilty'; diff --git a/src/scss/helper/_margin.scss b/src/scss/helper/_margin.scss index f8ed8c7..552c3bb 100644 --- a/src/scss/helper/_margin.scss +++ b/src/scss/helper/_margin.scss @@ -8,10 +8,10 @@ * */ -$margin-top: $crispy__margin !default; -$margin-bottom: $crispy__margin !default; +$crispy__margin-top: $crispy__margin !default; +$crispy__margin-bottom: $crispy__margin !default; -@mixin crispy-boilerplate-margin() { +@mixin crispy__margin() { .margin-top-0x { margin-top: 0; } diff --git a/src/scss/helper/_media.scss b/src/scss/helper/_media.scss index ab5b639..e69de29 100644 --- a/src/scss/helper/_media.scss +++ b/src/scss/helper/_media.scss @@ -1 +0,0 @@ -// reflex grid commands for reflex grid diff --git a/src/scss/helper/_typography.scss b/src/scss/helper/_typography.scss deleted file mode 100644 index 3ef58d5..0000000 --- a/src/scss/helper/_typography.scss +++ /dev/null @@ -1,5 +0,0 @@ -/** - * - * - * - */ diff --git a/src/scss/helper/_visibilty.scss b/src/scss/helper/_visibilty.scss index 70878c1..ad6ee1e 100644 --- a/src/scss/helper/_visibilty.scss +++ b/src/scss/helper/_visibilty.scss @@ -1,7 +1,156 @@ -.hide { - display: none; -} +/** + * visibilty + * + * + * @author Björn Hase + * + */ + +@mixin crispy__visibilty() { + .hide { + display: none; + } + + .hide { + &--xs { + @include crispy__media-xs() { + display: none; + } + } + + &--sm { + @include crispy__media-sm() { + display: none; + } + } + + &--md { + @include crispy__media-md() { + display: none; + } + } + + &--lg { + @include crispy__media-lg() { + display: none; + } + } + + &--xlg { + @include crispy__media-xlg() { + display: none; + } + } + } + + .show { + display: block; + + &--inline { + display: inline; + } + + &--inline-block { + display: inline-block; + } + } + + // block + .show { + &--xs { + @include crispy__media-xs() { + display: block; + } + } + + &--sm { + @include crispy__media-sm() { + display: block; + } + } + + &--md { + @include crispy__media-md() { + display: block; + } + } + + &--lg { + @include crispy__media-lg() { + display: block; + } + } + + &--xlg { + @include crispy__media-xlg() { + display: block; + } + } + } + + // show inline + .show { + &--inline-xs { + @include crispy__media-xs() { + display: inline; + } + } + + &--inline-sm { + @include crispy__media-sm() { + display: inline; + } + } + + &--inline-md { + @include crispy__media-md() { + display: inline; + } + } + + &--inline-lg { + @include crispy__media-lg() { + display: inline; + } + } + + &--inline-xlg { + @include crispy__media-xlg() { + display: inline; + } + } + } + + // show inline block + .show { + &--inline-block-xs { + @include crispy__media-xs() { + display: inline-block; + } + } + + &--inline-block-sm { + @include crispy__media-sm() { + display: inline-block; + } + } + + &--inline-block-md { + @include crispy__media-md() { + display: inline-block; + } + } -.show { + &--inline-block-lg { + @include crispy__media-lg() { + display: inline-block; + } + } + &--inline-block-xlg { + @include crispy__media-xlg() { + display: inline-block; + } + } + } } diff --git a/src/scss/helper/_visible.scss b/src/scss/helper/_visible.scss deleted file mode 100644 index 7b7a65f..0000000 --- a/src/scss/helper/_visible.scss +++ /dev/null @@ -1,235 +0,0 @@ -/** - * - * - * - * - */ - - -.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; - } -} diff --git a/src/scss/mixins/_fonts.scss b/src/scss/mixins/_fonts.scss new file mode 100644 index 0000000..82c9416 --- /dev/null +++ b/src/scss/mixins/_fonts.scss @@ -0,0 +1,38 @@ +/** + * + * + * + * + */ + +/** + * add font-size in px as fallback + * and in rem + * + * + * @param {px} $font-size + * + */ +@mixin font-size($font-size) { + font-size: $font-size; + font-size: pxToRem($font-size); +} + +/** + * add modificators for font-size from a map + * + * + * @param {map} $font-sizes + * + */ +@mixin font-sizes($font-sizes) { + @each $name, $font-size in $font-sizes { + @if ($name == 'default') { + @include font-size($font-size); + } @else { + &--#{$name} { + @include font-size($font-size); + } + } + } +} diff --git a/src/scss/mixins/_media-queries.scss b/src/scss/mixins/_media-queries.scss new file mode 100644 index 0000000..530e31a --- /dev/null +++ b/src/scss/mixins/_media-queries.scss @@ -0,0 +1,69 @@ +/** + * media-queries + * + * + * @author Björn Hase + * + */ + + +@mixin crispy__media-xs() { + @media only screen and (min-width: $reflex-xs) { + $content; + } +} + +@mixin crispy__media-sm() { + @media only screen and (min-width: $reflex-sm) { + $content; + } +} + +@mixin crispy__media-md() { + @media only screen and (min-width: $reflex-md) { + $content; + } +} + +@mixin crispy__media-lg() { + @media only screen and (min-width: $reflex-lg) { + $content; + } +} + +@mixin crispy__media-xlg() { + @media only screen and (min-width: $reflex-xlg) { + $content; + } +} + +// only +@mixin crispy__media-xs-only() { + @media only screen and (min-width: $reflex-xs) and (max-width: $reflex-xs - 1) { + $content; + } +} + +@mixin crispy__media-sm-only() { + @media only screen and (min-width: $reflex-sm) and (max-width: $reflex-md - 1) { + $content; + } +} + +@mixin crispy__media-md-only() { + @media only screen and (min-width: $reflex-md) and (max-width: $reflex-md - 1) { + $content; + } +} + +@mixin crispy__media-lg-only() { + @media only screen and (min-width: $reflex-lg) and (max-width: $reflex-lg - 1) { + $content; + } +} + +@mixin crispy__media-xlg-only() { + @media only screen and (min-width: $reflex-xlg) and (max-width: $reflex-xlg - 1) { + $content; + } +} diff --git a/src/scss/mixins/_mixins.scss b/src/scss/mixins/_mixins.scss new file mode 100644 index 0000000..f183349 --- /dev/null +++ b/src/scss/mixins/_mixins.scss @@ -0,0 +1,37 @@ +@import + 'fonts', + 'media-queries'; + +/** + * clearfix to end floating + * + * + * + */ +@mixin crispy__clearfix() { + &::before, + &::after { + display: table; + content: ' '; + } + + &::after { + clear: both; + } +} + +/** + * clear default styles from list + * + * + */ +@mixin crispy__list-clear() { + list-style: none; + margin: 0; + padding: 0; + + li { + margin: 0; + padding: 0; + } +}