After building a lot of sites in Orchard CMS using "The Theme Machine" as a starting point and exploring the current responsive themes in the gallery I saw a need for a more robust responsive solution that would work across any device (JS enabled) right out-of-the-box, including navigation!  "The Theme Machine Responsive" is a fully responsive version of the great theme "The Theme Machine" that ships with Orchard CMS and is built to work with the existing widget structure and tiered navigation.

Check out a live demo of this theme, visit the project site, or download it from the Orchard Gallery.

Features:

Flexible Margins and Padding:

"The Theme Machine Responsive" utilizes percentage and EM based margins and padding over pixels for fully flexible/relative margins and padding relative to device viewport width and font size.  This was done by converting most of the existing site margins and padding to percentage/EM's instead of the default pixels. On occasion I decided to leave the pixel based margins/padding for dynamic content like zones since maintaining consistent percentages for margins/padding is relative to the container/sibling elements.

Lots of Breakpoints

Starting from a "Mobile First" base CSS approach, I started with a styling that would apply to all devices, gradually adding additional styling as viewport size increases. The following breakpoints are included:

Base

The base styling for all devices and viewports. Everything is built to "stack" with no columns or floats yet. Navigation is also stacked and collapsed using JS.

@media only screen and (min-width: 320px) // Mobile Portrait

For most mobile devices in portrait, this breakpoint is stubbed out in the CSS but not used as most devices will fall into the base CSS category and no changes will be needed here.  

@media only screen and (min-width: 480px) // Mobile Landscape

Mobile devices in landscape orientation. Minor modifications were made to branding but generally this would be the same layout as the base CSS category.

@media only screen and (min-width: 600px) // Small Tablet

This breakpoint comes in handy for small tablets like many e-readers. Minor modifications to branding and navigation were made in this breakpoint.

@media only screen and (min-width: 768px) // Medium Tablet in portrait orientation.

This is the biggest change so far. Most of the CSS that was stripped out of the base CSS from the original "The Theme Machine" has been re-added here. Columns are now floated, the main navigation has resorted back to the default "The Theme Machine" styling, and everything pretty much resembles a flexible column full width layout.

@media only screen and (min-width: 1024px) // Tablets in landscape orientation and desktop/laptop/netbook computers. 

Only one change was made here since 768px took care of most layout changes.  Here I added a max-width CSS property to keep the content contained to a max size.  Remove this if you still want a full width layout.

@media only screen and (min-width: 1280px) // Desktop

Stubbed out for larger desktop monitors but no changes made to CSS

@media only screen and (min-width: 1400px) // Widescreen

For TV's or really large monitors I increased the font-size on body as well as the max-width for the main wrapper.

@media print // Printers

Default styling for printing.

Additional considerations not included

You may want to add breakpoints for retina devices (iOS) and include larger images. Also you may want to only include images sized for each device within the specific breakpoints and not first in the base styling so they are only downloaded once for their specific device size.

Responsive Navigation

One of the biggest problems with responsive design is dealing with multi-level navigation. Although the solution implemented in this theme won't work for everyone I believe it is a good strategy for most cases up to three levels of navigation working with the existing Orchard CMS framework.  Using JS (jQuery) I collapsed the navigation for small breakpoints (below 768px) and added a button to expand/collapse the block level navigation. Also all sub levels are indented/color coded for distinction of sub levels. One thing to note is that the button was created using <span> tags for the "three lines" and then styled with CSS. You could optionally switch this out with an image (I recommend a SVG image) if you desire but this way you can change any colors with just the CSS.

Adjusted Layout for Mobile and Tablet

In addition to the responsive navigation, I also took the liberty of duplicating the main navigation and placing it in the footer for a better UX when a user has scrolled to the complete end of the site and wants to navigate somewhere new without scrolling back to the top. You could replace this with a "back to top" link or similar if you desire. I also moved the "first aside" from above the main content (in stacked mobile views) to just below it as this <aside> would generally be less important than the main content (as the term "aside" implies) and makes sense to come after the main content area on a smaller device.  Both of these layout changes are located in ResponsiveChanges.js if you would like to modify/remove them.

Better CSS Reset

Taking a page from various sources across the internet (HTML5 BP, Normalize.css, 1140 Grid system, etc. ) I added various defaults for HTML5 elements and embedded content.

Mobile Friendly Meta and Legacy Fallback for non HTML5 supporting browsers.

For this we added some handy <meta> elements to optimize content for various mobile devices (once again thanks to HTML5 BP folks) as well as some handy <html> conditionals for legacy IE access.  Lastly we added html5shiv and Respond.js, handy polyfills for HTML5 support and media queries. (Not all media queries are supported with Respond.js so take a look at their docs). Oh and for fun I included apple touch icons with correct sizing using the good ol' Orchard CMS logo..

In Conclusion:

I know there will probably be additions/changes needed for this theme as well as some questions regarding why I did what I did but hopefully this will be a good starting point for any developer that wants to create a flexible, fully responsive website that maintains most of the original "The Theme Machine" base styling, while providing a nice default responsive layout and navigation.

Note*

There is a Orchard CMS bug regarding breadcrumbs on individual blog posts showing up as duplicated navigation.  You can see this duplicates our main menu structure but can be fixed by creating a layer rule that excludes blog posts and then adding that rule to the breadcrumbs widget.

Check out a live demo of this theme, visit the project site, or download it from the Orchard Gallery.

Blog Category: CMS, Orchard CMS