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!
Comments
Excellent stuff! Can't wait to give this a whirl on the next project. Working with Omega for the current one has been a love/hate journey for the team at Ixis.
So thanks in advance for your hardwork stitching all the goodies together.
Tue, 02/07/2012 - 23:54
I also looked at the Omega theme and while it's got a whole lot of options, it seemed to eschew familiar drupal things for custom Omega options, which I wasn't really into. That and I don't like grids :)
I'm glad you like it and I hope you find it useful!
Wed, 02/08/2012 - 10:17
Nice post, thanks.
Just wondering, why you don't like grids??
Wed, 02/08/2012 - 16:27
As a dev, I like the idea of grids, but I feel like it's too much burden on the designer to make things fit. Or we have to modify designs ourselves to make them fit, and we all know how much designers love that. I may buy in one of these days after everyone else has forced the designers to adapt. :)
Wed, 02/08/2012 - 02:22
Looks nice - just on the heels of some hype over Sasson. I'll be running both through the gears on a current project - I Do like grids, but like Sasson's alleged approach. Love, love, love Compass and Sass - and have previously hacked Omega to use them, but like the previous commenter, have started losing faith in Omega. Looking forward to seeing the potential of your Boilerplate!
Wed, 02/08/2012 - 14:49
Was really excited about this, went to try it out, so disappointing. argh, content-first source ordering...
Wed, 02/08/2012 - 16:25
You must be disappointed a lot. There are two schools of thought on this and neither is 100% correct.
Wed, 02/08/2012 - 16:57
Thanks for the reply. I figured I better take a second look. You're right, it's really not a show-stopper. I just find negative margins to be an unnecessary complication.
Pretty quickly, I found if I just run through the CSS and remove all the negative margins, and quickly rearrange a few DIVs in page.tpl.php, then I'm back in business.
Thanks for putting out this great theme.
Wed, 02/08/2012 - 19:40
Really nice work, and quick, h5bp v3.0 was just released !
Seems like Boilerplate and Sasson have a lot in common, I hope you won't mind if we'll borrow some of your ideas into Sasson :)
From a first peek at your code I would just say (I already said nice work, right ?) that you might want to check your indentation and coding standards in general, this requires just a single click in any good text editor and makes a lot of difference, plus, you might want to do a quick search for 'basic' in your README.txt ;)
Wed, 02/08/2012 - 21:34
Absolutely borrow ideas! Most (95%) of this is borrowed ideas anyway :) Sasson almost met my needs but I ultimately decided I wanted my own hydra to deal with.
I'm aware of some of the cleanup that needs to happen. I should have run coder after I integrated HTML5 Boilerplate into my existing code base. And I totally did a lousy job of rewriting the read me. All will be fixed soon, after I've collected a few more bug reports.
Thanks again!
Wed, 02/08/2012 - 21:44
May I ask what was it about Sasson that turned you down?
Wed, 02/08/2012 - 22:18
It was mostly the size and grids. As you can see from my other comments, I'm still grid-shy. I also wanted something that was a reduced code base. The RTL was kind of the kicker as I have never used that in any of my zen sub themes. Also the PHamlP is something I've been avoiding for the time being as I wait for it to mature. It may already be there, but we didn't want any server dependencies in this one.
For what it's worth, I borrowed most of the code from elsewhere, but a good deal of the inspiration came from Sasson.
Thu, 02/09/2012 - 20:19
You have a demo somewhere? I am highly interested in this, looks intriguing!
Romy
Fri, 02/10/2012 - 13:33
Isn't this site running on it? Try reducing your browser width.
Fri, 02/10/2012 - 17:21
This site is still running our previous template: Boron, but with responsive media queries. These same ideas have been put into Boilerplate. We'll be converting as soon as we have time :) Since I just released the theme, I don't have a demo yet, but I'm building a few sites with it right now, so stay tuned.
Thu, 03/29/2012 - 16:39
I forgot to mention that this conversion has been done. You are viewing boilerplate in all it's glory.
Fri, 02/10/2012 - 11:09
Nice, I'm going to give this a try soon. Would it be hard to get it working with LESS instead of SASS? Just a matter of personal preference...
Fri, 02/10/2012 - 17:24
I haven't used Less, but from what I know about it, the syntax is fairly similar. And since I don't use a lot of mixins by default, which is the main difference from Less, I don't think it will be too hard to convert. Might even be a converter out there somewhere. Just be sure to remove the references to Compass, too.
Wed, 02/22/2012 - 14:06
Hello,
I am very,very interested in and excited about in your theme as I am contemplating which theme to use across all my sites(all run on features). I have used fusion and PE themes and have been reading up on Omega(but am in agreement with you on all the custom Omega specifics/options). I also am hesitant about grids as you are:) as I am a designer at heart.
My question is, with Boilerplate being a standalone theme(I am used to subtheming), how will this effect things if I am running 100 + sites on Aegir and need to update the theme on all of them with your changes everytime a new release is out? How do you effectively manage this? Is there any way to build a "base theme" from boilerplate and at least have a local.css file or something?
I am also just learning sass/compass, so bear with me here if I am not understanding things correctly:)
I would love to test out your theme and am so very hopeful that it will be a viable option to run over multiple sites. Thank you so much for all the hard work on this.
Wed, 02/22/2012 - 16:35
The main reason I didn't want to use sub themes for this was to eliminate the extra layer in the code. Boilerplate is designed to be completely customized. However, this does mean that you would not automatically get updates to the theme. With that said, I only plan to do minimal updates in keeping with the minimalist style of it. One way to handle it would be to keep a copy of boilerplate in your site, so you know when it's been updated, but then make the changes to your own theme. If subtheming is important to you, I'd highly recommend looking at Sasson. Some of the features for Boilerplate actually came from that theme.
Wed, 02/22/2012 - 18:53
Thank you, that makes perfect sense. As I have been mulling this over I am thinking that the effort/time to make the minimal changes to boilerplate standalones may actually be less than the time/effort keeping up with all the upgrades/versions to a larger base theme(for instance Fusion moving to Fusion Accelerator from Skinr and removing superfish from code to needing the superfish mod). This is just off the top of my head, would you agree?
Also, if I could throw another question at you. Skinr is very slow in development, but would be incredible to use in the future for "sets" of css code and apply through the drupal ui. Does sass/compass have the ability to "bundle" css code, for instance a "bundle" for a specific block or pane style with block/pane title,body color,typography etc..and background- like ctools style plugins sort of but css.
I would really like to test this out, should be able to in the next couple of weeks after fine-tuning some features stuff.
Thanks again,
Jen
Wed, 02/22/2012 - 16:03
To template.php in Boilerplate :
function mon_vintage_id_safe($string) {
// Replace with dashes anything that isn't A-Z, numbers, dashes, or underscores.
$string = strtolower(preg_replace('/[^a-zA-Z0-9_-]+/', '-', $string));
// If the first character is not a-z, add 'n' in front.
if (!ctype_lower($string{0})) { // Don't use ctype_alpha since its locale aware.
$string = 'id'. $string;
}
return $string;
}
Why on my page I have the warning?:
Notice : Uninitialized string offset: 0 dans mon_vintage_id_safe() (ligne 150 dans C:\wamp\www\respecte-moi.fr\sites\all\themes\boilerplate\template.php).
Thank you for your help
Wed, 02/22/2012 - 16:39
This would be more appropriately posted in the issue queue of the theme at Drupal.org, but I'll reply here.
It doesn't look like everything got renamed properly. I see boilerplate in the url, but mon_vintage as the theme name in the hook. Make sure all instances of boilerplate, including the folder, have been renamed and give it another whirl.
Fri, 02/24/2012 - 01:05
Just finished a project where I integrated manually the html5boirplate and your theme would have saved me lots of time. Will use it in a future project and update you with any comments. Cheers
Mon, 02/27/2012 - 17:25
thank you for such fantastic work:
valid html5 + responsive + light/clean/fast code = killer!
i have been developing drupal websites for 8+ years-
i have been waiting for just such a theme / framework as the one you have devised.
its simply awesome, and crushes pretty much everything out there, both drupal themes and other responsive / html5 template systems.
congrats and i will be kicking you some donations, as i plan on using boilerplate for everything, from here on in...
also i have gone ahead and modified boilerplate to make a "boilerplate2" as per jstoller's suggestions here-
http://drupal.org/node/1455566
seems to work pretty good and looks great so far...
i will have 2-3 new sites with complete custom themes based on boilerplate, live within a week or two.
love the responsive desktop / tablet / phone setup... brilliant!
Mon, 02/27/2012 - 21:17
Thanks for the great feedback! I'll be incorporating the changes from the issue queue into a new release as soon as possible.
Mon, 02/27/2012 - 21:38
Please make donations payable to "Your Favorite Charity". Thanks for the offer, but I did this on the clock, so no need for donations. I will accept high fives and/or a beer at Drupalcon though.
Sat, 03/03/2012 - 06:37
Hi, great template, i'm rather new to drupal and not much of a webdev.
Can you make it use the colour system, so i can change the colours? (or can i? i can't actually find the right bits in the code)
Can you give me any pointers for making the menu look more modern..... :) like what i edit . (i can see the code for link colours and text/highlight colours, is about it).
Also, as i've seen in some of the other themes i tried, the secondary menu is shown to the right of the current menu, is bit odd, not underneath, this normal?
Great job btw. it even resizes the images . awesome !
Mon, 03/05/2012 - 04:03
OK, so i just sat down and started staring at the code. Got the rough idea. Could you just elaborate slightly on the SASS thing. You note it requires compiling? I have no idea what that gives me, and if i need it or not. I'm assuming i can just edit the CSS and ignore the SASS for now?
Thanks :)
Sorry for the nub questions.
Mon, 03/05/2012 - 17:11
I started working on a reply to your other post, but got distracted. SASS is a new beast and if you don't want to use it, you don't have to. You can definitely just use the CSS. With that said, this isn't the easiest theme to use when you're just starting out. If you do use it, I imagine you'll learn a lot, but the curve will be steep. If you're looking for something a little more built out of the box there are plenty available. I recommend Zen for a great starter theme with wonderful instructions. You will however lose some of the features...
Tue, 03/06/2012 - 03:24
thanks for the reply, yeah i'm happy for a steep curve.
btw, havent tried other versions yet, but ie9 looks quite odd, like retro 1970's. Any plans to fix that, or should that not be the case? (i notice the theme says 6 to 8, sooo) :).
Tue, 03/06/2012 - 17:14
I just looked and while it looks rather ugly, it still functions correctly. IE9 still doesn't support gradients if that's what you mean. Unfortunately, with all of the cool stuff Boilerplate does, it can't make IE better ;)
Thu, 03/15/2012 - 17:29
I like the ethos of this theme, very much along the lines of one I'd been working on in a sandbox project.
I also share your dislike of CSS grid systems, not grids for design, but the hard coding of grids with html classes etc. Much prefer the lightweight grid style of Lessframework (nothing to do with the LESS css preprocessor). Which mostly consists of describing the grid in a css comment). But either way grids have no place in a base theme.
Thanks for sharing.
Some drush integration for starting new themes would be nice (or at least a shell script). I'd also wondered about doing something interesting with git branches, like having different basic markup/css layout sets in different git branches.
Thu, 03/15/2012 - 17:59
The drush integration is an interesting idea. I may take a stab at that. In house, we use a new_site.sh script. I'll talk to Dylan about a blog post about that.
Thu, 03/22/2012 - 20:41
hey you've posted an update, much changed? :)
also @media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/danlinn\/Sites\/playground\/drupal\/sites\/all\/themes\/boilerplate\/sass\/tabs\.scss}line{font-family:\000039}}
in tabs.css incase your bothered..
Mon, 03/26/2012 - 15:26
Just cleaned everything up. But obviously still missed a few things. Those things should't effect anything though.
Fri, 03/23/2012 - 15:48
i was also meant to mention there is now a .sasscache file in the root of the gz/zip. is that required now?
Thu, 03/29/2012 - 16:52
I made sure to delete that from the 1.4 release.
Wed, 05/09/2012 - 12:46
Dear Mr. Linn,
your theme Boilerplate 1.0 seems to be almost ideal going by its features. I'm currently using the theme Omega and as long as I use a fixed width everything works perfectly. But switching to a fluid layout and: OMG...
That's why I am seeking for a replacement and why I'm glad I found Boilerplate.
Up to now I used the module Megamenu for creating a mega menu, which I want to ditch for the module Superfish (seems the better choice given that there seems to be no further releases for Megamenu).
(By the way Megamenu works great, but the fact that there is no "real" Drupal-7 version makes me feeling queasy.)
So, how does Boilerplate get along with Superfish, especially in the light of "jQuery.mobileDropDown to automatically change navigation to drop down menus on mobile devices"?
Are there reference sites? Or is my question trivial and the answer has been given somewhere else?
But besides the Superfish issue (or more generally the drop-down menu issue) your theme seems great.
Best regards,
Georg Huber
Wed, 05/09/2012 - 17:01
I haven't worked with Superfish directly, but the premise of the mobiledropdown is pretty straight forward. It takes the links of whatever jQuery selector you pass it (Like $('#header #navigation'); ) and transforms it into a jump menu. It should work with Superfish that way, but your mileage may vary. The call to the script is pretty easy to disable, too, if it just doesn't work for you.
Thanks for the kind words about Boilerplate!
FYI, it's only Mr. Linn if you're nasty :)
Fri, 01/18/2013 - 17:35
Hello. First of all i've been used and i will be this amazing template for some of the sites I'm working with, and i appreciate a lot all the effort that you have been putting on this project. However i found out something that i don't figure out and thought that maybe is something related with the template. The responsive layout works perfectly until i connect via 3G and then the stylesheet does not load. Do you know anything related with this issue?? I would be gratefull if someone can give some tips to solve this "problema" I don´t think that is a matter of weight 'cos my own domain wich is still in process does not have any stuff and that happen as well...any sugestion will be appreciated...
Mon, 01/21/2013 - 17:37
That's sounds a little wonky. Would you mind posting in the issue queue hopefully with a test url and we'll take a look at it?
Sun, 08/14/2016 - 19:17
I want to thanks.it was best theme even seen in Drupal.its fast and clean code.
we are now waiting for drupal 8 :P
Hope your team update it for drupal 8 soon
Tue, 02/07/2012 - 23:01