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.
42 lines
8.9 KiB
42 lines
8.9 KiB
4 years ago
|
<!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Helpers | Crispy CSS</title><meta name="description" content="CSS-Classes that can be use to override other Styles, also used if there is no need to style the element."><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">Helpers</h1></header><h2 class="h3 margin-bottom-1">Border</h2><hr class="marginless margin-bottom-2"/><div class="panel panel__inner margin-bottom-1 bordered"><div style="width: 50px; height: 50px;" class="background-color-info round"></div>.round</div><div class="panel panel__inner margin-bottom-1 bordered"><div style="width: 50px; height: 50px;" class="background-color-info round radiusless"></div>.radiusless</div><div class="panel panel__inner margin-bottom-1 bordered">.bordered</div><div class="panel panel__inner margin-bottom-1 bordered rounded">.rounded</div><div class="panel panel__inner margin-bottom-1 bordered borderless">.borderless</div><h2 class="h3 margin-top-3 margin-bottom-1">Margin / Padding</h2><hr class="marginless margin-bottom-2"/><p>Padding and margin-left, -top, -right and -bottom. The Classes Paddingless and Marginless sets padding and margin in each direction to zero.</p><h3 class="h4">SCSS:</h3><pre class="code"><code>$crispy__helpers__spacing-gap: 8px;
|
||
|
|
$crispy__helpers__spacing-steps: 6;
|
||
|
|
$crispy__helpers__spacing-max-steps: 3;
|
||
|
|
$crispy__helpers__spacing-breakpoints: (
|
||
|
|
$crispy__md: 12px
|
||
|
|
);
|
||
|
|
</code></pre><div class="panel bordered padding-bottom-0">padding-bottom-0</div><div class="panel bordered padding-bottom-1">padding-bottom-1</div><div class="panel bordered padding-bottom-2">padding-bottom-2</div><div class="panel bordered padding-bottom-3">padding-bottom-3</div><div class="panel bordered padding-bottom-4">padding-bottom-4</div><div class="panel bordered padding-bottom-5">padding-bottom-5</div><div class="panel bordered padding-bottom-6">padding-bottom-6</div><div class="panel bordered paddingless">paddingless</div><div class="panel bordered paddingless">marginless</div><h2 class="h3 margin-top-3 margin-bottom-1">Typography</h2><hr class="marginless margin-bottom-2"/><p class="panel panel__inner bordered text-left">text-left</p><p class="panel panel__inner bordered text-center">text-center</p><p class="panel panel__inner bordered text-right">text-right</p><p class="panel panel__inner bordered text-justify">text-justify<br/>I'm baby literally tousled ramps 8-bit franzen, yuccie before they sold out stumptown XOXO palo santo. Blog taiyaki vegan crucifix. Mustache raw denim shabby chic vegan hexagon aesthetic deep v tofu man braid church-key pork belly unicorn pinterest. Palo santo heirloom banh mi waistcoat, neutra listicle selvage sustainable adaptogen tote bag art party migas ethical PBR&B 8-bit. Chillwave hammock VHS post-ironic, tumblr brunch normcore blue bottle chambray. Austin vice microdosing celiac. Bushwick blog farm-to-table succulents mlkshk actually.</p><p class="panel panel__inner bordered text-italic">text-italic</p><p class="panel panel__inner bordered text-light">text-light</p><p class="panel panel__inner bordered text-normal">text-normal</p><p class="panel panel__inner bordered text-medium">text-medium</p><p class="panel panel__inner bordered text-bold">text-bold</p><p class="panel panel__inner bordered text-capitalize">text-capitalize</p><p class="panel panel__inner bordered text-uppercase">text-uppercase</p><p class="panel panel__inner bordered text-smaller">text-smaller</p><p class="panel panel__inner bordered text-crossed">text-crossed</p><p class="panel panel__inner bordered text-unterline">text-underline</p><h2 class="h3 margin-top-3 margin-bottom-1">Font Size</h2><hr class="marginless margin-bottom-2"/><h3 class="h4">SCSS:</h3><pre class="code"><code>$crispy__font-size: 0.9rem;
|
||
|
|
$crispy__font-size-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,
|
||
|
|
);
|
||
|
|
</code></pre><p class="panel panel__inner bordered text-size-small">text-size-small</p><p class="panel panel__inner bordered text-size-medium">text-size-medium</p><p class="panel panel__inner bordered text-size-large">text-size-large</p><p class="panel panel__inner bordered text-size-big">text-size-big</p><p class="panel panel__inner bordered text-size-mega">text-size-mega</p><h2 class="h3 margin-top-3 margin-bottom-1">Float</h2><hr class="marginless margin-bottom-2"/><p class="panel panel__inner bordered clearfix"><span class="float-left">float-left</span></p><p class="panel panel__inner bordered clearfix"><span class="float-right">float-right</span></p><p class="panel panel__inner bordered"><span class="float-right float-none">float-none</span></p><p class="panel panel__inner bordered"><span class="show centered width-25 text-center background-color-info">centered</span></p><h2 class="h3 margin-top-3 margin-bottom-1">Colors</h2><hr class="marginless margin-bottom-2"/><h3 class="h4">SCSS:</h3><pre class="code"><code>$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><p class="panel panel__inner bordered text-color-danger">text-color-danger</p><p class="panel panel__inner bordered background-color-info">background-color-info</p><p class="panel panel__inner bordered border-color-success">border-color-success</p><h2 class="h3 margin-top-3 margin-bottom-1">Hide & Show</h2><hr class="marginless margin-bottom-2"/><p>For each Breakpoint there is a hide & show-CSS-Class.</p><h3 class="h4">Html:</h3><pre class="code"><code><span class="hide"></span>
|
||
|
|
<span class="show"></span>
|
||
|
|
<span class="show-inline"></span>
|
||
|
|
<span class="show hide-lg"></span>
|
||
|
|
</code></pre><h2 class="h3 margin-top-3 margin-bottom-1">Width</h2><hr class="marginless margin-bottom-2"/><h3 class="h4">SCSS:</h3><pre class="code"><code>$crispy__helpers__width: (
|
||
|
|
'25' : 25%,
|
||
|
|
'50' : 50%,
|
||
|
|
'75' : 75%,
|
||
|
|
'100': 100%
|
||
|
|
);
|
||
|
|
</code></pre><div class="panel panel__inner bordered width-25 margin-bottom-1">width-25</div><div class="panel panel__inner bordered width-50 margin-bottom-1">width-50</div><div class="panel panel__inner bordered width-75 margin-bottom-1">width-75</div><div class="panel panel__inner bordered width-100 margin-bottom-1">width-100</div></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>
|