A small amount of Usefull Helpers to support your Work. That make it easer to create new Styles.
A small amount of Usefull modifiers to support your Work. That make it easer to create new Styles.
Modifiziers are helping to reduce code.
Modifiziers are helping to reduce code.
</p>
</p>
</div>
</div>
@ -97,6 +97,7 @@
<h2class="h3">How it works</h2>
<h2class="h3">How it works</h2>
<h3class="h4">SCSS</h3>
<preclass="code"><code>@import
<preclass="code"><code>@import
"crispy";</code></pre>
"crispy";</code></pre>
<p>Now include Mixins you need. Components and Modifiziers only works if you include them,</p>
<p>Now include Mixins you need. Components and Modifiziers only works if you include them,</p>
@ -121,13 +122,24 @@
"variables",
"variables",
"crispy";</code></pre>
"crispy";</code></pre>
<p>If you need all, mixins will be included,</p>
<preclass="code"><code>@import
"all";</code></pre>
<p>Only need Core and Modifiziers?</p>
<preclass="code"><code>@import
"minimal";</code></pre>
<h3class="h4">CSS</h3>
<p>For using CSS you can use <spanclass="text-weight-bold">crispy.css</span> for all Styles or <spanclass="text-weight-bold">crispy_mininmal.css</span> without Components.</p>
<h2class="h3">Example</h2>
<h2class="h3">Example</h2>
<p>
<p>
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.
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.
</p>
</p>
<h4>Site</h4>
<h4>Site</h4>
<p>
<p>
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.
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>
<h4>Templates</h4>
<h4>Templates</h4>
<p>
<p>
@ -306,11 +318,11 @@
) !default;</code></pre>
) !default;</code></pre>
<h1>Heading h1</h1>
<h1>Heading h1</h1>
<h2>Heading h1</h2>
<h3>Heading h1</h3>
<h4>Heading h1</h4>
<h5>Heading h1</h5>
<h6>Heading h1</h6>
<h2>Heading h2</h2>
<h3>Heading h3</h3>
<h4>Heading h4</h4>
<h5>Heading h5</h5>
<h6>Heading h6</h6>
<!-- components / hero -->
<!-- components / hero -->
<h3class="h4 margin-top-2 margin-bottom-0">
<h3class="h4 margin-top-2 margin-bottom-0">
@ -324,6 +336,9 @@
<h3class="h4 margin-top-2 margin-bottom-0">
<h3class="h4 margin-top-2 margin-bottom-0">
Icon
Icon
</h3>
</h3>
<p>
To change Size you can use "text-size-*" that you find in the <spanclass="text-weight-bold">modifiers</span>.
These <strong>@mixins</strong> were used with the Breakpoints from the <ahref="#reflex-grid">Reflex Grid</a>.
These <strong>@mixins</strong> were used with the Breakpoints from <atarget="_blank"href="http://reflexgrid.com/docs/">http://reflexgrid.com/docs/</a>.
The <strong>Reflex Grid</strong> is from <atarget="_blank"href="http://lendmeyourear.net">Lee Jordan</a>. I have build a few helper for media-queries. <strong>Reflex Grid </strong> is lightweight, simple and uses a flexbox grid with cross browser
