$crispy__heading__font-sizes: (
+Sass:
+$crispy__heading__font-sizes: (
'h1': 40px,
'h2': 36px,
'h3': 32px,
@@ -115,81 +197,97 @@
'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
- Html:
- <abbr title=""></abbr>
-
- Glossier viral occupy mixtape pok pok cornhole, vape affogato hella knausgaard thundercats
-
+Heading h1
+Heading h1
+Heading h1
+Heading h1
+Heading h1
+Heading h1
-
- Lists
- Html:
- <ul>
- <li>item 1</li>
- <li>
- item 2
- <ul>
- <li>child item 1</li>
- <li>child item 2</li>
- </ul>
- </li>
-</ul>
-<ol>
- <li>item 1</li>
- <li>item 2</li>
-</ol>
-<dl>
- <dt>defined title 1</dt>
- <dd>defined item 1</dd>
-</dl>
-
- - item 1
- -
- item 2
-
- - child item 1
- - child item 2
-
-
-
-
- - item 1
- - item 2
-
-
- - defined title 1
- defined item 1
-
+
+
+ Hero
+
+Html:
+<div class="hero hero--bottom" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
+
-
-
+
+
+ Icon
+
+Html:
+<svg class="icon icon--small" alt="beaker" viewBox="0 0 100 100">
+ <use xlink:href="/svg/icons.svg#beaker" />
+</svg>
+<svg class="icon" alt="beaker" viewBox="0 0 100 100">
+ <use xlink:href="/svg/icons.svg#beaker" />
+</svg>
+<svg class="icon icon--large" alt="beaker" viewBox="0 0 100 100">
+ <use xlink:href="/svg/icons.svg#beaker" />
+</svg>
+<svg class="icon icon--danger" alt="alert" viewBox="0 0 100 100">
+ <use xlink:href="/svg/icons.svg#alert" />
+</svg>
+
+
+
+
+
-
-
- <button class="button"></button>
-<button class="button button--wide"></button>
+
+
+ Modal
+
+Html:
+<div class="modal modal--bottom width-100">
+ <div class="panel">
+ <div class="panel__inner">
+ Lorem Ipsum
+ </div>
+ </div>
+</div>
+
-
- Table
- <table class="table table--striped">
+
+
+ Panel
+
+Html:
+<div class="panel">
+ <div class="panel__inner">
+ Lorem Ipsum
+ </div>
+</div>
+
+
+
+
+ Table
+
+/components
+Html:
+<table class="table table--striped">
<thead>
<tr>
<th></th>
@@ -198,121 +296,311 @@
<tbody>
<tr>
<td></td>
- </tr>
+ </tr>
</tbody>
</table>
-
-
-
- | name |
- age |
-
-
-
-
- | Mr. Brown |
- 43 |
-
-
- | Mr. Magenta |
- 32 |
-
-
- | Mr. White |
- 45 |
-
-
-
-
-
-
- Helpers
-
+
+
+
+ | name |
+ age |
+
+
+
+
+ | Mr. Brown |
+ 43 |
+
+
+ | Mr. Magenta |
+ 32 |
+
+
+ | Mr. White |
+ 45 |
+
+
+
+
+
+
+
+ Functions
+
-
-
- Media
-
- <img class="img-responsive" src="https://picsum.photos/400" />
+
+
+ toEm()
+ toRem()
+
+/functions
+Sass:
+toEm(5px);
+toEm(10px 10px 0 0);
+toRem(10px 10px 0 0);
+
+
+ Returns em and rem, accepts px and unitless values.
+
+
+
+
+ stripUnit()
+
+/functions
+Sass:
+toEm(10px);
+
+ Returns value without unit.
+
+
+
+
+
+ Helpers
+
+
+
+
+
+
+
+ Align
+
+<div class="text-left"></div>
+<div class="text-center"></div>
+<div class="text-right"></div>
+<div class="text-justify"></div>
+<div class="float-left"></div>
+<div class="float-center"></div>
+<div class="float-none"></div>
+<div class="center"></div>
+<div class="clearfix"></div>
+
+
+
+ Margin
+
+
+ margin-top and -bottom from $crispy__margin as px.
+
+<div class="panel margin-bottom-0x">margin-bottom-0x</div>
+<div class="panel margin-bottom-1x">margin-bottom-1x</div>
+<div class="panel margin-bottom-2x">margin-bottom-2x</div>
+<div class="panel margin-bottom-3x">margin-bottom-3x</div>
+margin-bottom-0x
+margin-bottom-1x
+margin-bottom-2x
+margin-bottom-3x
+
+
+
+ Media
+
+<img class="img-responsive" src="https://picsum.photos/400" />
<figure>
<img class="img-responsive" src="https://picsum.photos/400" />
<figcaption class="text-center">Lorem Ipsum</figcaption>
+</figure>
+<div class="video-responsive" style="height: 280px;">
+ <iframe src="https://giphy.com/embed/13XW2MJE0XCoM0" width="480" height="361"></iframe>
+</div>
+
+
+
+
+
+
+
+ Lorem Ipsum
+
+
+
+ Width
+
+<div class="panel width-25">width-25</div>
+<div class="panel width-50">width-50</div>
+<div class="panel width-75">width-75</div>
+<div class="panel width-100">width-100</div>
+width-25
+width-50
+width-75
+width-100
+
+
+ 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
+ Html:
+ <abbr title=""></abbr>
+
+ Glossier viral occupy mixtape pok pok cornhole, vape affogato hella knausgaard thundercats
+
+
+
+ >Lists
+ Html:
+ <ul>
+ <li>item 1</li>
+ <li>
+ item 2
+ <ul>
+ <li>child item 1</li>
+ <li>child item 2</li>
+ </ul>
+ </li>
+</ul>
+<ol>
+ <li>item 1</li>
+ <li>item 2</li>
+</ol>
+<dl>
+ <dt>defined title 1</dt>
+ <dd>defined item 1</dd>
+</dl>
+
+ - item 1
+ -
+ item 2
+
+ - child item 1
+ - child item 2
+
+
+
+
+ - item 1
+ - item 2
+
+
+ - defined title 1
- defined item 1
+
+
+
+
+
+
+
+
+
+
+
+
+ Helpers
+
+
+
+ >
+ align
+
+ <img class="img-responsive" src="https://picsum.photos/400" />
+<figure>
+ <img class="img-responsive" src="https://picsum.photos/400" />
+ <figcaption class="text-center">Lorem Ipsum</figcaption>
</figure>
-
-
-
-
-
-
-
- Lorem Ipsum
-
-
-
-
- Reflex Grid
-
-
- 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/
- Github: https://github.com/leejordan/reflex
-
+
-
-
- Media Queries
-
-
- For Media Queries uses the Breakpoints from the Reflex Grid.
-
-
- - xs: 576px
- - sm: 768px
- - md: 992px
- - lg: 1200px
- - xlg: 1600px
-
-
- 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.
-
+
+ >
+ Media
+
+
+
+
+
+
+ Reflex Grid
+
+
+ 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/
+ Github: https://github.com/leejordan/reflex
+
-
- Sass:
-
- @include crispy__media-md() {
- <!-- your code -->
+
+ >
+ Media Queries
+
+
+ For Media Queries uses the Breakpoints from the Reflex Grid.
+
+
+ - xs: 576px
+ - sm: 768px
+ - md: 992px
+ - lg: 1200px
+ - xlg: 1600px
+
+
+ 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.
+
+
+
+ Sass:
+
+ @include crispy__media-md() {
+ <!-- your code -->
}
@include crispy__media-md-only() {
- <!-- your code -->
+ <!-- your code -->
}
-