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 22.214.171.124 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
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"/>