Lightweight CSS Framework for Building Apps and Websites
https://crispy-css.com
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
16 lines
3.7 KiB
16 lines
3.7 KiB
<!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Get Started | Crispy CSS</title><meta name="description" content=""><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body><header id="header" class="header header--fixed background-color-info"><div class="container"><div class="grid"><div class="col-12 col-md-4"><a href="/" class="text-color-white text-bold"><svg class="icon text-size-mega" alt="Crispy CSS"><use xlink:href="symbol-defs.svg#icon-logo"/></svg> Crispy CSS</a></div><div class="col-12 col-md-8"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getstarted.html" class="text-color-white">Get Started!</a></li><li class="group__item"><a href="core.html" class="text-color-white">Core</a></li><li class="group__item"><a href="components.html" class="text-color-white">Components</a></li><li class="group__item"><a href="helpers.html" class="text-color-white">Helpers</a></li><li class="group__item"><a href="mixins.html" class="text-color-white">Mixins</a></li><li class="group__item"><a href="functions.html" class="text-color-white">Functions</a></li></ul></nav></div></div></div></header><main class="container"><div class="grid"><div class="col-12"><header class="header"><h1 class="padding-top-4 padding-bottom-2 text-center">Get Started</h1></header><h2>Installation</h2><pre class="code"><code>npm install crispy-css</code></pre><h3 class="h4">SCSS</h3><pre class="code"><code>@import "crispy";</code></pre><p>Now include Mixins you need. Components and Modifiziers only works if you include them,</p><pre class="code"><code>@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();</code></pre><p>For Custom Variables add a File before importing Crispy,</p><pre class="code"><code>@import
|
|
"config",
|
|
"crispy";</code></pre><p>If you need all, mixins will be included,</p><pre class="code"><code>@import
|
|
"crispy-all";</code></pre><p>Only need Core and Modifiziers?</p><pre class="code"><code>@import
|
|
"crispy-minimal";</code></pre><h3 class="h4">CSS</h3><p>For using CSS you can use <span class="text-bold">crispy-all.css</span> for all Styles or <span class="text-bold">crispy-mininmal.css</span> without Components.</p><h2>Example</h2><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.</p><h3 class="h4">Site</h3><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.</p><h3 class="h4">Templates</h3><p>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></div></div></main><footer class="footer background-color-info margin-top-4 padding-top-3 padding-bottom-3"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><ul class="group group--hr"><li class="group__item"><a class="text-color-white" href="/imprint.html">Imprint</a></li><li class="group__item"><a class="text-color-white" href="/privacy-policy.html">Privacy Policy</a></li></ul><p class="margin-top-1 margin-bottom-0">Made with Euphorie by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer></body></html>
|