About
Odin was built with the intention of teaching my web design students how to build responsive websites while giving them an experience similar to that of a developer using a major framwork (Bootstrap, Skeleton, Materialize, Pure, and so on). Odin was written in such a way that new developers can fully dive into responsive, grid-based layouts and avoid having to deal with more complex technologies such as JavaScript and Sass.
This framework contains many of the components associated with other frameworks such as grids, navbars, buttons, carousels, and callouts. Perhaps at some point, more components will be added. The documentation is modeled closely after that of other major frameworks. I hope that the somewhat simplified markup required with Odin relative to other frameworks will provide new developers a nice introduction into reading technical documentation and creating layouts. Furthermore, I think that the skills and concepts learned using Odin will be transferable once you are move on to other frameworks, and you might even have some fun making something cool along the way.
As for myself, 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. Hopefully, I've organized and commented it well enough to be educational. Odin is based entirely on flexbox and there are no browser prefixes or CSS 'hacks' are 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 probably a bit of a mess in old versions of IE.
Lastly, 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.
If you're interested in the nitty-gritty of how I developed this framework, then check out the project on GitHub. Otherwise, visit the Docs to get started.