Thursday, 8 March 2012

HTML Kickstart Orchard Theme

I really like Orchard as a CMS and HTML Kickstart as an HTML/CSS framework, so I figured that I merge the two and contribute this back to the community. You can find the theme here.

The HTML kickstart files and structure are almost intact, the only changes I structurally made are renaming of the folders "css" and "js" to "Style" and "Script" respectively. Orchard "knows" by default the later folders hence the correction.

Template wise there's the additional View folder containing the different views for the page, header, footer etc.

Site wireframe
I stayed with the same structure as the example theme "TheThemeMachine" from Orchard so you get the wireframe as shown here.

This wireframe contains a column based design for the Aside bars and the Triple and Quad sections below. These columns are based on the HML Kickstart grid system. I needed to add some calculation logic as these columns are not always used and therefore the space has to be released.

For example, if no content is provided in the TripleThird zone, then we don't need to render this zone. However, in that case, we'll divide the space not by three using "col_4" classes but rather by two using "col_6" classes.

Kickstart Features
The kickstart framework has a lot of features like tab page and slideshow components. The easiest way for a admin/designer of the Orchard CMS is to get a nice module and UI where files can be selected for the slideshow for example. I haven't done this yet, but that would be an area to make it more user friendly.
Note that you can use all features of HTML Kickstart, you just have to work a bit more in HTML and CSS coding than a nice UI that hides that.

Credits
Just want to mention that credits goes to the open source Orchard CMS team and Joshua Gatcke. My contribution was just to the mash them up :)