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.
132 lines
5.8 KiB
132 lines
5.8 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-3 margin-bottom-2">
|
|
<div class="col-12 col-sm-6">
|
|
<h3 class="h4 text-center">
|
|
<span class="h3__icon">
|
|
<svg class="icon icon-color-primary text-size-medium" alt="Lightweight">
|
|
<use xlink:href="symbol-defs.svg#icon-paperplane" />
|
|
</svg>
|
|
</span>
|
|
<div>Lightweight</div>
|
|
</h3>
|
|
<p class="text-center">
|
|
Only what you need! Basic Settings and Styles to create UI-Elements for
|
|
<span class="text-weight-bold">Websites and Apps</span>. Less Code, less Size and that means Crispy CSS is
|
|
<span class="text-weight-bold">simple</span> and has less <span class="text-weight-bold">loading Time</span>!
|
|
</p>
|
|
</div>
|
|
<div class="col-12 col-sm-6">
|
|
<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-shipping" />
|
|
</svg>
|
|
</span>
|
|
<div>Ugly</div>
|
|
</h3>
|
|
<p class="text-center">
|
|
Youre are right, these Elements are not
|
|
</p>
|
|
</div>
|
|
<div class="col-12 col-sm-6">
|
|
<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-transformers" />
|
|
</svg>
|
|
</span>
|
|
<div>Customizable</div>
|
|
</h3>
|
|
<p class="text-center">
|
|
There are many Frameworks that really great, but if you want customize them,
|
|
that can be a lot of work. Crispy CSS is great to build Styles for Layouts that are <span class="text-weight-bold">unusual</span>.
|
|
</p>
|
|
</div>
|
|
<div class="col-12 col-sm-6">
|
|
<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-ruler" />
|
|
</svg>
|
|
</span>
|
|
<div>Coding Style</div>
|
|
</h3>
|
|
<p class="text-center">
|
|
Crispy CSS uses <a href="http://getbem.com/" target="_blank">BEM</a> for naming, but
|
|
a simpler approach of it. BEM is good to show other Developers what classes
|
|
are belong to a Component.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="margin-top-2 margin-bottom-2 text-center text-size-medium">
|
|
<a class="button background-color-success text-color-white" href="/getstarted.html">
|
|
Get started!
|
|
</a>
|
|
<a class="button background-color-grey text-color-white" target="_blank" href="https://github.com/tentakelfabrik/crispy-css">
|
|
Visit on Github
|
|
</a>
|
|
</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 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>
|