-
Crispy Boilerplate - pure CSS
+
+
+
+
Crispy Boilerplate - small, simple, pure CSS
+
-
+ Glossier viral occupy mixtape pok pok cornhole, vape affogato hella knausgaard thundercats
+ The Reflex Grid is from Lee Jordan. I have
+ build a few helper for media-queries. Reflex Grid is lightweight, simple and uses a flexbox grid with
+ cross browser support, an inline-block fallback.
+
+ Documentation: http://reflexgrid.com/docs/
+ For Media Queries uses the Breakpoints from the Reflex Grid.
+
+ You can uses a Mixin to add styles to an Breakpoint.If you want
+ that a style only belong to one Breakpoints "-only", otherwise it is
+ Mobile First.
+ <h2></h2>
+
+
+ Heading
+ Html:
+ <h2></h2>
<h2 class="h3"></h2>
+ Sass:
+ $crispy__heading__font-sizes: (
+ 'h1': 40px,
+ 'h2': 36px,
+ 'h3': 32px,
+ 'h4': 28px,
+ 'h5': 24px,
+ 'h6': 20px
+) !default;
+
+ Heading h1
+ Heading h1
+ Heading h1
+ Heading h1
+ Heading h1
+ Heading h1
+
+ Strong
+
+
+ blockquote
+ Html:
+ <blockquote></blockquote>
+
+ Hoodie kickstarter four loko, pinterest hashtag chambray glossier. Pug before they sold out etsy listicle. Deep v bespoke tacos polaroid, squid flexitarian crucifix messenger bag.
+
+
+
+ abbr
+
- Strong <strong>
-
-
-
- Hoodie kickstarter four loko, pinterest hashtag chambray glossier. Pug before they sold out etsy listicle. Deep v bespoke tacos polaroid, squid flexitarian crucifix messenger bag.
-
-
-
+
-
-
-
-
-
- <abbr title=""></abbr>
+
+
+
+
+
+
+
+
Buttons
-
-
-
-
+
+
+
+
+
+
+
+ <button class="button button--danger"></button>
+<button class="button button--success"></button>
+<button class="button button--warning"></button>
+<button class="button button--danger"></button>
+<button class="button button--up"></button>
+<button class="button button--down"></button>
+
+
Table
-
-
+
-
-
-
-
-
-
- name
- age
-
-
- The Shawshank Redemption
- 12
-
-
- The Shawshank Redemption
- 12
-
-
-
- The Shawshank Redemption
- 12
- <table class="table table--striped">
+ <thead>
+ <tr>
+ <th></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td></td>
+ </tr>
+ </tbody>
+</table>
+
+
+
+
+
+
+
+
+
+
+ name
+ age
+
+
+ Mr. Brown
+ 43
+
+
+ Mr. Magenta
+ 32
+
+
+
+ Mr. White
+ 45
+
+
+ Reflex Grid
+
+
+ Github: https://github.com/leejordan/reflex
+
+ Media Queries
+
+
+
+
+ Sass:
+
+ @include crispy__media-md() {
+ <!-- your code -->
+}
+
+@include crispy__media-md-only() {
+ <!-- your code -->
+}
+