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.
159 lines
6.9 KiB
159 lines
6.9 KiB
<!doctype html>
|
|
<html class="no-js" 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>
|
|
<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-6 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-6 text-center text-size-medium">
|
|
<a class="button background-color-success text-color-white" href="/getstarted.html">
|
|
Get 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" 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-6">
|
|
<div class="grid">
|
|
<div class="col-12">
|
|
<h2 class="h3 text-center margin-top-6">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-5 padding-bottom-2">
|
|
<div class="container">
|
|
<div class="grid">
|
|
<div class="col-12">
|
|
<div class="text-center">
|
|
<ul class="group group--horizontal group--separate">
|
|
<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">
|
|
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>
|