| @ -1,28 +1,72 @@ | |||||
| # Crispy - Lightweight CSS / SASS Framework | |||||
| # Crispy - Lightweight CSS / SCSS Framework | |||||
| ## Installation | ## Installation | ||||
| ``` | ``` | ||||
| npm install crispy-boilerplate | |||||
| npm install crispy-css | |||||
| ``` | ``` | ||||
| Main SCSS-File: | |||||
| ## How it works | |||||
| ### SCSS | |||||
| ``` | |||||
| @import | |||||
| "crispy"; | |||||
| ``` | |||||
| Now include Mixins you need. Components and Modifiziers only works if you include them,</ | |||||
| ``` | |||||
| @include crispy__core(); | |||||
| @include crispy__modifiers(); | |||||
| // components | |||||
| @include crispy__button(); | |||||
| @include crispy__code(); | |||||
| @include crispy__field(); | |||||
| @include crispy__group(); | |||||
| @include crispy__heading(); | |||||
| @include crispy__hero(); | |||||
| @include crispy__icon(); | |||||
| @include crispy__media(); | |||||
| @include crispy__modal(); | |||||
| @include crispy__overlay(); | |||||
| @include crispy__panel(); | |||||
| @include crispy__table(); | |||||
| ``` | |||||
| For Custom Variables add a File before importing Crispy, | |||||
| ``` | ``` | ||||
| @import | @import | ||||
| "variables", | |||||
| "crispy"; | "crispy"; | ||||
| ``` | ``` | ||||
| After this, include Mixins you need: | |||||
| If you need all, mixins will be included, | |||||
| ``` | ``` | ||||
| @include crispy__*() | |||||
| @import | |||||
| "crispy_all"; | |||||
| ``` | ``` | ||||
| To overwrite defaults simple add your own config-file after importing crispy: | |||||
| Only need Core and Modifiziers? | |||||
| ``` | ``` | ||||
| @import | @import | ||||
| "crispy", | |||||
| "config"; | |||||
| "crispy_minimal"; | |||||
| ``` | ``` | ||||
| ### CSS | |||||
| For using CSS you can use crispy.css for all Styles or crispy_mininmal.css without Components. | |||||
| ## 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. | |||||