1. Home
2. gridding

Grid system Structure

Get it how you need it.

Types

Rows, Columns, and items… oh my 🙂

self made

Rows

Columns

offset

Parentally controlled

Rows

In this example we can see that the parent is asking for the child nodes to have a width of kids-tenths-1 which
means that we would see css of kids-tenths-1 > *. The cascade order is used to make sure that even though
we have kids-tenths-1 > * set on the parent, when the child has it’s own size, we listen to the child. In
this case we have the child not setting a size so the tenths-1 requested by the parent is honored.

<div class="flex-row kids-tenths-1">
<div>ends up as tenths-1</div>
<div>ends up as tenths-1</div>
<div>ends up as tenths-1</div>
. . .
</div>

Columns

Self controll over Parentally controlled

Rows

In this example we can see that the parent is asking for the child nodes to have a width of kids-tenths-1 which
means that we would see css of kids-tenths-1 > *. The cascade order is used to make sure that even though
we have kids-tenths-1 > * set on the parent, when the child has it’s own size, we listen to the child. In
this case we have the child saying it’ll be thirds-1 not the tenths-1 requested by the parent.

<div class="flex-row kids-tenths-1">
<div  class="thirds-1">ends up as thirds-1</div>
<div class="thirds-1">ends up as thirds-1</div>
<div class="thirds-1">ends up as thirds-1</div>
</div>

Columns

No diff? Wonderful!

We want to keep a node to ge able to over write the parents commands. This keeps with the cascading style sheet methodilogy
and is what will provide the most flexable usage of the system.

Lets show flowing rows and Columns

Grid of row items

Rows are straight forward, you need to have basically static widths, and they need to be justified to the direction of your
intent.

Basic needed classes for the effect flex-row wrap justify-start

<div class="flex-row wrap pad-airy justify-start kids-fifths-1 js-kids-max-size-at-75"></div>

Grid of column items

Columns are a little more settings but stil easy to get going. Depending on your need to have basically static heights, and
if needed widths. The items to be justified to the direction of your intent but also need to know what the content direction
is as well. Other wise it is the same idea as rows.

NOTE: The style="height:45vw" in the example code is to better hightlight the effect, not the nessisary
driver of the effect but it is worth noting that height of the parent is a major driver on a layout.

Basic needed classes for the effect flex-column wrap justify-start content-start

<div style="height:45vw" class="flex-column wrap pad-airy justify-start content-start js-kids-hold-at-75 js-kids-hold-at-height-75"></div>

all-but & hold-at

This is an awsome tool, but there is a drawback currently, that is it is a very case by case need. We could guess at sizes
but we don’t want to add more bloat to the system. Instead there is a split in difference, you get the hold/all-but system
at the break points you set for the frame work, but you also have asscess to the js- active option which will let you
choose to hold at 12 or 942 or what have you. Just like everything, modoration produces the best effect.

Loaded breakpotions version

NOTE: The theme currently loaded only have break points set for 320 480 and 996

Generated sampling version

tills

How to height

Using the height means you are controlling the height with in a space. If the space is not controlling it’s own height, then
you may not get the desiered effect. The most commond issue will be “I want it to be % of the window”. Toi do this, the
parent element must be 100% of the window inorder for the child to be a % of it. The body element is independant of the
window so simpley put, set the parent element to the height of the window and the child’s declared height will be that
of the window.