Gridicarus Documentation

Gridicarus is still in development. Because of this, the documentation below is subject to change.

Introduction

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!

Getting Started

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

Grid Parent

Defining a grid.

To create a new grid, simply use the .parent class:

<div class="parent">
  <div class="box-blue">
    This is some content!
  </div>
</div>
This is some content!

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-h or clear-v to the grid parent. For example:

<div class="parent clear-v">
  <div class="box-fuchsia">
    This fills the entire div!
  </div>
</div>
This fills the entire 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>
Area Left
Area Right

We use .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:

  • (v/h)-gap-1 = 3rem
  • (v/h)-gap-2 = 2.5rem
  • (v/h)-gap-3 = 2rem
  • (v/h)-gap-4 = 1.5rem
  • (v/h)-gap-5 = 1.25rem
  • (v/h)-gap-6 = 1rem
  • (v/h)-gap-7 = 0.75rem
  • (v/h)-gap-8 = 0.50rem
  • (v/h)-gap-9 = 0.25rem

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).
Platform
Breakpoint
none (.hide/.collapse)
Any
tablet
768px to 1023px
desktop
1024px to 1215px
widescreen
1216px to 1407px
fullhd
1408px and above

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!

Hidden below tablet!
Hidden below fullhd!
Hidden below widescreen!
Hidden below desktop!

Grid Child

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 .h-span-(1-10) or .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>
Header
Sidebar
Main body
Footer Left
Footer Right

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.

Boxes

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
box-navy
box-blue
box-aqua
box-teal
box-olive
box-green
box-lime
box-yellow
box-orange
box-red
box-maroon
box-fuchsia
box-purple
box-black
box-grey
box-gray
box-silver
box-white

Other

Gridicarus was inspired by the following projects!

Star