Crispy is an open source css framework built to get your webpages well structured as well as keep you in absolute control of your design. Crispy css provides you with just enough tools to enable you achieve any layout of your choice through the grid system and the flexbox model.
Crispy css is in a single css file can be used both offline and online.
Use this link to download crispy.css or download this repository to use crispy css offline.
Simply copy and paste the line below to your HTML head tag.
<link rel="stylesheet" type="text/css" href="https://kaggwachristopher.github.io/crispy/crispy-min.css" />To use Crispy CSS follow the cheat sheet below.
| CSS | CRISPY CLASS |
|---|---|
| display:flex | flex |
| justify-content | jc-start jc-end jc-center jc-between jc-around jc-evenly |
| flex-direction | fd-row-reverse fd-row-reverse fd-column fd-column-reverse |
| flex-wrap | wrap no-wrap wrap-reverse |
| align-items | ai-start ai-end ai-center ai-baseline ai-stretch |
| align-content | ac-start ac-end ac-center ac-between ac-around ac-stretch |
| align-self | as-start as-end as-center as-baseline as-stretch |
Crispy css modifies the bootstrap grid system so a clear understanding of the bootstrap 12 columns rule is an advantage.
| Bootstrap | Crispy |
|---|---|
| container | grid |
| row | row |
| col-lg-<number of colums> col-lg-12 col-lg-5 |
lg-<number of colums> lg-12 lg-5 |
| col-md-<number of colums> col-md-12 md-5 |
md-<number of colums> md-12 md-5 |
| col-sm-<number of colums> col-sm-12 col-sm-5 |
sm-<number of colums> sm-12 sm-5 |
| col-xs-<number of colums> col-xs-12 col-xs-5 |
xs-<number of colums> xs-12 xs-5 |
| col-md-offset-<number of colums> col-md-12-offset-5 |
md-<number of colums> md-12-offset-5 |
| col-xs-pull-<number of colums> col-xs-pull-12 col-lg-pull-5 |
lg-<number of colums> xs-pull-12 lg-pull-5 |
| col-xs-push-<number of colums> col-lg-push-5 |
xs-push-<number of colums> lg-push-5 |
| RULE | CRISPY CLASS |
|---|---|
| full width | full |
| half width | half |
| text alignment | left right justify center |
| hide overflow | truncate |
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.