I Use This!
Activity Not Available
Analyzed 10 months ago. based on code collected 10 months ago.

Project Summary

CleanSlateCSSFull stylesheet: cleanslate.css Minified version: cleanslate.min.css (1.4KB gzipped) by Premasagar Rose, for Dharmafly What Is It?CleanSlateCSS is an extreme CSS reset stylesheet. It is used to reset a styled HTML element, and all its children, back to default CSS values. It is composed exclusively of !important rules, which override all other types of rules.

Why Would I Need It?CleanSlateCSS is useful when there have already been CSS styles declared on a page, and you need to reset those styles within a particular area. This is not a stylesheet to use when developing your own website. For that, try Eric Meyer's classic Reset CSS or the HTML5 Doctors' version.

Instead, it can be useful when distributing content (e.g. a widget, or syndicated news) to third-party websites. The CSS rules in the host site may be unknown and unpredictable, or may change in future without notice, or there may be many websites you need to distribute to. In such situations, the CleanSlateCSS stylesheet will aggressively reset your portion of content (and nothing else) back to some reasonable default values that you can then build from.

Some Example UsesThe distribution of HTML/CSS/Javascript widgets to third-party websites. If your widget does not use an iframe to sandbox its contents (and there are a few reasons why you wouldn't use an iframe), then you can use CleanSlateCSS to prevent CSS styles "bleeding" into your widget (see the History section below). The distribution of styled content as part of a partner's website. Again, you may not want your content to be sandboxed within and iframe (where it will miss out on Google Juice, and might require Javascript). Instead, you could include your styled HTML content, and simply drop in the CleanSlateCSS stylesheet to bring a baseline to the styles for your content. Any other good examples? Share them with @premasagar, or add it to the wiki. How Does It Do It?The stylesheet lists all possible HTML elements, and assigns to them the default (or otherwise appropriate) values for every CSS property. It only looks within elements that have a class attribute of cleanslate.

Usage1) Link to stylesheet from the Add a to the stylesheet, in the document :

If you are distributing a Javascript widget, then this can be done programatically. E.g. with jQuery:

$('head').append('');Alternatively, you could use @import to call it from within another stylesheet or element:

@import http://cleanslatecss.googlecode.com/svn/trunk/cleanslate.css

/* Add the rest of your CSS here */(On a live site, it's best to include the CSS file on the site, rather than hot-linking to the Google-hosted version.)

2) Add the class attribute cleanslate to your HTML containerThe cleanslate element will have its styling be reset:

The classes blah and myContainer in this example are not required. The class cleanslate is required.

Or, if using jQuery:

$('.myContainer').addClass('cleanslate');3) Use !important in your CSS rulesFor all of your CSS rules that relate to a cleanslate element or its children, add the keyword !important:

.myContainer a {
color:orange !important;
.myContainer .someOtherThing {
font-weight:bold !important;
}4) Set the default stylingCleanSlateCSS automatically applies the following styles to any cleanslate element and its children:

.cleanslate {
font-family: "Times New Roman", Times, serif !important;
font-size: medium !important;
color: black !important;
line-height: 1 !important;
direction:ltr !important;
text-align:left !important;
font-style:normal !important;
font-weight:normal !important;
text-decoration:none !important;
}If you want to override these default styles, then simply add the new values to your own stylesheet. It's best to use a CSS selector that is specific to your content, instead of using .cleanslate, because there may be other .cleanslate elements on the page, now or in future. For example:

.myContainer {
font-family: Verdana, Arial, sans-serif !important;
color: #003 !important;
}That's all.

Well, at least, that's the theory. You should read the Techniques page to understand some of the finer points.

Optimising the Load TimeThe Speed page lists some standard techniques to optimise the load time for the stylesheet. These are nothing special - just standard practices for all kinds of CSS and Javascript files.

To DoSee the Issues section and ToDo list, for some planned enhancements.

FAQRead (or write) the FAQ.

HistoryThis approach, of aggressively reset styling on a host page with the use of !important rules, came about while developing the BBC World Service widget (see this blog post). The widget is injected into a page, not with an iframe, but a simple element (the widget's "lightbox" overlay is similarly just a simple ). The !important styles helped us to prevent any unpredictable CSS styles "bleeding" into the widget.

Since then, the various rules have been consolidated, cleaned up and extended, to form the CleanSlateCSS stylesheet.

ReferencesThe following documents were invaluable as building blocks for CleanSlateCSS:

Eric Meyer's Reset CSS - http://meyerweb.com/eric/tools/css/reset/ HTML5 Reset Stylesheet by Richard Clark - http://html5doctor.com/html-5-reset-stylesheet Default stylesheet for HTML 4 - http://www.w3.org/TR/CSS2/sample.html Default stylesheet for Mozilla Firefox - http://mxr.mozilla.org/mozilla-central/source/layout/style/html.css?raw=1 W3C CSS2 Cascade & Inheritance - http://www.w3.org/TR/CSS2/cascade.html W3C CSS3 Selectors - http://www.w3.org/TR/css3-selectors/

News and Contact InfoSubscribe to the Dharmafly blog Follow @premasagar & @dharmafly on Twitter Please get in touch if you have any thoughts, would like to contribute, or if you use CleanSlateCSS within a project.


sandbox important html401 widgets xhtml front-end html5 default html4 css markup stylesheet html widget reset

In a Nutshell, cleanslatecss...

This Project has No vulnerabilities Reported Against it

Did You Know...

  • ...
    Black Duck offers a free trial so you can discover if there are open source vulnerabilities in your code
  • ...
    check out hot projects on the Open Hub
  • ...
    65% of companies leverage OSS to speed application development in 2016
  • ...
    search using multiple tags to find exactly what you need

30 Day Summary

Apr 10 2016 — May 10 2016

12 Month Summary

May 10 2015 — May 10 2016


Be the first to rate this project
Click to add your rating
Review this Project!