Odin was built with the intention of getting some insight into how some of the major grid frameworks (Bootstrap, Skeleton, Materialize, Pure, and so on) are built. I learned quite a bit creating Odin, and I hope it is also useful for other new web developers looking to get a feel for how grid-based layouts are made.

Check out the source on GitHub. Hopefully, I've organized and commented it well enough to be educational. I also hope that the somewhat simplified markup and less full-featured framework will provide new developers a nice introduction into reading technical documentation. The documentation is modeled after (and sometimes almost copied from) other major frameworks.

Odin is based entirely on flexbox and there are no browser prefixes or CSS 'hacks' such as clearfix used. Also, no effort has been made to ensure backwards-compatiblity with older browsers. This is intentional. I want the source code to illustrate major concepts behind CSS layout without getting lost among browser-specific workarounds. It works pretty darn well with Chrome and Firefox, and is a bit of a mess in anything other than the absolute latest version of IE.

Be aware that border-box is the default box-sizing for all elements. If custom styling requires content-box , then you'll need to override this for those elements.

Many components associated with other frameworks such as carousels, cards, collapsible menus, etc. are not included. Perhaps at some point, more CSS modules will be added to implement extra features. Or maybe not. If extra functionality is needed, there are plenty of third-party CSS/JS options out there that should be pretty easy to integrate into this framework.

Given the limitations, should you use this for a commercial website? Probably not. Still, I think that the skills and concepts learned using Odin will be transferable once you are ready to use production-ready frameworks, and you might even have some fun making something cool along the way.

So why is it called Odin? The framework is based on 12 columns, so I looked at the Wikipedia article for 12 and saw the entry for Odin. He seems like a pretty cool guy to name a framework after. Plus he has a pretty epic beard. So here we are.

The next page contains download links and instructions for getting started.