Gridicarus is still in development. Because of this, the documentation below is subject to change.
Gridicarus (Grid Icarus) is a CSS framework built around CSS Grids. Its main purpose is to build and prototype grid-based web apps quickly and easily. Take a look at the source code for this page to see it in action!
To get started with Gridicarus, use npm:
npm install gridicarus
or the CDN link:
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/gridicarus.min.css">
Defining a grid.
To create a new grid, simply use the
<div class="parent"> <div class="box-blue"> This is some content! </div> </div>
This will create a 1x1 grid that densifies its children. However, by default, grids do not fully fill the space they occupy. To achive this, you add
clear-v to the grid parent. For example:
<div class="parent clear-v"> <div class="box-fuchsia"> This fills the entire div! </div> </div>
Notice that we don't use
clear-h. This is because the parent only contains one child and parents always fill horizontal space.
A parent grid can further structure its children using the following classes:
.h-fill-(1-9)- Creates (1-9) empty horizontal cells.
.v-fill-(1-9)- Creates (1-9) empty vertical cells.
.h-gap-(1-9)- Adds a horizontal gap (rem) for each cell.
.v-gap-(1-9)- Adds a vertical gap (rem) for each cell.
.pad-(1-9)- Adds padding around each cell (can also be applied to individual cells).
<div class="parent h-fill-2 h-gap-9"> <div class="order-1 v-span-1 box-lime"> Area Left </div> <div class="order-2 v-span-1 box-blue"> Area Right </div> </div>
.h-fill-2 to specify that we'd like two horizontal cells, and
.h-gap-9 to specify that we'd like the smallest (9) amount of horizontal spacing between cells.
Gridicarus uses "h-styled" sizing, meaning that the largest number is the smallest size, and the smallest number is the largest size:
Gridicarus also supports basic responsive design and will have more features for responsive design in the future.
.hide-(platform)- Hides any element based on the current breakpoint (see table below).
.collapse-(platform)- Changes the grid's template to a single-column layout (intended for mobile).
Here's an example of a responsive grid. Resize your window to see the effect. Also notice that the entire example is hidden on mobile!
Customizing the grid layout.
To control the order in which children are placed in the grid structure, the
order-(1-16) class can be used.
To resize children relative to their grid, use the
.v-span-(1-10) classes. Here's a more realistic example of how Gridicarus could be used:
<div class="parent h-gap-9 v-gap-9 h-fill-2 v-fill-5"> <div class="order-1 h-span-2 v-span-1 box-lime"> Header </div> <div class="order-2 h-span-2 v-span-3"> <div class="parent h-fill-4 clear-v collapse-widescreen"> <div class="order-1 h-span-1 box-navy hide-widescreen"> Sidebar </div> <div class="order-1 h-span-3 box-blue"> Main body </div> </div> </div> <div class="order-3 v-span-1 box-grey"> Footer Left </div> <div class="order-4 v-span-1 box-silver"> Footer Right </div> </div>
In the above example, we see "scoping" in Gridicarus. The inner grid's children are out of the main grid's scope and are subsequently "ignored" by the main grid.
Quickly prototype layouts.
For quick prototyping and designing, Gridicarus comes with some colored boxes.
box-navy: #001f3f box-blue: #0074D9 box-aqua: #7FDBFF box-teal: #39CCCC box-olive: #3D9970 box-green: #2ECC40 box-lime: #01FF70 box-yellow: #FFDC00 box-orange: #FF851B box-red: #FF4136 box-maroon: #85144b box-fuchsia: #F012BE box-purple: #B10DC9 box-black: #111111 box-grey: #AAAAAA box-gray: #AAAAAA box-silver: #DDDDDD box-white: #FFFFFF
Gridicarus was inspired by the following projects!