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.
126 lines
7.7 KiB
126 lines
7.7 KiB
<!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Getting started! | Crispy CSS</title><meta name="description" content="Start with Crispy CSS, here you find Variables to configure all values. There is also a short overview for the examples."><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body class="page"><header class="header header--fixed background-color-info"><div class="container"><div class="grid align-center"><div class="col-10 col-sm-3"><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-2 hide-sm text-right"><button id="nav-button" class="button button--transparent text-size-medium"><svg class="icon" alt="Hamburger"><use xlink:href="symbol-defs.svg#icon-hamburger"/></svg></button></div><div id="nav" class="col-sm-9 hide show-sm"><nav class="group text-right show"><ul class="group"><li class="group__item"><a href="getting-started.html">Getting started!</a></li><li class="group__item"><a href="core.html">Core</a></li><li class="group__item"><a href="components.html">Components</a></li><li class="group__item"><a href="helpers.html">Helpers</a></li><li class="group__item"><a href="mixins.html">Mixins</a></li><li class="group__item"><a href="functions.html">Functions</a></li></ul></nav></div></div></div></header><main class="container main"><div class="grid"><div class="col-12"><header class="main__header"><h1 class="main__title padding-bottom-2 text-center">Getting started!</h1></header><h2 class="h2 margin-bottom-1">Installation</h2><hr class="marginless margin-bottom-2"/><pre class="code"><code>npm install crispy-css
|
|
</code></pre><h3 class="h4">SCSS</h3><pre class="code"><code>@import
|
|
"node_modules/crispy-css/src/crispy";
|
|
</code></pre><p>Now include Components and Helpers you need.</p><pre class="code"><code>@include crispy__helpers();
|
|
@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>There are two additionals Versions of <span class="text-bold">Crispy</span>. There is <span class="text-bold">crispy-minimal</span>, that only includes Helpers and <span class="text-bold">crispy-all</span> that includes Helpers and all Components.</p><pre class="code"><code>@import
|
|
"node_modules/crispy-css/src/crispy-all";
|
|
</code></pre><pre class="code"><code>@import
|
|
"node_modules/crispy-css/src/crispy-minimal";
|
|
</code></pre><h4 class="h5">Configuration</h4><h5 class="h6">Breakpoints</h5><pre class="code"><code>$crispy__xs : 576px;
|
|
$crispy__sm : 768px;
|
|
$crispy__md : 992px;
|
|
$crispy__lg : 1200px;
|
|
$crispy__xlg: 1600px;
|
|
</code></pre><h5 class="h6">Fonts</h5><pre class="code"><code>$crispy__direction: ltr;
|
|
|
|
$crispy__font-family: "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
|
|
$crispy__font-weight: normal;
|
|
$crispy__font-size: 0.9rem;
|
|
$crispy__font-size-breakpoints: (
|
|
$crispy__md: 1.1rem
|
|
);
|
|
|
|
$crispy__font-family-monospace: "Lucida Console", Monaco, monospace;
|
|
$crispy__font-weight-monospace: normal ;
|
|
$crispy__font-size-monospace: 1rem ;
|
|
$crispy__font-size-monospace__breakpoints: (
|
|
$crispy__md: 1.1rem
|
|
);
|
|
|
|
$crispy__font-sizes: (
|
|
'default' : $crispy__font-size,
|
|
'small' : $crispy__font-size * 0.75,
|
|
'medium' : $crispy__font-size * 1.25,
|
|
'large' : $crispy__font-size * 1.5,
|
|
'big' : $crispy__font-size * 1.75,
|
|
'mega' : $crispy__font-size * 2,
|
|
);
|
|
|
|
$crispy__line-height: 1.4;
|
|
$crispy__line-height__breakpoints: (
|
|
$crispy__md: $crispy__golden-ratio
|
|
);
|
|
</code></pre><h5 class="h6">Colors</h5><pre class="code"><code>$crispy__color-primary: #f18f01;
|
|
$crispy__color-secondary: #b3b2af;
|
|
$crispy__color-success: #5cb85c;
|
|
$crispy__color-warning: #f0ad4e;
|
|
$crispy__color-danger: #d9534f;
|
|
$crispy__color-info: #0090d4;
|
|
|
|
$crispy__color-grey-light: hsl(0, 0%, 97%);
|
|
$crispy__color-grey: hsl(0, 0%, 48%);
|
|
$crispy__color-grey-dark: hsl(0, 0%, 29%);
|
|
$crispy__color-white: white;
|
|
|
|
$crispy__color-text: #363636;
|
|
$crispy__color-border: #dfdfdf;
|
|
$crispy__color-background: #ffffff;
|
|
|
|
$crispy__color-panel: #f9f9f9;
|
|
|
|
$crispy__color-link: $crispy__color-primary;
|
|
$crispy__color-link-hover: $crispy__color-secondary;
|
|
$crispy__color-link-visited: $crispy__color-primary;
|
|
$crispy__color-link-focus: $crispy__color-primary;
|
|
$crispy__color-link-active: $crispy__color-primary;
|
|
|
|
$crispy__colors: (
|
|
'primary' : $crispy__color-primary,
|
|
'secondary' : $crispy__color-secondary,
|
|
'success' : $crispy__color-success,
|
|
'warning' : $crispy__color-warning,
|
|
'danger' : $crispy__color-danger,
|
|
'info' : $crispy__color-info,
|
|
'grey' : $crispy__color-grey,
|
|
'grey-light' : $crispy__color-grey-light,
|
|
'grey-dark' : $crispy__color-grey-dark,
|
|
'white' : $crispy__color-white
|
|
);
|
|
</code></pre><h5 class="h6">Padding & Magin</h5><pre class="code"><code>$crispy__margin: 0 0 15px;
|
|
$crispy__margin-breakpoints: (
|
|
$crispy__md: 0 0 20px
|
|
);
|
|
|
|
$crispy__padding: 0.4em 0.6em;
|
|
$crispy__padding-breakpoints: (
|
|
$crispy__md: 0.8em 1.1em
|
|
);
|
|
</code></pre><h5 class="h6">Heading</h5><pre class="code"><code>$crispy__heading__font-sizes: (
|
|
'h1': $crispy__font-size * 2.5,
|
|
'h2': $crispy__font-size * 2,
|
|
'h3': $crispy__font-size * 1.75,
|
|
'h4': $crispy__font-size * 1.5,
|
|
'h5': $crispy__font-size * 1.25,
|
|
'h6': $crispy__font-size
|
|
) ;
|
|
|
|
$crispy__heading__font-sizes__breakpoints: (
|
|
$crispy__md: 1.2rem
|
|
);
|
|
|
|
$crispy__heading__font-weight: bold;
|
|
$crispy__heading__font-family: $crispy__font-family;
|
|
$crispy__heading__margin: $crispy__margin;
|
|
$crispy__heading__margin-breakpoints: $crispy__margin-breakpoints;
|
|
</code></pre><h5 class="h6">Borders</h5><pre class="code"><code>$crispy__border-radius: 3px !default;
|
|
$crispy__border: 1px solid $crispy__color-border !default;
|
|
</code></pre><h5 class="h6">Z-Index</h5><pre class="code"><code>$crispy__z-index: (
|
|
'overlay': 90,
|
|
'modal' : 100
|
|
) !default;
|
|
</code></pre><p>For Custom Variables add a File before importing Crispy.</p><pre class="code"><code>@import
|
|
"config",
|
|
"node_modules/crispy-css/src/crispy";
|
|
</code></pre><h2 class="margin-top-3 margin-bottom-1">Example</h2><hr class="marginless margin-bottom-2"/><p>You find all of this Site in "/src/example". This is also an Example how you can use Crispy CSS and orginaize your Project.</p><h3 class="h4">Site</h3><p>Contains header, footer and some partials that are used on a Site or Webapp.</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><li class="group__item"><a class="text-color-white" href="https://github.com/tentakelfabrik/crispy-css" target="_blank"><svg class="icon" alt="github"><use xlink:href="symbol-defs.svg#icon-github"/></svg></a></li></ul><p class="margin-top-1 margin-bottom-0">Made with euphoria by Björn Hase, <a class="text-color-white" href="https://tententakelfabrik.de" target="_blank">Tentakelfabrik</a></p></div></div></div></div></footer><script src="script.js"></script></body></html> |