|
|
- <!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>
|
