Using HTML 5 with mojoPortal

mojoPortal content management system is designed to produce flexible markup that allows you to have a good deal of control over the design and semantics. Our flexible container panels can be configured from the theme.skin file and give a great deal of control over the rendered markup, there are also settings for individual features like the Blog that allow you to configure a lot of properties from theme.skin to control the layout and markup in the Blog.

These configuration options are the key to our support for use of Artisteer which requires specific CSS classes and specific extra markup to produce their designs. But the same configuration options also make it possible to produce less markup be leaving out some of the container divs and only rendering the internal content rather than the div itself, and you can control the element rendered as well so it doesn't have to be a div, it can be an article or aside (new HTML 5 structural elements). Headings can also be controlled.

Basically, the outer skeleton of markup comes from the layout.master file where you have almost complete control over the markup, then there are the pockets where features are rendered along with feature specific content from the database. The features generally use a set of container panels and headings that can be configured from theme.skin and then inside those is where content from the database is rendered. The content from the database is exactly what you enter in the WYSIWYG editor (ie what you see in the html view of the editor is exactly what is stored in the database. So, these 3 levels, (the skeleton from layout.master, the configurable panels and headings, and the content entered directly in the database) combine to give you a great deal of control over what gets rendered while also providing some default markup configuration that provides the hooks to make a consistent design from CSS.

As of version 2.3.9.0 we are providing some reference skins to help you get started with HTML 5 design in mojoPortal. We have 2 skins  based on Twitter Bootstrap, and one based on Zurb Foundation, that illustrate configurations that use HTML 5 structural elements like header, article, aside, and nav. If you haven't heard of Twitter Bootstrap or Zurb Foundation, they are 2 popular HTML 5 CSS Frameworks that provide grid systems for layout and some other common design elements. These skins don't include every feature of each framework but they do use the ones most amenable to a content management system including responsive design layout that allows the design to adapt to the device and screen size. These reference skins can be downloaded from our new html5mojo project on Codeplex. Note that these reference skins are not very pretty, they are intended as a starting point for a new skin so its your job to make them pretty, but over time we hope to have additional designers participating in this project and adding new html 5 skins that are pretty.

Note that neither Twitter Bootstrap nor Zurb Foundation provides CSS that can be used for a site menu. They do provide some CSS for little menus but not something that can be used for a menu with any depth of hierarchy like what is needed for a content management system. We've used some other things to make the menus in these reference skins but you can remove that and do your own design for menus. It is much easier to make a CSS menu design for a specific number of pages and depth of hierarchy than it is to make one that looks good no matter how many pages or levels of pages exists. There is really no such thing as one perfect CSS recipe for menus, there are always practical limits, for example horizontal menus are great for the top level of pages but you can only have so many top level items in a horizontal menu before it overflows the page width, so common sense must always be used. See also Menu Structure and Properties.

Support for LESS

LESS is a programming language that renders CSS but provides a more advanced programming model with variables that can be modified to change colors, borders, widths or other aspects of the final rendered CSS. A broad discussion of LESS is beyond the scope of this article but you can find tutorials on the web to supplement the information provided here. LESS has been implemented in javascript  which can transform .less files into CSS in the web browser, but it is more popularly used to generate CSS from server side code (ie there is a Ruby compiler for LESS). Twitter Bootstrap is built using LESS but they pre-compile it into CSS before you download it because using javascript to do it client side is less efficient and can slow the page down. For using LESS in ASP.NET there is the DotLess project which is an implementation of a LESS compiler in C#. In mojoPortal CMS, we've integrated DotLess into our CSSHandler which already combines and minifies CSS from multiple files listed into the style.config file of a mojoPortal skin. AS of mojoPortal version 2.3.9.0, you can now add .less files to the list of files in the style.config file, the .less files will all be combined together by our CSS Handler and then DotLess is used to convert the LESS syntax into CSS and finally it is minified to reduce the size of the CSS for best performance.

We also have a LESS Utility Web Page under Administration > Advanced Tools > Design Tools that allows you to enter LESS code and generate CSS so you can easily experiment. The LESS Utility is disabled by default but you can enable it by adding this to your user.config file:

<add key="EnableLessUtility" value="true"/>

Created by Joe Audette on Jul 16, 2012
Last Modified by Joe Audette on Jul 27, 2012