diff --git a/README.md b/README.md index 63be4ea..1b43de7 100644 --- a/README.md +++ b/README.md @@ -2,16 +2,10 @@ Flat Sass Boilerplate gives you an amount of basic settings, components, helpers, mixins and functions. -The problem of most frameworks is they trying to hard adding a lot of styles, -which has to be customized and documented if you used it for a Project. Often these changes cause a loss of -performance and raise the propability of errors. +The problem of most frameworks is they trying to hard adding a lot of styles, which has to be customized and documented +if you used it for a Project. Often these changes cause a loss of performance and raise the propability of errors. -Crispy Boilerplate uses also the following libraries: - -* normalize.css / [https://necolas.github.io/normalize.css/](https://necolas.github.io/normalize.css/) -* opt / [https://octicons.github.com](https://octicons.github.com) - -[Documentation](https://crispy-boilerplate.org) +[Documentation](https://crispy-boilerplate.readthedocs.io/en/latest/) ## Coding Style @@ -21,13 +15,7 @@ The boilerplate uses as coding style [http://getbem.com/](BEM), but as a more si Components are created to give you a structure and a basic set of styles and not to look fancy. The idea is to extend each component and save time to write a bunch of extra CSS code and therefore get more performance while minimize the causes of errors. Of Course is really Fancy to get more Performance and less Errors. -## Include - -Components and Helpers are organizes as Mixins, that makes it a little easier to -to add Styles you need. - ## Getting Started -### Installation ``` npm install crispy-boilerplate @@ -46,22 +34,10 @@ After this, include Mixins you need: @include crispy__*() ``` -To overwrite defaults simple add your own config-file before importing crispy: +To overwrite defaults simple add your own config-file after importing crispy: ``` @import "crispy", "config"; ``` - -### Example - -You find an example in "/src/example", this is this documentation. In the given example there are additional directories. These ones are part of a structure which might be helpful for you. - -#### Site - -Contains header, footer, partials that are used on a site or webapp. Header and footer are not classical components, there often more complex and have a special brand. - -#### Templates - -Templates are for a single site or a group of sites, they are complex and there is no benefit so reuse them as components. diff --git a/src/example/components/_button.scss b/example/components/_button.scss similarity index 79% rename from src/example/components/_button.scss rename to example/components/_button.scss index db36694..f824ade 100644 --- a/src/example/components/_button.scss +++ b/example/components/_button.scss @@ -1,19 +1,17 @@ /** + * component: button * * - * + * @author Björn Hase * */ + @mixin example__button() { .button { border: 1px solid darken($crispy__color-primary, 10%); background-color: $crispy__color-primary; color: white; - - svg { - fill: white; - } } } diff --git a/src/example/components/_nav.scss b/example/components/_nav.scss similarity index 52% rename from src/example/components/_nav.scss rename to example/components/_nav.scss index c350d3f..daaa8e6 100644 --- a/src/example/components/_nav.scss +++ b/example/components/_nav.scss @@ -6,13 +6,10 @@ * */ + @mixin example__nav() { .nav { - position: fixed; - - a { - @include crispy__font-size(18px); - } + } } diff --git a/src/example/example.scss b/example/example.scss similarity index 60% rename from src/example/example.scss rename to example/example.scss index ef766f4..b993ba6 100644 --- a/src/example/example.scss +++ b/example/example.scss @@ -8,17 +8,7 @@ // components @include crispy__button(); @include crispy__heading(); -@include crispy__icon(); -@include crispy__modal(); -@include crispy__panel(); @include crispy__table(); -@include crispy__field(); -@include crispy__field__text(); -@include crispy__field__checkbox(); -@include crispy__field__radio(); -@include crispy__field__select(); -@include crispy__field__panel(); -@include crispy__field__label(); // helpers @include crispy__float(); @@ -28,7 +18,6 @@ @include crispy__width(); // example -@include example__base(); @include example__container(); @include example__header(); @include example__footer(); diff --git a/example/site/_footer.scss b/example/site/_footer.scss new file mode 100644 index 0000000..fbf8fb6 --- /dev/null +++ b/example/site/_footer.scss @@ -0,0 +1,15 @@ +/** + * component: footer + * + * + * @author Björn Hase + * + */ + + +@mixin example__footer() +{ + .footer { + + } +} diff --git a/example/site/_header.scss b/example/site/_header.scss new file mode 100644 index 0000000..9ee524e --- /dev/null +++ b/example/site/_header.scss @@ -0,0 +1,20 @@ +/** + * component: header + * + * + * @author Björn Hase + * + */ + + +@mixin example__header() { + .header { + &__title { + + } + + &__logo { + + } + } +} diff --git a/example/templates/_home.scss b/example/templates/_home.scss new file mode 100644 index 0000000..3caddfd --- /dev/null +++ b/example/templates/_home.scss @@ -0,0 +1,12 @@ +/** + * template: home + * + * + * @author Björn Hase + * + */ + +@mixin example__home() +{ + +} diff --git a/src/example/icons/chip.svg b/src/example/icons/chip.svg deleted file mode 100644 index 51a44b7..0000000 --- a/src/example/icons/chip.svg +++ /dev/null @@ -1,65 +0,0 @@ - -image/svg+xml \ No newline at end of file diff --git a/src/example/site/_base.scss b/src/example/site/_base.scss deleted file mode 100644 index bee93cc..0000000 --- a/src/example/site/_base.scss +++ /dev/null @@ -1,15 +0,0 @@ -/** - * site: base - * - * - * @author Björn Hase - * - */ - -@mixin example__base() { - h2 { - @include crispy__media-md() { - padding-top: toEm(14px); - } - } -} diff --git a/src/example/site/_footer.scss b/src/example/site/_footer.scss deleted file mode 100644 index 5ee0e9b..0000000 --- a/src/example/site/_footer.scss +++ /dev/null @@ -1,16 +0,0 @@ -/** - * - * - * - * - */ - -@mixin example__footer() -{ - .footer { - padding: toEm(12px 0); - background-color: #e9e9e9; - border-top: 1px dotted #959595; - margin: toEm(50px 0 0 0); - } -} diff --git a/src/example/site/_header.scss b/src/example/site/_header.scss deleted file mode 100644 index 3ae88b3..0000000 --- a/src/example/site/_header.scss +++ /dev/null @@ -1,45 +0,0 @@ -/** - * component: header - * - * - * @author Björn Hase - * - */ - -@mixin example__header() { - .header { - padding: toEm(8px 0 0); - margin: toEm(0 0 20px); - - @include crispy__media-sm() { - margin: toEm(0 0 60px); - } - - a { - text-decoration: none; - - &:hover { - color: $crispy__color-primary; - } - } - - &__title { - margin: 0; - } - - &__subtitle { - margin: toEm(15px 0 0); - color: $crispy__color-text; - } - - &__logo { - width: 50px; - margin: toEm(20px 0 0); - } - - &__small { - display: block; - margin: -10px; - } - } -} diff --git a/src/example/templates/_home.scss b/src/example/templates/_home.scss deleted file mode 100644 index 69cadc1..0000000 --- a/src/example/templates/_home.scss +++ /dev/null @@ -1,47 +0,0 @@ -/** - * template: home - * - * - * @author Björn Hase - * - */ - -@mixin example__home() -{ - .lead { - margin-top: -(toEm(5px)); - } - - .panel { - border: 1px solid lighten($crispy__color-secondary, 10%); - background-color: lighten($crispy__color-secondary, 25%); - } - - .sm, .md, .md-only, .lg-only { - display: none; - } - - .sm { - @include crispy__media-sm() { - display: block; - } - } - - .md { - @include crispy__media-md() { - display: block; - } - } - - .md-only { - @include crispy__media-md-only() { - display: block; - } - } - - .lg-only { - @include crispy__media-lg-only() { - display: block; - } - } -}