ExtraStark theme. Ultimate Drupal 7 CSS reset

Submitted by Andrey on Mon, 01/17/2011 - 18:41

While we were working on Drupal 7 version of our base theme noodle something else came up: the ultimate organic Drupal CSS reset. Which eventually became a small demo theme called ExtraStark. We were asked many times, how can one do it, so here is the example:

Why do we call it organic? The answer is simple: we do not disable or alter any of Drupal core CSS, we just reset it with a tiny piece of reset.css.

Concept:

This theme is not a fully fledged Drupal theme, but more of a proof of concept. Quite so many designers new to Drupal complain about system CSS and how it makes styling much harder. Our experience actually proved absolutely opposite: many of core styles are just helpers, so you don't have to start from scratch, but you can rather reuse many existing styles.

The ExtraStark theme is created for those purists to demonstrate how easy it is to reset any core Drupal CSS style to zero. It resets margins, paddings, font properties, etc., and it does the job much more radical way then original Stark theme.

The theme is not intended to be used on production sites (it's too bare for that), though you can use it as basis for more graphical theme.

Features:

The main attraction is reset.css, which by popular demand would include slightly remixed HTML5Boilerplate CSS reset as well. But there is more too:

  • form elements reset (so you'll miss nice enough default D7 buttons), it supplies only borders to make them visible
  • original Stark layout (layout.css) has no margins
  • the theme does reset front end styles, but not the backend
  • one anti-reset: font is set to sans-serif (in style.css, just hate small serifs)

Validation:

  • W3C CSS Valid (CSS level 3)
  • XHTML + RDFa Valid

Browser Compatibility:

IE (6,7,8), WebKit (Safari, Chrome), Mozilla (FireFox, Camino, SeaMonkey), Opera (8,9,10).

Disclaimer:

As usual, the theme was tested with Drupal 7 core modules only. If you have contrib modules installed then you might need more resets. Please DO submit an issue to module developers if you see some excessive or unneeded CSS.

More to read:

A nice and clear write up on Drupal CSS concepts by Jacine Luisi.

Downloads:

UPDATE: you can download the theme directly from now on at http://drupal.org/project/extrastark

Or check the gitgub project.

Tags: 
opensource
drupal.org
drupal theme
update
noodorg

Add new comment

Image CAPTCHA
Enter the characters shown in the image.

Comments (2)

I have read about this small demo drupal theme named Extrastark developed by you. I am really impressed with the concept to change the look and feel of the drupal theme without changing any of the drupal core CSS. I have gone through the other details of this Extrastark theme such as its features, validation, browser compatibility etc from this article. I'm starting a blog with the details of the cloud computing leaders I have already downloaded this theme for drupal from the download mirror provided in the article.

By Anonymous (not verified)
Thu, 12/08/2011 - 23:00

Front End performance
I agree Drupal CSS brings several helpers like clearfixes and element-hide, but then it also brings a lot of styles that we will eventually have to override. But the browser already loads its default styles, then cascades the Drupal layer, then your reset-like stylesheet and then finally the theme styles... Do you see where performance is going?
I guess the best performant solution is blend your reset-like stylesheet with a stylesheet that comprises all of Drupal styles (Zen provides such CSS). Then you can just disable Drupal styles (see Tao's approach). It would help you a lot in frontend performance.

By Anonymous (not verified)
Tue, 12/13/2011 - 15:19