The minimal (~157 bytes) grid system for modern browsers.
You don't need monolithic CSS frameworks for simple grid systems. ~150 bytes of CSS can save your life. 💫
In the dist
directory there are three minified files:
gridly-core.min.css
(105 B): just the Gridly core including same-width column support and mobile responsive support.gridly-col-widths.min.css
(92 B): the custom width columnsgridly.min.css
(157 B): the previous two files' content put together
If you do not need custom width columns, you will probably want to use only gridly-core.min.css
in your page. If you do need the custom width columns, you have to include gridly.min.css
instead.
Include the CSS file in your page:
<link rel="stylesheet" href="gridly.min.css" type="text/css" charset="utf-8">
Then you can use the .row
and .col
classes:
<div class="row">
<div class="col">Two</div>
<div class="col">Column</div>
</div>
This will create two columns having equal widths.
Check out the dist
directory to download the needed files and include them on your page.
The gridly-core.min.css
file handles two classes:
row
: the row containing columnscol
: the column to put in the row
Because of the flexbox amazing power, the columns will have the same width (as many columns you want / row).
To extend this basic functionality, there is another file: gridly-col-widths.min.css
. This adds the following classes:
col-tenth
has10%
widthcol-fifth
has10%
widthcol-quarter
has25%
widthcol-third
has33.3333334%
widthcol-half
has50%
width
Like specified above, the gridly.min.css
contains both: the core and the custom widths.
Have an idea? Found a bug? See how to contribute.
Run npm i
to install the dependencies. Then, you can run the npm scripts using npm run <script-name>
.
Run npm run release
to recreate all the dist
files.
If you are using this library in one of your projects, add it in this list. ✨
MIT © Ionică Bizău