Many Boilerplates and also Frameworks, are trying to hard adding styles that
are most time will be overwritten to make it work for you. This causes a loss in
Performance and more Fighting with the Framework and the Documentation.
[Documentation](https://crispy-boilerplate.org)
[Documentation](https://crispy-boilerplate.org)
## Coding Style
## Coding Style
The Boilerplate uses as Coding Style [http://getbem.com/](BEM), but as a more
simpler idea of it. One of the Benefits of BEM is that you create Components and
can reuse them. But one the other hand it can be really Strange if you overthinking it.
The boilerplate uses as coding style [http://getbem.com/](BEM), but as a more simpler idea of it. One of the benefits of BEM is that you create components and can reuse them. But one the other hand it can be really strange if you overthinking it.
## Not Fancy but Small
## Not Fancy but Small
Components are created to give you a Structure and a Basic set of Styles and
not that they look fancy. The Idea is to extend each Compontent and save up
a Bunch of CSS Code and so get more Performance and less Errors.
Of Course is really Fancy to get more Performance and less Errors.
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.
## Only Include if you need it
## Include
Components and Helpers are organizes as Mixins, that makes it a little easier to
Components and Helpers are organizes as Mixins, that makes it a little easier to
to add Styles you need.
to add Styles you need.
@ -51,7 +47,7 @@ After this, include Mixins you need:
@include crispy__*()
@include crispy__*()
```
```
To overwrite defaults simple adding your own config-file before import crispy:
To overwrite defaults simple add your own config-file before importing crispy:
```
```
@import
@import
@ -61,16 +57,12 @@ To overwrite defaults simple adding your own config-file before import crispy:
### Example
### Example
You find an Example in "/src/example". It is also the site of the Documentation.
In the Example there are additional Directories. These one are part of a Structure
you might find helpful.
You find an example in "/src/example". The documentation is also there. In the given example there are additional directories. These ones are part of a structure which might be helpful for you.
#### Site
#### Site
Contains header, footer, Partials that use on are site or webapp. Header, Footer are
not Classical Components, there often more Complex and have a special Brand.
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
Templates are for a single Site or a group of Sites, they are complex and the is
no benfit so reuse them as Components.
Templates are for a single site or a group of sites, they are complex and there is no benefit so reuse them as components.
<p>To overwrite defaults simple add your own config-file before importing crispy:</p>
<preclass="code"><code>@import
"config",
"crispy";</code></pre>
<h3>Example</h3>
<p>
<p>
This Site is also a Example to use the Boilerplate. You can find all
Styles for this site in "/src/scss/example". You see also that there
is a <strong>"templates" Directory</strong>. The Idea in <strong>BEM</strong> was always
create all in Components. That is not always Practical.
You find an example in "/src/example". The documentation is also there. In the given example there are additional directories. These ones are part of a structure which might be helpful for you.
</p>
</p>
<h3>Site</h3>
<p>
<p>
Sometimes, the more Bigger Picture, on a Single Site or in App the
Stylings that are so special that the belong only there and are to complex
for a component. For this use the <strong>"templates" Directory</strong>.
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.
</p>
</p>
<h3>Templates</h3>
<p>
<p>
Sites also have partials like header and footer, they can put into the <strong>directory "site"</strong>.
</p>
<h2></h2>
<p>
To Include the Framework simple import "cripsy", each component or helper is a mixin
There are shortcuts for components and helpers to include all at once.
HerrHase
6 years ago
