Responsive Websites with Sitefinity, Unsemantic, and Normalize

by Gregg Crystal Jan 15, 2014

I frequently get asked by a client if they can use a particular CSS framework or Javascript library will work with Sitefinity. So far the answer has always been 'Yes', I've never found one that could not work with Sitefinity.

Sitefinity is just an engine that sits on top of .NET. It doesn't prevent you from using any CSS or Javascript files that you like.

You can also use whatever off-the-shelf image rotators, social medial share buttons, or video plugin that you choose.

For responsive design projects, we've been using Unsemantic and Normalize. Unsemantic provides a great framework for laying out on mobile and tablets, and Normalize is just a good CSS reset.

For all Sitefinity projects, we start with a base Master Page file that other templates derive from. This gives us the most control for including Javascript libraries and for settings up the layout divs just the way we want.

The CSS files are brought in via a standard .NET theme.

Once that is done, you use Unsemantic as you would on any other site, by properly associating classes to divs.

We don't use the Layout Manager in Sitefinity much, as it can add too many divs to your HTML and doesn't provide the granular control that we need for our HTML.

We also don't use the Responsive Design Module, as the tool (to date) makes many global configurations. Such as, all three column divs will look like a single column on mobile. You can't say that a three column layout on one page looks like a single column and on another page it will look like two columns and a large single column underneath. All of the rules are all or none.

Sitefnity navigation uses the KendoUI components and they offer a very robust control for styling the navigation any way you like. There's also javascript that you can edit within the Navigation Widget Template Editor.

Ready to Supercharge Your Sitefinity Project?