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

Lightweight CSS flexbox grid framework (8ko)

Rules

Include dist/cornflex.min.css in your page, see myeti.github.io/cornflex for examples.

Container

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

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

Row and columns

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

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

Row and columns with gutter

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

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

Justify content

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

Align items

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

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

Self-align item

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

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

Order

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

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

Shift

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

<div class="row row-gutter">
  <div class="col-3 col-shift-3"></div>
  <div class="col-3 col-shift-3"></div>
</div>

Development

Import src/cornflex.scss in your assets to be compiled in your project. These default variables can be overwritten :

$cornflex-cols: 12
$cornflex-gutter: 20px
$cornflex-breakpoints: (-sm: 768px, -md: 992px, -lg: 1180px)

cornflex