Boilerplate 1.0 for Drupal 7: Responsive HTML5 & SASS

Our new theme has just been released!

This theme was developed with a few goals. Great HTML5 support based on the excellent Boilerplate HMTL5 template, full SASS support, and a base fixed/flexible responsive layout similar to Zen but with built in mobile support, all while keeping the code base small. Like Basic, the stripped down version of Zen, this is designed to run alone, not to run as a master theme with sub themes.

Features:

• HTML based on Boilerplate HTML5 and the Boron HTML5 theme provides semantic markup
  HTML5 elements make your data abstraction make sense and allows for greater reusability in the future.
• Simple default CSS from Boilerplate HTML5 for browser consistency
  Not all H1s were created equal, but with a little bit of CSS magic, you can have those elements default to the same look in multiple browsers.
• Browser feature detection classes included in HTML tag
  Want to use a css or jQuery feature, but are unsure it will can be used in browser x? With feature detection classes you can now make a call like this: $('.canvas #makemedance') and not have to worry about its effects in unsupported browsers.
• Modernizr.js allows for HTML5 element use in IE
  IE is still behind the game. HTML5 elements are supported by all other major browsers. Modernizr.js fixes that so the layout elements in HTML5 are now usable in IE.
• Box-sizing: border-box; layout with IE shim - CSS padding and border width no longer included in width calculations. Easily removed if not wanted.
  The CSS box model has confused many a developer for it's strange way of handling width. Width = specified width + border width + padding. This is fine if you fully account for it, but changing the width of an element means you may also have to change the padding. The box-sizing:border-box method will allow you to decouple the padding from the width. This means when you say something is 200px, it will be 200px regardless of padding or border.
• Three default responsive layouts at 800 (PCs)
  The standard layout used the three column holy grail method and automatically adjusts if either column is empty. Below 800px the right sidebar is dropped to the bottom and the left column becomes a flexible percentage based on the original column width.
• jQuery.mobileDropDown to automatically change navigation to drop down menus on mobile devices
  Navigation can be tricky on a mobile device. This small jQuery module will take the elements in any supplied element and convert them to a drop down that moves to the top of the page. This gives mobile visitors a quick and easy way to navigate your site.
• SASS and Compass support with SCSS syntax - support for sprites coming soon! (Compass is required for the default installation but can be removed if not wanted)
  SASS is the way of the future. By setting a few values in the beginning, you can alter the entire look of the css very simply. You can use variables for colors, fonts, widths, and even complex effects like drop shadows or gradients. SASS also brings the power of functions and logic to CSS, allowing you to style based on other elements in the css.
• Zen wireframing
  By clicking the checkbox, you can get a quick look at all of the layout items on your page.
• Zen editable blocks
  Contextual links for block editing.
• Zen Breadcrumb
  Comes with a few different options available to make a quick breadcrumb easy to handle.
• Console.log() protection from IE errors
  Don't you love IE testing? Ever run into the one where you have been working in JS and everything is going great and then you get an error because javascript was simply trying to inform you of something? IE not supporting console.log sucks. But at least it keeps it from throwing an error.

Caveats:

With something this awesome comes the usual disclaimers. This is not an easy theme to start with. If you are new to development and Drupal, you may want to look at the original Zen. It comes with great instructions and will get you going quickly.

SASS requires compiling. If this makes you uncomfortable, you can ditch it, but I'd encourage you to take a look first as it's the future, my friend, and it will not be going away soon. There are many different ways to compile the SASS, but our preferred way is to use Compass. While there are modules that offer on-the-fly compiling on the server, we're still a little wary of the php vs ruby lag and the fact that we don't always have control over what can be put on the server. In the future, you may see this theme also support those modules

Have fun with Boilerplate 1.0!