Implementing a CSS Framework in Sharepoint

Question

I've seen a post from you remarking on implementing a CSS framework in the Page Layouts, rather than the Master Pages, which when I think about it makes sense.

However, how do you include the necessary CSS, etc. without colliding with the standard Sharepoint CSS, even with your approach?

I am thinking more along the lines of Bootstrap (Twitter) but would look at Blueprint, if this is the recommended framework for Sharepoint.

The goals of my research are to provide responsive, HTML5/CSS3 pages via a Publishing site in SP 2010.

Thank you -

Answer 1

I generally approach this by writing a CSS file with the alterations you want to make to the elements or divs, whatever and then simply assigning it to the site you want to apply it to via the Site Settings -> Site Actions -> Master Page screen and selecting the 'Specify a CSS file to be used'.

You don't really want inline CSS sitting in the master page if it can be helped, then you're not having to upload a different master page each time you're trying to make a style change.

I ususally just store the CSS files under /Style Library/en-us/Themable

Answer 2

I know this is delayed, but considering I am working on a similar project, I thought I would chime in.

Why exactly are you thinking that implementing a framework via Page Layouts is a better approach than via a Master Page? My approach would be to have a single custom Master Page that dictates the structure for the core container of the design, including your normal header content (such as logo and top navigation). From here, you would register your custom CSS file that is registered after COREv4 that would dictate the styles used within your framework.

The publishing page layouts would then have the core content area's markup that includes your necessary semantic HTML5 markup that is referenced within your style sheet. This would allow you to have a single custom master page with your custom css file and then spin up multiple (varying) page layouts with all the necessary mark up to display your content.

From these page layouts, you would be able override the default content placeholders with page-specific markup and CSS if necessary (i.e. -replace the logo or top navigation on a single page layout or apply a specific style to a page element when a specific page layout is used).

The real key (in my opinion) is ensuring your custom CSS is registered after corev4 and that you pay attention to CSS specificity to make sure that your styles aren't being overridden by corev4.