This repository contains a small grid system for easy application development. It supports 24 columns as well as `RTL` and `LTR` layouts.
npm install grid-systemThis repository contains a small grid system for easy application
development. It supports 24 columns as well as RTL and LTR
layouts.
Browsers that support media queries should be supported.
* 24 column grid
* Responsive
* No margin or padding added
Currently any grid system I could find made assumptions about
the layout and the style of the code. They assume some kind of
padding or margin _must_ take place for the grid. When padding
is forced on the grid it causes styles to conflict and alignment
to be off when grids become nested.
This library aims to _only_ supply a grid system. If you want
a specific padding width, then add that style. If you want
a specific margin width this library will not support it easily.
By default most grid systems use 12 columns. I've found that
the 12 column width is often not enough. So to get the best of
the math that 12 provides and a bit more space, this system
defaults to 24 columns.
A grid system should:
* Make laying out content easy
* Make no assumptions about its contents
* Never apply styles such as padding or margin
If a consumer wishes to have default padding or margin think about
applying this padding or margin to the components on the site. Try to
avoid putting styles into your grid system. It conflates layout and
styling which causes many headaches later in CSS development.
Code can be found in the css [build/grid.css][grid-file] file.
``html`
Info
Other Info
.column- classes must exist inside a .row class. When using a .column- class.column
it must be prefaced with a class. This is done to separate the layouts into
what is common for all columns and what is specific for each media query set of columns.
Check out the source [src/grid_system.less][grid-system] file. It has a lot of comments on what
it is doing.
Run the following two commands in separate terminal windows to test out the grid system.
1. gruntcd example && python -m SimpleHTTPServer`
2.
[grid-file]: build/grid.css
[grid-system]: src/grid_system.less