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.

1 line
4.7 KiB

5 years ago
<!doctype html><html lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Crispy CSS | Lightweight CSS Framework for Building Apps and Websites</title><meta name="description" content="Lightweight Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="styles.css"></head><body class="home"><header id="header" class="header"><div class="container"><div class="grid"><div class="col-12"><div class="text-center"><hgroup><a href="/"><h1 class="h2 margin-top-4 margin-bottom-0"><svg class="icon icon--big margin-bottom-1" alt="Crispy CSS"><use xlink:href="symbol-defs.svg#icon-logo"/></svg><br/>Crispy CSS</h1></a><small class="text-color-primary">v3.0.0</small><h2 class="h5 margin-top-1">Lightweight CSS Framework for Building Apps and Websites</h2></hgroup></div></div></div></div></header><div class="container"><div class="grid margin-top-2 margin-bottom-2"><div class="col-12 col-sm-6 col-lg-4 col-align-center"><h3 class="h4 text-center"><span class="h3__icon"><svg class="icon icon-color-primary text-size-medium" alt="Mixins and Functions"><use xlink:href="symbol-defs.svg#icon-emoticon-zip"/></svg></span><div>Ugly</div></h3><p class="text-center">Yes, this Framework has no fancy Layout or shiny Elements, because what created with Crispy CSS could be fancy. This Framework adds basic styles and support your Work.</p></div><div class="col-12 col-sm-6 col-lg-4"><h3 class="h4 text-center"><span class="h3__icon"><svg class="icon icon-color-primary text-size-medium" alt="Customizeable"><use xlink:href="symbol-defs.svg#icon-spray"/></svg></span><div>Helpers</div></h3><p class="text-center">Mixins, Functions and Modifiers make your Workflow simpler. Only import Components you really need and make your Work lightweight.</p></div><div class="col-12 col-sm-6 col-lg-4"><h3 class="h4 text-center"><span class="h3__icon"><svg class="icon icon-color-primary text-size-large" alt="Coding Style"><use xlink:href="symbol-defs.svg#icon-design"/></svg></span><div>Coding Style</div></h3><p class="text-center">Crispy CSS uses <a href="http://getbem.com/" target="_blank">BEM</a>, but an simpler approach of it. BEM is good to show dependencies in Components and add structure to your Styles.</p></div></div><div class="margin-bottom-2 text-center text-size-medium"><a class="button background-color-success text-color-white margin-left-1 margin-right-1" href="/getting-started.html">Getting started! <svg class="icon margin-left-1" alt="proceed"><use xlink:href="symbol-defs.svg#icon-circle-right"/></svg> </a><a class="button background-color-grey text-color-white margin-left-1 margin-right-1" target="_blank" href="https://github.com/tentakelfabrik/crispy-css">Visit on Github <svg class="icon margin-left-1" alt="github"><use xlink:href="symbol-defs.svg#icon-github"/></svg></a></div><div class="margin-bottom-5 margin-top-4"><div class="grid"><div class="col-12"><h2 class="h3 text-center">Apps and Websites that have been crafted</h2></div></div><div class="grid"><div class="col-12 col-sm-6 col-md-4"><h3 class="h5 text-center">Tentakelfabrik</h3><a class="text-center show" href="https://tentakelfabrik.de" target="_blank"><img class="bordered img-responsive width-100" src="img/tentakelfabrik.jpg"/></a></div><div class="col-12 col-sm-6 col-md-4"><h3 class="h5 text-center">Gaming Circus</h3><a class="text-center show" href="https://gaming-circus.de" target="_blank"><img class="bordered img-responsive width-100" src="img/gaming-circus.jpg"/></a></div><div class="col-12 col-sm-6 col-md-4"><h3 class="h5 text-center">Trinkkofi</h3><a class="text-center show" href="https://trinkkofi.de" target="_blank"><img class="bordered img-responsive width-100" src="img/trinkkofi.jpg"/></a></div></div></div></div><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