Package Exports

cornflex

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (cornflex) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Cornflex v1.4

Modern css flexbox grid framework

Build complex layout with minimal code and pain
Lightweight - no useless props - only 8ko
Use the flexbox feature only
No vendor prefixes

Install

css

Download the latest build and add cornflex.min.css to your html page:

<link rel="stylesheet" href="/path/to/cornflex.min.css" type="text/css" >

npm

Run npm install cornflex and import cornflex.scss to your main scss file:

@import 'path/to/node_modules/cornflex';

This way, you can override variables used to generate specific data (do it before importing):

// number of cols in row
$cornflex-cols: 12;

// space between cols
$cornflex-gutter: 20px;

// screen breakpoints
$cornflex-breakpoints: (
  sm: 768px,
  md: 992px,
  lg: 1180px
);

Browser support

Cornflex is compatible with recent version of Chrome, Opera, Firefox and Edge.
Unfortunately, it might work on IE11...

Documentation

See examples here: myeti.github.io/cornflex.

Container

Define a max-width for your content based on the breakpoint value and set left and right padding with the gutter value (20px).

.container(-sm|-md|-lg)

<div class="container-md">
  ...
</div>

Grid

Let you define a grid of row containing columns with a specific size.

.row .col(-sm|-md|-lg) -> use remaining space
.row .col-[1..12](-sm|-md|-lg) -> limit to n/12

<div class="row">
  <div class="col-12 col-6-sm col-3-md"></div>
  <div class="col-12 col-6-sm col-3-md"></div>
  <div class="col-12 col-6-sm col-3-md"></div>
  <div class="col-12 col-6-sm col-3-md"></div>
</div>

Gutter

Add space based on the gutter value between columns.

.row-gutter

<div class="row row-gutter">
  <div class="col-12 col-6-sm col-3-md"></div>
  <div class="col-12 col-6-sm col-3-md"></div>
  <div class="col-12 col-6-sm col-3-md"></div>
  <div class="col-12 col-6-sm col-3-md"></div>
</div>

Reverse

Reverse order for right-to-left languages.

.row-rtl

<div class="row row-gutter row-rtl">
  <div class="col-12 col-6-sm col-3-md"></div>
  <div class="col-12 col-6-sm col-3-md"></div>
  <div class="col-12 col-6-sm col-3-md"></div>
  <div class="col-12 col-6-sm col-3-md"></div>
</div>

Justify

Specify how to horizontally align cols in row.

.row-[left|center|right|between|around](-sm|-md|-lg)

<div class="row row-gutter row-right row-center-md">
  <div class="col-3"></div>
  <div class="col-3"></div>
</div>

Align

Specify how to vertically align cols in row.

.row-[top|middle|bottom](-sm|-md|-lg)

<div class="row row-gutter row-bottom row-middle-md">
  <div class="col-4"></div>
  <div class="col-4"></div>
  <div class="col-4"></div>
</div>

Self-align

Individually specify how to vertically align cols in row.

.col-[top|middle|bottom](-sm|-md|-lg)

<div class="row row-gutter">
  <div class="col-4 col-bottom col-top-md"></div>
  <div class="col-4 col-middle"></div>
  <div class="col-4 col-top col-bottom-md"></div>
</div>

Order

Re-order cols in row (dot not change the dom).

.col-nth-[1..12](-sm|-md|-lg)

<div class="row row-gutter">
  <div class="col-3 col-nth-4 col-nth-2-md">#1</div>
  <div class="col-3 col-nth-3 col-nth-4-md">#2</div>
  <div class="col-3 col-nth-2 col-nth-1-md">#3</div>
  <div class="col-3 col-nth-1 col-nth-3-md">#4</div>
</div>

Shift

Shift cols using the remaining space or to specific offset.

.col-shift(-sm|-md|-lg) -> use the remaining space
.col-shift-[0..11](-sm|-md|-lg) -> to specific col offset

<div class="row row-gutter">
  <div class="col-2"> 1 </div>
  <div class="col-2 col-shift-6 col-shift-3-md"> 2 </div>
  <div class="col-2 col-shift-md"> 3 </div>
</div>

Hide

Hide cols from specific breakpoint.

.col-hide(-sm|-md|-lg)

<div class="row row-gutter">
  <div class="col-6"> 1 </div>
  <div class="col-6 col-hide-md"> 2 </div>
  <div class="col-hide col-6-md"> 3 </div>
</div>

cornflex