Responsive HTML5 / CSS3.0 / LESS SP2010 Template Informed Consulting

22-04-2013
Informed Group notebook

Deze klanten gingen je al voor

At Informed Consulting we use one template which contains our styling for multiple SharePoint Publishing Sites. The SharePoint 2007 (SP2007) template was updated a lot in the last couple of years, so it was nice to create a complete new, fresh template for SharePoint 2010 (SP2010).

Our new template for publishing websites in SP2010 contains preset styles for better browser compatibility, supports HTML5 and responsive themes, uses CSS3.0 without making it a mess, has a clear and open structure and is easy to adjust in future updates.

By building the template in the dynamic stylesheet language LESS, we can manage the template a lot easier and clearer, using parameters. We used various combinations of multiple free-to-use web frameworks in LESS, controlled in two chapters, the Template styling and the Theme styling that are described below.

The SP2010 template contains the following chapters:

  1. Dynamic Operations
  2. Reset Style sheets
  3. Optional template Functions
  4. Grid system (Semantic.gs)
  5. Frontend Framework collection Bootstrap
  6. Typographic Framework Baseline
  7. Template styling
  8. Theme styling
  9. Updates & Theme Media Queries

1. Dynamic Operations

On the lowest part of our LESS file we operate numbers, colours and variables so we can use the output all over the stylesheet. Like @default_TextColor, @default_Font, @var-default_LinkHoverColor.

2. Reset Stylesheet

We use multiple reset style sheets to make the websites browser compatible. A normal reset style for HTML4.1 en CSS2.1 was not enough. The reset styles were improved by adding some extra reset styles, one especially for the HTML5 elements, html5doctor.com reset styles (for IE9 and all older browsers).  And a reset stylesheet for resetting the font-size and colors of SP2010.

3. Optional Template functions

CSS3.0 does not improve the clear and open structure of the template, the length of the code was making it hard not make a mess. So I created a chapter filled with all the CSS3.0 large styling and created functions from it, so they could easy be used in other parts in the template. Some of these CSS3.0 elements are based on template parameters located in the chapter Template styling.

4. Grid system (Semantic.gs)

Since I don’t want to create multiple columns for every new theme, I use the calculation from the semantic grid system for the template. It calculates the width and behaviour of the high level containers and columns, easy to adjust by number, located in the Template parameters in the chapter Template styling.

5. Frontend Framework collection Bootstrap v2.2.2

The Frontend Framework collection of Bootstrap is used for the multiple components in the content area of SP2010. Sliders, buttons, tabs, dropdown, tooltip, forms, icons and even Webparts are given a new fresh look instantly when using the right classes.

6. Typographic Framework Baseline

Every theme has its own typography and I needed a good base to work with, easy adjustable in LESS, like the rest. I found a good typographic framework called Baseline that calculates the rules of the typography for us. The parameters for this calculation are located in the chapter Template styling.

7. Template styling

This is the most important chapter, and is where the basic website is being created. First the different solutions from the previous chapters are managed in this chapter by defining the template parameters: the Operations, the grid system, and the frontend and typographic frameworks. Second in place are the behaviours of the SharePoint core.css basic styling in combination with our template styling, and third the
basic website itself. Which is the enumeration of styling of all the possible elements of the SP2010 publishing site, and the styling of the basic WebParts used along with the structure.

8. Theme styling

The specific styling for the client theme is placed in this chapter. It starts with an enumeration of the template parameters that are being overruled. Then the high elements styling till detailed content styling are being created, with the help of the optional template CSS.3.0 functions, bootstrap build in styling and sometimes the SharePoint 2010 chart.

9. Updates & Theme Media Queries

The first part of the dynamic stylesheet can contain the very specific styling for the theme, updates and the media queries which allows the website to adapt to different window resolutions of multiple devices. The last part will not be used often, since SP2010 does not use Device Channels, which allows the creation of separate masterpages per device.

Conclusion

By building the template in the dynamic stylesheet language LESS I wanted to bridge the world between Design and Developing.  Although LESS is not yet fully utilized in the template, The LESS parts are the solution what I was looking for: controlling multiple elements and behaviour of different websites by parameters on one spot. Like the colours used on a website: I just have to define one color and the template will automatically calculate two good looking colours beside it (if I want to) and automatically use these for the elements in the website, like the navigation, header and footer and typographic blocks. This is especially for our demo websites, a quick solution.

Sandra Filius

05-Apr-13

Lees onze andere blogs

Deze website gebruikt cookies

Met deze cookies kunnen wij en derde partijen informatie over jou en jouw internetgedrag verzamelen, zowel binnen als buiten onze website. Op basis daarvan passen wij en derde partijen de website, onze communicatie en advertenties aan op jouw interesses en profiel. Meer informatie lees je in ons cookie statement.

Kies je voor accepteren, dan plaatsen we alle cookies. Kies je voor afwijzen, dan plaatsen we alleen functionele en analytische cookies. Je kunt je voorkeuren later nog aanpassen.

Accepteren Weigeren Meer opties

Deze website gebruikt cookies

Met deze cookies kunnen wij en derde partijen informatie over jou en jouw internetgedrag verzamelen, zowel binnen als buiten onze website. Op basis daarvan passen wij en derde partijen de website, onze communicatie en advertenties aan op jouw interesses en profiel. Meer informatie lees je in ons cookie statement.

Functionele cookies
Arrow down

Functionele cookies zijn essentieel voor het correct functioneren van onze website. Ze stellen ons in staat om basisfuncties zoals paginanavigatie en toegang tot beveiligde gebieden mogelijk te maken. Deze cookies verzamelen geen persoonlijke informatie en kunnen niet worden uitgeschakeld.

Analytische cookies
Arrow down

Analytische cookies helpen ons inzicht te krijgen in hoe bezoekers onze website gebruiken. We verzamelen geanonimiseerde gegevens over pagina-interacties en navigatie, waardoor we onze site voortdurend kunnen verbeteren.

Marketing cookies
Arrow down

Marketing cookies worden gebruikt om bezoekers te volgen wanneer ze verschillende websites bezoeken. Het doel is om relevante advertenties te vertonen aan de individuele gebruiker. Door deze cookies toe te staan, help je ons relevante inhoud en aanbiedingen aan je te vertonen.

Accepteren Opslaan

Ontdek onze QSEH Star