microGRID NR is standalone, world's smallest and depedencies free grid system.
Size of gzipped version is just 184 bytes.
For example gzipped bootstrap-grid.min.css (Bootstrap 4.1.3) is 3195 bytes.
Let's compare gzipped size of microGRID NR (184 bytes) with another grid systems.
- GRD (503 bytes) ~ 173% more
- Simplegrid (644 bytes) ~ 250% more
- 960gs (1105 bytes) ~ 500% more
- Flexboxgrid (1591 bytes) ~ 1636% more
- Bootstrap's 4.1.3 Grid System (3195 bytes) ~ 812% more
microGRID NR is cross browsers compatible.
- Lightest in the world - just 184 bytes gzipped (<0.9% of gzipped Bootstrap 3 CSS)
- Single viewport grid system (12 columns)
- Full-width and fixed-width containers
- Built-in column gutters (default: 15px)
- Row wrappers with negative gutters
- Classes naming similar to well known Bootstrap classes (row, container, container-fluid, col, xs-1 ... xs-12)
- Contains only essential & most used features to speedup Your application
- Optimized for best gzip compression
- No javascript, fallbacks or depedencies - just pure CSS
- Cross browsers compatible
- Minified and ready to use
- Easy migration to standard (responsive) microGRID - soon
<head> <link href="microgrid-nr.min.css" rel="stylesheet"> </head>
I also recommend to set box-sizing CSS property for all HTML elements (Read more about box-sizing property).
<head>
<style>*{box-sizing:border-box}</style>
<link href="microgrid-nr.min.css" rel="stylesheet">
</head>
Elements naming and structure is same or similar like in Bootstrap 3.
Containers must contains only row elements.
Only single container or container-fluid per page is allowed.
<div class="container"></div>
By default, container has 100% width.
You can change it to custom value.
<div class="container-fluid"></div>
Rows must be placed inside container or container-fluid element.
Rows will contain only col elements.
<div class="row"></div>
Columns must be ALWAYS placed inside row element.
<div class="col [viewport]-6"></div>
Example:
<div class="col xs-6"></div>
There is no built-in classes for columns offset's at the moment.
If You need to make column offset, please use empty column(s) as pseudo-offsets, like in following example.
<!-- Pseudo-offset BEGIN --> <div class="col xs-6"></div> <!-- Pseudo-offset END > <!-- Column BEGIN --> <div class="col xs-6">This column has pseudo-offset</div> <!-- Column END >
<html>
<head>
<style>*{box-sizing:border-box}</style>
<link href="microgrid-nr.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col xs-4">A</div>
<div class="col xs-8">B</div>
</div>
<div class="row">
<div class="col xs-12">
<div class="col xs-4">C</div>
<div class="col xs-4">D</div>
<div class="col xs-4">E</div>
</div>
</div>
<div class="row">
<div class="col xs-8">F</div>
<div class="col xs-4">G</div>
</div>
</div>
</body>
</html>
microGRID (NR) supports only single viewport (xs).
If You want to develop multiple viewports application, You can use/migrate-to standard (fully responsive) version of microGRID (soon).