@ -5,7 +5,7 @@
< meta charset = "utf-8" > < meta charset = "utf-8" >
< meta http-equiv = "x-ua-compatible" content = "ie=edge" > < meta http-equiv = "x-ua-compatible" content = "ie=edge" >
< title > Crispy CSS | Lightweight SCSS Framework< / title > < title > Crispy CSS | Lightweight SCSS Framework< / title >
< meta name = "description" content = "Lightweight Framework for building Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements and Helpers." >
< meta name = "description" content = "Lightweight Framework for building Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers." >
< meta name = "viewport" content = "width=device-width, initial-scale=1" > < meta name = "viewport" content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href = "styles.css" > < link rel = "stylesheet" href = "styles.css" >
< / head > < / head >
@ -18,15 +18,15 @@
< div class = "text-center" > < div class = "text-center" >
< hgroup > < hgroup >
< a href = "/" > < a href = "/" >
< h1 class = "h3 margin-top-4 margin-bottom-2 " >
< svg class = "icon header__logo" alt = "Crisp" >
< h1 class = "h2 margin-top-4 margin-bottom-1 " >
< svg class = "icon header__logo text-size-mega " alt = "Crisp" >
< use xlink:href = "symbol-defs.svg#icon-logo" / > < use xlink:href = "symbol-defs.svg#icon-logo" / >
< / svg > < / svg >
Crispy 2.1. 2
Crispy CSS 2.2.3
< / h1 > < / h1 >
< / a > < / a >
< h2 class = "h6" > < h2 class = "h6" >
Lightweight CSS / SCSS Framework
Lightweight SCSS Framework
< / h2 > < / h2 >
< / hgroup > < / hgroup >
< / div > < / div >
@ -35,52 +35,61 @@
< / div > < / div >
< / header > < / header >
< div class = "container" > < div class = "container" >
< div class = "grid margin-top-5 margin-bottom-5 " >
< div class = "grid margin-top-3 margin-bottom-2 " >
< div class = "col-12 col-md-6" > < div class = "col-12 col-md-6" >
< h3 class = "h6" >
< svg class = "icon icon-color-primary" alt = "Lightweight" >
< use xlink:href = "symbol-defs.svg#icon-paperplane" / >
< / svg >
Lightweight
< h3 class = "h4 text-center" >
< span class = "h3__icon" >
< svg class = "icon icon-color-primary text-size-mega" alt = "Lightweight" >
< use xlink:href = "symbol-defs.svg#icon-paperplane" / >
< / svg >
< / span >
< div > Lightweight< / div >
< / h3 > < / h3 >
< p class = "text-size-medium" > < p class = "text-size-medium" >
Only what you need! Basic Styles to create UI-Elements,
but without endless overwritting. Less Code, less Size and that means Crispy is < span class = "text-weight-bold" > simple< / span > and < span class = "text-weight-bold" > fast< / span > !
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 > < / p >
< / div > < / div >
< div class = "col-12 col-md-6" > < div class = "col-12 col-md-6" >
< h3 class = "h6" >
< svg class = "icon icon-color-primary" alt = "Usefull modifiers" >
< use xlink:href = "symbol-defs.svg#icon-shipping" / >
< / svg >
Modifiziers, Mixins and Functions
< h3 class = "h4 text-center" >
< span class = "h3__icon" >
< svg class = "icon icon-color-primary text-size-mega" alt = "Mixins and Functions" >
< use xlink:href = "symbol-defs.svg#icon-shipping" / >
< / svg >
< / span >
< div > Mixins and Functions< / div >
< / h3 > < / h3 >
< p class = "text-size-medium" > < p class = "text-size-medium" >
A small amount of Usefull modifiers to support your Work. That make it easer to create new Styles .
Modifiziers are helping to reduce code .
A small amount of Usefull < span class = "text-weight-bold" > Mixins and Functions< / span > to support your Work
That make it easer to create new Styles .
< / p > < / p >
< / div > < / div >
< div class = "col-12 col-md-6" > < div class = "col-12 col-md-6" >
< h3 class = "h6" >
< svg class = "icon icon-color-primary" alt = "Customizeable" >
< use xlink:href = "symbol-defs.svg#icon-transformers" / >
< / svg >
Customizable
< h3 class = "h4 text-center" >
< span class = "h3__icon" >
< svg class = "icon icon-color-primary text-size-mega" alt = "Customizeable" >
< use xlink:href = "symbol-defs.svg#icon-transformers" / >
< / svg >
< / span >
< div > Customizable< / div >
< / h3 > < / h3 >
< p class = "text-size-medium" > < p class = "text-size-medium" >
There are many Frameworks that really great, but if you want customize them, There are many Frameworks that really great, but if you want customize them,
that can be a lot of work. Crispy is great to build Styles for Layouts that are unusual.
that can be a lot of work. Crispy CSS is great to build Styles for Layouts that are < span class = "text-weight-bold" > < / span >
< / p > < / p >
< / div > < / div >
< div class = "col-12 col-md-6" > < div class = "col-12 col-md-6" >
< h3 class = "h6" >
< svg class = "icon icon-color-primary" alt = "Coding Style" >
< use xlink:href = "symbol-defs.svg#icon-ruler" / >
< / svg >
Coding Style
< h3 class = "h4 text-center" >
< span class = "h3__icon" >
< svg class = "icon icon-color-primary text-size-mega" alt = "Coding Style" >
< use xlink:href = "symbol-defs.svg#icon-ruler" / >
< / svg >
< / span >
< div > Coding Style< / div >
< / h3 > < / h3 >
< p class = "text-size-medium" > < p class = "text-size-medium" >
Crispy uses < a href = "http://getbem.com/" target = "_blank" > BEM< / a > for naming, but
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 a simpler approach of it. BEM is good to show other Developers what classes
are belong to a Component. are belong to a Component.
< / p > < / p >
