STRUCTURE

A Declarative Flexbox Based Grid Framework

What is Structure?

Structure is a declarative, Flexbox based grid framework. Structure defines layout using non-standard attributes on elements.

If you have used frameworks like AngularJS, you have already gotten some exposure to declarative syntax and non-standard attributes

If you haven't, check out the code sample below:


<section class="main" str-xs="12" str-sm="8"></section>

You are probably thinking to yourself right now, "Is he criminally insane? That's not valid markup!"

Why write invalid markup?

When Bootstrap first hit the scene, I really enjoyed it.

Then I grew really tired of constantly adding several classes to my markup to accomplish something that required 1 class in the past, albeit less easily.


<div class="col-xs-12 col-sm-10 col-md-8 text-center pull-left clearfix"></div>

Enter Sass.

Up until now, I have been using Sass mixins to handle my gridding.


.grid-tile {
  @include column(8);
}

I thought to myself, "This is outstanding. I dont have all these presentation classes littering my markup, and it just gets taken care of behind the scenes."

But as I have used this approach, I realized two things:

So I built Structure.

Using non-standard attributes, we can have reusable, declarative grid styling, without soiling our class attributes.

But it's not valid markup.

No, no it isn't.

But my page won't validate

Statistically, it probably doesn't in the first place. Markup validity is overrated. I'm not saying don't close your tags, but it's not going to hurt your SEO, and because Structure is namespaced, it won't collide with any native attributes.

I know, it is tough to knowingly and intentionally write invalid markup, but I think the benefit outweighs the cost, if there really is a cost at all.

Documentation

Getting started with Structure is a breeze. Just include it in your document head as shown below:


<link rel="stylesheet" href="structure.min.css" type="text/css">

Please note that Structure is built on Flexbox, so this only works in browsers that support Flexbox. I think Structure syntax is a good idea regardless, so if you need to support older browsers, I have included a legacy non-flexbox version:


<link rel="stylesheet" href="structure.legacy.min.css" type="text/css">

You won't have access to flex attrs, auto layout or ordering, but basic gridding still works just fine.

Rows

In Structure, columns need to be wrapped with rows. Defining a row is as easy as adding a str-row attribute to your element:


<div str-row></div>

Columns

By default, Structure comes with a 12 column grid. Structure is built using Sass, and includes a map of settings that can be used for custom builds (columns, margin,breakpoints)

Columns must be wrapped by elements with the str-row attribute.

By default, Structure uses syntax similar to Bootstrap's syntax, and has xs,sm, md & lg column specs. Instead of a class name though, you set a value on a named attribute:

Code: 

<div str-row>
  <div str-xs="12">
    <p class="box">
  </div>
</div>
Output:

Structure works like Bootstrap in that, if you have a column set to 12, it takes up 100%. 50% width columns would be 6 & 6 respectively, and so on.

Code: 

<div str-row>
  <div str-xs="6"><p class="box"></p></div>
  <div str-xs="6"><p class="box"></p></div>
</div>
Output:

Displaying different column widths for different breakpoints is as easy is specifying the counts for those breakpoints using attributes. Structure is, by default, mobile first so the xs namespace is the global rule. See the code below and shrink your browser window to see this in action:

Code: 

<div str-row>
  <div str-xs="12" str-sm="6" str-md="8">
      <p class="box"></p>
  </div>
  <div str-xs="12" str-sm="6" str-md="4">
      <p class="box"></p>
  </div>
</div>
Output:

Offset

Like Bootstrap, we can use the str-xs-offset attribute to offset a column like so:

Code: 

<div str-row>
  <ddiv str-xs="6" str-xs-offset="6">
      <p class="box"></p>
  </div>
</div>
Output:

Auto Layout

When using the non-legacy Flexbox version of Structure, we don't actually need to specify columns at all!

To use auto layout, simply don't provide a value, just put the breakpoint attribute on your element:

Code: 

<div str-row>
  <div str-xs>
      <p class="box"></p>
  </div>
  <div str-xs>
      <p class="box"></p>
  </div>
  <div str-xs>
      <p class="box"></p>
  </div>
</div>
Output:

Flex

When using auto-layout, the str-xs-flex attribute can be used to enforce proportion rules. See below as we force the third column to take up 2x the establed column width:

Code: 

<div str-row>
  <div str-xs>
      <p class="box"></p>
  </div>
  <div str-xs>
      <p class="box"></p>
  </div>
  <div str-xs str-xs-flex="2">
      <p class="box"></p>
  </div>
</div>
Output:

Order

The str-xs-order attribute is used for reordering your columnns. See how this is used below to pull our red column to the front of the line:

Code: 

<div str-row>
  <div str-xs str-xs-order="2">
      <p class="box"></p>
  </div>
  <div str-xs str-xs-order="3">
      <p class="box"></p>
  </div>
  <div str-xs str-xs-order="1" str-xs-flex="2">
      <p class="box"></p>
  </div>
</div>
Output:

Vertical

Structure does vertical gridding too! Just add str-row-vertical instead of str-row and you are good to go. The height of your items is dependent upon the height of the parent container. See the example below, where the parent str-row has its height set to 200px.

Code: 

<div str-row>
  <div str-xs>
    <div str-row-vertical>
      <div str-xs><p class="vertical-box"></p></div>
      <div str-xs><p class="vertical-box"></p></div>
      <div str-xs><p class="vertical-box"></p></div>
    </div>
  </div>
  <div str-xs>
    <div str-row-vertical>
      <div str-xs><p class="vertical-box"></p></div>
      <div str-xs><p class="vertical-box"></p></div>
      <div str-xs><p class="vertical-box"></p></div>
    </div>
  </div>
  <div str-xs>
    <div str-row-vertical>
      <div str-xs><p class="vertical-box"></p></div>
      <div str-xs><p class="vertical-box"></p></div>
      <div str-xs><p class="vertical-box"></p></div>
    </div>
  </div>
</div>
Output:

Download

You can grab a copy of Structure in a number of different ways:

Bower


bower install structure

NPM


npm install structure-grid

Zip

Download Structure v0.0.3