The Basics

Mojomo is a skin for mojoPortal built in a modular fashion - it is also a boilerplate resource for web design professionals to kickstart a custom front end design using a build once, mobile friendly, responsive CSS framework.

Mojomo exists in a single skin folder that can be dropped into place in mojoPortal and demonstrates how to control the front end design by using custom layout.master, user.config, style.config and theme.skin files to provide a standard folder structure and familiar design environment.

The point of this framework is to let you design skins for mojoPortal quickly and easily using the tools provided, but it can easily be configured to let you work with the lightweight CSS framework of your choice; swap in your own CSS or LESS files for typography, layouts and grids and liberate your CSS and best practice snippets for reuse.

A little more 

I wanted to build a responsive, build once, mojoPortal boilerplate to work across as many different mobile platforms and browsers as possible, including support for old IE versions. I also wanted it to be modular so that I could swap whole chunks of CSS in or out easily. 

I ended up incorporating as many best practices from the HTML5 Boilerplate and Mobile frameworks as I could, as well as taking inspiration from other frameworks like 320 and Up, Fluid Baseline Grid and Inuit amongst many others.

At the core of mojomo is a set of CSS layouts. These layouts are based upon a 'Holy Grail' 3 column liquid layout and its subdivisions using media queries and Modernizr/Respond.js to polyfill for IE6/7/8, and providing graceful degradation for non js users. These templates can provide 3, 2 or 1 columns 'desktop' layouts (plus additional content panels), all of which are responsive through tablet screen sizes down to mobile. 

The mojoPortal admin pages and other features are also styled and responsive, along with a collection of mojoPortal specific configurations and resources. The layout.master, style.config and theme.skin files in conjunction with user.config provide complete control over file paths and rendered markup, and you can easily add scripts and plugins, and CSS normalizing, base typography, and grids are included along with jQuery 1.8, Modernizr and CSS3PIE.

The files are commented throughout to help you get moving quickly.

Credits

Mojomo began when I read how to build a modern website in 2011 by Tom Milway, and it relies entirely on the hard work of the MojoPortal team and its forum members and the HTML5 Boilerplate and Mobile Boilerplate folks. It's heavily influenced by the ideas in Andy Clarke's 320 and Up, Josh Hopkins' Fluid Baseline Grid , Harry Roberts InuitCSS, Jonathan Snook's SMACCS and Nicole Sullivans OOCCS. Other credits I've left in the code comments, there's a lot of them.

mojoPortal is an extensible, cross database, mobile friendly, web content management system (CMS) and web application framework written in C# ASP.NET. Joe Audette at mojoPortal places a lot of emphasis on web standards and accessibility, and has built a CMS that front end designers can control, rather than being controlled by. Refreshing - try it!

Mojomo is the product of caffeine overdose at freshangle.co.uk, and will have a homepage with documentation soon at mojomo.co.uk.

Notes

This framework is intended as a resource for web design professionals, so if you break the CSS, just revert and start over; generic CSS or mojoPortal troubleshooting is best done through Google and the mojoPortal Forums. If you have improvements to suggest or code snippets you'd like to discuss or share to help improve the framework  I'll happily address them!

Last edited Aug 20, 2012 at 10:26 PM by freshangle, version 54