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.
8 lines
3.7 KiB
8 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>Mixins | Crispy CSS</title><meta name="description" content="Most Mixins will be used to handle Breakpoints and add Styles."><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">Mixins</h1></header><h2 class="h3 margin-bottom-1">crispy__clearfix()</h2><hr class="marginless margin-bottom-2"/><p>Clear Floats.</p><h2 class="h3 margin-top-3 margin-bottom-1">crispy__clearlist()</h2><hr class="marginless margin-bottom-2"/><p>Resets Style for a List-Element</p><h2 class="h3 margin-top-3 margin-bottom-1">crispy__media-*, crispy__media-*-only</h2><hr class="marginless margin-bottom-2"/><p>For each Breakpoint there is a Mixin as an Media Query.</p><pre class="code"><code>@include crispy__media-xs() {
|
|
|
|
}
|
|
|
|
@include crispy__media-xs-only() {
|
|
|
|
}
|
|
</code></pre><h2 class="h3 margin-top-3 margin-bottom-1">crispy__media-breakpoints($property, $breakpoints, $important: false)</h2><hr class="marginless margin-bottom-2"/><p>Set property and his value for each Breakpoint.</p><h2 class="h3 margin-top-3 margin-bottom-1">crispy__media-breakpoints-calculate($property, $factor, $breakpoints, $important: false)</h2><hr class="marginless margin-bottom-2"/><p>Set property and his value with an factor for each Breakpoint.</p><h2 class="h3 margin-top-3 margin-bottom-1">crispy__media-breakpoints-font-size($breakpoints, $font-size, $default, $important: false)</h2><hr class="marginless margin-bottom-2"/><p>Set font-size from Breakpoints, use for calculating difference from font-size and default font-size</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>
|