Css – Which CSS framework(s) work well with SharePoint publishing sites

csscss-frameworkspublishing-sitesharepointsharepoint-2007

Past, now irrelevant back story: I was trying to make some changes to BlueBand and get 'up and running pretty quickly' but after looking at it further this is no longer an option due to tables that a previous developer introduced into the layout. I'll have to live with this and make what tweaks I can.

So, looking towards future greenfields projects…

Are there any recommendations for CSS frameworks that work nicely with SharePoint publishing sites? (Examples are BluePrint, YUI.) They should not interfere with standard out-of-the-box controls such as the Site Actions menu, rich text editor, and publishing toolbar.

Real world experiences welcomed, please!

Best Answer

What would you like to use a CSS framework for? As far as I can tell you could use one for making a cross-browser reset but everything else just depends on your layout. If you're planning to throw out the standard SharePoint layout it means that you need to start from scratch. The good news is that it's not much different than creating a layout for any other website. There are some things you need (http://msdn.microsoft.com/en-us/library/aa660698.aspx) while working with SharePoint but as for CSS it's all up to you.

Related Solutions

Css – Which characters are valid in CSS class names/selectors

You can check directly at the CSS grammar.

Basically¹, a name must begin with an underscore (_), a hyphen (-), or a letter(a–z), followed by any number of hyphens, underscores, letters, or numbers. There is a catch: if the first character is a hyphen, the second character must² be a letter or underscore, and the name must be at least 2 characters long.

-?[_a-zA-Z]+[_a-zA-Z0-9-]*

In short, the previous rule translates to the following, extracted from the W3C spec.:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B&W?" or "B\26 W\3F".

Identifiers beginning with a hyphen or underscore are typically reserved for browser-specific extensions, as in -moz-opacity.

¹ It's all made a bit more complicated by the inclusion of escaped unicode characters (that no one really uses).

² Note that, according to the grammar I linked, a rule starting with TWO hyphens, e.g. --indent1, is invalid. However, I'm pretty sure I've seen this in practice.

CSS 100% height with padding/margin

I learned how to do these sort of things reading "PRO HTML and CSS Design Patterns". The display:block is the default display value for the div, but I like to make it explicit. The container has to be the right type; position attribute is fixed, relative, or absolute.

.stretchedToMargin {
  display: block;
  position:absolute;
  height:auto;
  bottom:0;
  top:0;
  left:0;
  right:0;
  margin-top:20px;
  margin-bottom:20px;
  margin-right:80px;
  margin-left:80px;
  background-color: green;
}

<div class="stretchedToMargin">
  Hello, world
</div>

Fiddle by Nooshu's comment

Best Answer

Related Solutions

Css – Which characters are valid in CSS class names/selectors

CSS 100% height with padding/margin

Related Topic