Skip to content

Latest commit

 

History

History
130 lines (113 loc) · 4.53 KB

README.md

File metadata and controls

130 lines (113 loc) · 4.53 KB
Raw

World's Smallest Grid System

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.

Size Comparision

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

Browsers Support

microGRID NR is cross browsers compatible.

Features

  • 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

Documentation

Installation

<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

Elements naming and structure is same or similar like in Bootstrap 3.

Containers

Containers must contains only row elements.
Only single container or container-fluid per page is allowed.

Fixed Width Containers
<div class="container"></div>

By default, container has 100% width.
You can change it to custom value.

Full Width Containers
<div class="container-fluid"></div>

Rows

Rows must be placed inside container or container-fluid element.
Rows will contain only col elements.

<div class="row"></div>

Columns

Columns must be ALWAYS placed inside row element.

<div class="col [viewport]-6"></div>

Example:

<div class="col xs-6"></div>

Offsets

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 >

Full Example

<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>

Viewports

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).