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

• dosLotos Site
• dosLotos Grid Docs
• Github
• LinkedIn
• Twitter

Contributor

Javier Alonso Shannon

• Github
• LinkedIn

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)