+ Get started! +
+ +Installation
+npm install crispy-cssHow 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__hero();
+@include crispy__icon();
+@include crispy__media();
+@include crispy__modal();
+@include crispy__overlay();
+@include crispy__panel();
+@include crispy__progress();
+@include crispy__table();For Custom Variables add a File before importing Crispy,
+@import
+ "config",
+ "crispy";If you need all, mixins will be included,
+@import
+ "crispy-all";Only need Core and Modifiziers?
+@import
+ "crispy-minimal";CSS
+For using CSS you can use crispy-all.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. +
+ + ++
+ Typography +
+ + +a
+Html:
+<a href=""></a>+ Color of Text is set by $crispy__color-primary. Hover is set by + $crispy__color-text +
+ + +abbr
+Html:
+<abbr title=""></abbr>+ Glossier viral occupy mixtape pok pok cornhole, vape affogato hella knausgaard thundercats +
+ + +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. ++ + +
hr
+Html:
+<hr>+
+ + + +
paragraph
+Html:
+<p></p>+ Glossier viral occupy mixtape pok pok. +
+ + +mark
+Html:
+<mark></mark>+ Pug before they four loko Deep v bespoke +
+ + +list
+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 +
+ 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 h2
+Heading h3
+Heading h4
+Heading h5
+Heading h6
+ + ++
+ Components +
+ + ++ Button +
+Html:
+<button class="button"></button>
+<button class="button width-100"></button>+ Code +
+Html:
+<pre class="code"><code></code></pre>+ Group +
+Html:
+<nav>
+ <ul class="group">
+ <li class="group__item">first item</li>
+ <li class="group__item">second item</li>
+ <li class="group__item">third item</li>
+ </ul>
+</nav>Html:
+<nav>
+ <ul class="group group--horizontal group--separate">
+ <li class="group__item">first item</li>
+ <li class="group__item">second item</li>
+ <li class="group__item">third item</li>
+ </ul>
+</nav>+ Hero +
+Html:
+<div class="hero" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div><div class="hero hero--top" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div><div class="hero hero--bottom" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>+ Icon +
++ To change Size you can use "text-size-*" that you find in the modifiers. +
+Html:
+<svg class="icon text-size-small">
+ <use xlink:href="symbol-defs.svg#icon-minus"></use>
+</svg>+ To change Color you can use "icon-color-*". +
+Html:
+<svg class="icon icon-color-danger">
+ <use xlink:href="symbol-defs.svg#icon-minus"></use>
+</svg>+ Panel +
+Html:
+<div class="panel">
+ <div class="panel__inner">
+ Lorem Ipsum
+ </div>
+</div>+ Progress +
+Html:
+<div class="progress">
+ <div class="progress__inner" style="width: 80%">
+ </div>
+</div>+ Modal +
+Html:
+<div class="modal modal--bottom width-100">
+ <div class="panel">
+ <div class="panel__inner">
+ Lorem Ipsum
+ </div>
+ </div>
+</div>+ Table +
+Html:
+<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 | +
+ Checkbox +
++ Radio +
++ + +
+ + +
+ Select +
++ Input / Textarea +
++
+ Functions +
+ + ++ stripUnit() +
+Sass:
+stripUnit(10px);+ Returns value without unit. +
+ + ++ zIndex(name) +
+Sass:
+zIndex('modal');+ Returns value from $crispy__z-index. +
+Sass:
+$crispy__z-index: (
+ 'overlay': 90,
+ 'modal' : 100
+);+
+ Modifiziers +
+ + ++ Margin & Padding +
++ Adding margin-top, -left, -bottom and -right and the same for padding. +
+Sass:
++$crispy__modifiers__spacing: 0.75em; +$crispy__modifiers__spacing__steps: 6; ++ +
Html:
+<div class="panel">margin-bottom-0</div> +<div class="margin-bottom-1">margin-bottom-1</div> +<div class="margin-bottom-2">margin-bottom-2</div> +<div class="margin-bottom-3">margin-bottom-3</div> +<div class="margin-bottom-4">margin-bottom-4</div> +<div class="margin-bottom-5">margin-bottom-5</div>+
+ Also set padding and margin to 0, +
+ +<div class="marginless"</div> +<div class="paddingless"</div>+ + +
+ 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>+ Typography +
+<div class="text-left"></div> +<div class="text-center"></div> +<div class="text-right"></div> +<div class="text-justify"></div> +<div class="text-italic"></div> +<div class="text-light"></div> +<div class="text-normal"></div> +<div class="text-medium"></div> +<div class="text-bold"></div> +<div class="text-capitalize"></div> +<div class="text-uppercase"></div> +<div class="text-lowercase"></div> +<div class="text-smaller"></div> +<div class="text-crossed"></div> +<div class="text-underline"></div>+ +
+ Also there are classes for, +
+-
+
- text-size-* with $crispy__font-sizes for "font-size" +
- text-color-* with $crispy__colors for "color" +
- background-color-* with $crispy__font-sizes for "background-color" +
+ Float +
+<div class="float-left"></div> +<div class="float-right"></div> +<div class="float-none"></div> +<div class="centered"></div> +<div class="clearfix"></div>+ + +
+ Position +
+<div class="relative"></div> +<div class="absolute"></div> +<div class="fixed"></div>+ + +
+ Border +
+<div class="bordered"></div> +<div class="rounded"></div> +<div class="borderless"></div> +<div class="radiusless"></div>+ + +
+ Visibility +
+<div class="hidden"></div> +<div class="visible"></div> +<div class="visible visible--inline"></div> +<div class="visible visible--inline-block"></div>+ + +
+ Width +
+Sass:
+$crispy__width: (
+ '25' : 25%,
+ '50' : 50%,
+ '75' : 75%,
+ '100': 100%
+)Html:
+<div class="panel width-25">width-25</div>
+<div class="width-50">width-50</div>
+<div class="width-75">width-75</div>
+<div class="width-100">width-100</div>+
+ Mixins +
+ + ++ Triangle +
+Sass:
+.triangle-left, .triangle-right, .triangle-top, .triangle-bottom {
+ display: block;
+}
+
+.triangle-left {
+ @include triangle('left', $crispy__color-primary);
+}
+
+.triangle-right {
+ @include triangle('right', $crispy__color-primary);
+}
+
+.triangle-top {
+ @include triangle('top', $crispy__color-primary);
+}
+
+.triangle-bottom {
+ @include triangle('bottom', $crispy__color-primary);
+}
+ + + + + +
+ + ++ Media Queries +
++ These @mixins were used with the Breakpoints from http://reflexgrid.com/docs/. + Reflex-Grid is also used as grid for this Site. +
+-
+
- xs 576px +
- sm 768px +
- md 992px +
- lg 1200px +
- xlg 1600px +
Html:
+<div class="sm">sm</div>
+<div class="md">md</div>
+<div class="md-only">md-only</div>
+<div class="lg-only">lg-only</div>Sass:
+.sm, .md, .md-only, .lg-only {
+ display: none;
+}
+
+.sm {
+ @include crispy__media-sm() {
+ display: block;
+ }
+}
+
+.md {
+ @include crispy__media-md() {
+ display: block;
+ }
+}
+
+.md-only {
+ @include crispy__media-md-only() {
+ display: block;
+ }
+}
+
+.lg-only {
+ @include crispy__media-lg-only() {
+ display: block;
+ }
+}