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