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:

I can't tell how my page is going to lay out by looking at it anymore.

My compiled CSS is getting heavy from all the includes.

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.