doslotos-grid

A lightweight CSS Flexbox Framework

Downloads
6
Stars
8

dosLotos Grid

A lightweight CSS Flexbox Framework.

Installation

NPM

$ npm install doslotos-grid

Yarn

$ yarn add doslotos-grid

If you are not familiar with this kind of installation you can also download the Zip file where you will find all the SCSS files and the compiled version.

Documentation

All the documentation and use examples are in dosLotos Grid Docs.

File Structure

grid/
 mixins/
    _border-radius.scss
    _box-shadow.scss
    _element-align.scss
    _global.scss
    _grid.scss
    _positions.scss
    _responsive-wrapper.scss
    _retina-img.scss
    _shapes.scss
    _transitions.scss
    _zindex.scss
 utilities/
    _images.scss
    _text-align.scss
 _dropdown.scss
 _global.scss
 _grid.scss
 _navbar.scss
 _reset.scss
 _responsive-toggleBtn.scss
 _variables.scss

Features

  • Fluid / Fixed layout.
  • Intelligent cell wrapping.
  • Equal height columns.
  • Horizontal centering of cells.
  • Custom vertical alignment of cells (top, bottom, or middle).
  • Columns Offset.
  • Columns Order.
  • Nesting.
  • Mansory Layout.
  • Grid CSS base Layout.

Author

Carlos 'el Ruso' Cucurullo

Contributor

Javier Alonso Shannon

How to Contribute

  • Clone repo
  • Run yarn install
  • Run yarn run dev

As soon as the command 'yarn run dev' ends your browser will opnes index.html a kind of a playground for you to work on. You can leave all your examples in /examples/

Thanks!

Browser support

dosLotos Grid uses autoprefixer to make Flexbox features compatible with earlier browser versions.

  • Google Chrome (latest)
  • Opera (latest)
  • Firefox (latest)
  • Safari (latest)
  • Internet Explorer (latest)