Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme [July 19, 2012]
Want to learn more about Acquia’s products, services, and happenings in the Drupal Community? Visit our site: http://bit.ly/yLaHO5.
Too many responsive websites fall into the "move the sidebars around" trap and end up looking the same as any other responsive site. By combining the CSS of Zen Grids and the smart markup of the Zen 5 theme, you can create a stellar, unique responsive design for your website with ease.
Zen has always been a popular starting point for building Drupal themes, but the new Zen 5 has been re-written from the ground-up with updated best practices including HTML5, Modernizr integration, Normalize, IE conditional classes, responsive layouts, and, best of all, Sass and Compass integration.
Zen Grids is an all new project, independent from the Zen theme. The Zen Grids system reinvents the flexible, but complicated CSS layout method in old versions of the Zen theme, transforming it into a radically simplified process using the power of Sass. Where traditional grid systems (like 960.gs) often don't scale to match a responsive design's requirements, Zen Grids makes it incredibly easy to create amazing responsive layouts in just a couple lines of code.
Speaker 1: Hi everyone, thank you for joining in on the webinar today. I’m going to go over a few slides and then pass it over to Dana. Today’s webinar is Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme with Dana DeMet and John Wilkins from Palantir.
Dana: Hi everybody, I’m Dana DeMet. I’m the business manager here at palantir.net. I’m here today obviously with John Wilkins. He’s one of our senior Drupal developers and themers.
Palantir.net is a full-service web strategy design and development firm that was founded back in 1996. We’ve been working with Drupal since 2006. Our team is made up of about two dozen or so web design development and Drupal experts. We specialize in open source technologies to develop sophisticated solutions that help people share information online in new and pretty exciting ways. We’re also very involved in the Drupal community, the Drupal association and DrupalCons, and we’re also an Enterprise Select Acquia partner.
Our team also includes some of the leading contributors to Drupal 7 core and we also have a number of folks who are leading core development initiatives for Drupal 8. On top of that, many of our key members are responsible for maintaining or co-maintaining some of the most widely used Drupal contributed modules. We’re currently looking for Drupal developers as well as Acquia and engineers to join the Palantir team, so if you’re looking for a new challenge definitely contact us at soon as you can.
At Palantir we’ve been focusing on developing mobile first solutions for our clients for the last couple of years now. This is included the development of both dedicated mobile apps for iOS and Android devices, dedicated mobile and adaptive websites and of course responsive designs.
While we recognize that a responsive design approach isn’t always the best for every situation, we’ve definitely found that it is ideal for many of the clients who we work with who are looking for a robust and sustainable solution that is as future proofed as possible. The way that people interact with websites is changing very rapidly. It’s been estimated that within three years the majority of us will use mobile devices such as smartphones, tablets and eReaders to access information online, while a sizable minority will continue to use desktops and laptops for many years.
In this rapidly changing ecosystem, what’s required is an approach that focuses on the needs of the user rather than the capabilities and features of their device. That’s one of the reasons that Palantir has provided support for the development of the Zen base theme and the Zen Grids project. What you see today in Zen 5 is the result of a year’s worth of work over several projects, including our own responsive site, which coincidentally was recognized by responsive design pioneer Ethan Marcotte as one of his 20 favorites, and the responsive sites we’re currently building for the University of Michigan Medical School.
We like to use Zen and Zen Grids because it enables us to build sustainable, best practices driven sites that focus on the needs of the user using the most current and standard compliant tools and techniques. With all that information I’m going to turn it over to John, who’s going to take you over Zen and responsive web design.
John: Hello everybody, I’m John Albin Wilkins. I’m actually really excited to be talking today. I wrote all those lines just for this presentation. Primarily I’m the Drupal 8 mobile initiative lead, which means I’m sort of rallying up and helping people get coordinated around adding mobile solutions including responsive design to Drupal 8. It’s pretty exciting but the thing I want to talk about today is things you can do right now in Drupal 7, and that’s using Zen and the Zen Grid system.
The Drupal Zen thing has been around for a while, I think over 700,000 downloads, which I actually just saw that download statistic recently and it’s pretty humbling. It’s really amazing that that many people said, “Let’s take a look at the project.” Obviously you can download it from drupal.org/project/zen.
The Zen 7.x 5.0 release is actually the fifth major release. Those of you who have been keeping track of Zen releases may have noticed that we skipped version 4, but that’s just because when I quoted then from Drupal 5 to Drupal 6, I thought it was going to be a straight course and it turned out to be a major overhaul of the system because the previous system is so different than Drupal 6. I sort of forgot to bump the version number up when I quoted the Drupal 6. I’m just basically catching up from that being behind by one.
Zen 5 is the fifth major release, and I started out just trying to add HTML files features to Zen. What ended up happening was that I got a whole lot of other great best practices into the new Zen 5 theme including Normalize, Respond, Sass and Compass, Responsive Design of course as well as accessibility things like ARIA and RTL language of course is all in there. There are a lot of really great encompassed about this new release, and you can read more about all those different features on the project home page.
One of the things that I noticed once I tried quoting Zen to HTML5 is that Drupal things can’t really … they can’t really alter the markup that you need for good HTML5 websites because the theme level just doesn’t know about the semantics of your actual content. Of course Drupal is a system that allows you to create content types and create add fields to those content type, and I hold them to the configuration of Drupal. The theme system really doesn’t understand anything about all those different fields. All we know is that there are X areas or text fields, but it doesn’t know what HTML5 element it should be using. It’s the HTML5 elements that really makes a nice semantic markup, so while developing the Zen 5 theme, I got together with smart people at Palantir and we wrote census modules specifically to address the markup of Drupal’s field’s module.
The default markups that Drupal 7 provides for a field is kind of the worst-case scenario in that it assumes that you’re going to have a paid multi-value of fields with no markup of its own. It’s like a plain text multi-value field with a label. Really that’s an edge case, but that’s what Drupal 7 first assumes. It provides all the markup you need or that edge case, whereas Fences sort of does the opposite. It assumes that most of your elements are going to have markups inside them already, they just need sort of a single wrapper element around it. You can see that Drupal 7 with Fences provides a much leaner semantic markup for your content. We really like this start. We were building the sites to make sure that Fences had been installed and configuring each of our fields to use the right semantic markup.
When we were building a responsive Drupal site, basically we’re configuring Drupal fields with Fences. Then we build a Zen sub-theme and then design our layouts with Zen Grids and Sass. That’s basically … those are the things we’re really talking about today. Yes, this is probably the most boring slide that I have, but it’s not quite as boring.
The guiding principle applied in Zen has always been that it makes no assumptions about your content design and it does the most minimally useful thing for all designs and then gets the hell out of your way. Basically, what this means is that we don’t know you users. We don’t know your content, but there are a lot of best practices and good development practices that you should be following. Zen will help you to do those things. On those places where people may honestly disagree about the right approach of things, Zen makes sure that it provides a sensible default that’s really easy to override. You can swap out Zen’s default principles or default implementation of anything and replace it with your own.
For example, the Normalize CSS files that’s now included with Zen. Normalize is an interesting project in that instead of resetting all of your HTML elements with a really overzealous, in my opinion, selector and reset style that removes all margins and padding and bold and everything, removes all style from all elements. Instead we normalize that CSS. Let’s make the default styling consistent across browsers, so it adds sort of a light sprinkling of markup to a select group of CSS or HTML elements in order to provide consistent styling.
Then one of the best ways to Normalize Zen is to edit that file directly. Basically instead of resetting your styles, you’re setting your styles inside the Normalize CSS file, so you’re setting sort of your standards.
Again, this is as a single file. It’s really easy to rip that out and replace it with, if you prefer, an HTML reset. You could certainly do that. The rest of Zen will continue to work with systems normal. That’s been a valuable content and it will continue to be that way.
Lean, semantics HTML5 markup, the new Zen has gone through all of the relevant template files and really removed a lot of the ractives that has been sort of the development station of Drupal 7. It also to provides a sort of a flexible lightweight responsive stream and it does it with the meta tags and some supporting libraries which I’ll show you in a second, as well as the Sass and Compass.
When you start to build a sub-theme of Zen, which is the pretend way to use Zen, there’s applications which you can find on the Zen project page which lists all the five or six steps that you need to do in order to take the starter kit folder, which has been included with the Zen theme, and copy that to your new spot on your site and modify it to your new sub-theme.
Alternatively, you can use Drush. Drush and Zen go to together quite well. You can download them, clear the cache and then as soon as you do that the Drush-specific Zen commands are now available. You don’t even have to enable them. You can just start creating start creating sub-themes using Drush, so Drush Zen and then in quotes “My First Sub-theme.” Then sort of the machine name of your sub-theme, or we’re just going to choose first in this example and then description.
Then my favorite thing is this backslash without-rtl plug because that’s … well, RTL is a great feature if you need it. It does sort of double the number of CSS files and adds a whole bunch of comments on the side of the CSS files. Let’s say LTR, the backslash without RTL will strip out all of those extra files and all of those complicating the one application. That’s quite nice. Then we do that and it just goes and creates a new sub-theme for you because all those steps automatically for you. It puts it in sites/all/themes and whatever the machine name was. That’s really, really handy.
Once you’ve built your sub-theme, of course we go to the admin insurance and they will make it default and then you can edit the settings. Now, the settings on some themes are quite extensive. I was actually one of the developers who helped make the theme settings available and working in Drupal 6 and Drupal 7, and I’m happy to see developers continue to improve and create interesting settings inside their themes, but then it really takes sort of a minimalist approach to the settings page.
There are just sort of a handful of settings. The idea here is that probably you don’t need that many settings usually because when you’re building a website you know exactly the type of theme that you want and then instead of adding a bunch of settings, you can simply just sort of hype your sub-theme to do that thing rather than have an option to do it or not do it.
The few things that it does do is that it adds an easy way for you to turn on or off some of the responses and mobile-first theme that every single theme needs. Zen 5 comes with respond that DS as well as the HTML5 shift. Now, if you want to use Modernizr on site, which is a particularly great script, you have to of course build a custom Modernizr script so that you’re getting exactly the feature test that you want within Modernizr and then you can add that to your theme. When you do that of course you don’t want respond.js on there because Modernizr has its own version of that. You can simply go to your sub-theme and turn off respond.js, and it won’t have that and sort of conflict with the Modernizr.
Also, if you decide that you don’t want to build a responsive site you can simply turn off the meta tags that are necessary in order to get responsive designs to look right on mobile devices. That’s a really flexible way to toggle those separate features. There are just a handful of these things and settings. Go ahead and take a look at it and see a few interesting things there but not an overwhelming number of things.
DrupalCon Denver, I gave a presentation on Re-thinking Responsive Design Techniques. Actually if you go to denver2012.drupal.org, you can find the video for that, which is … It talks on probably some of the same subjects, but it also delves into my responsive building techniques, which we won’t be covering but instead we’re going to be talking about some of the really useful patterns and techniques and responsive design that are really essential to building responsive design in a smart and sensible way.
Of course, we’ll also be talking about Zen grids here. One of the first things that I think is useful is that of course media queries are part of the responsive design technology that you have to use, and finding the right breakpoints inside your design is really critical.
One of the problems that people have encountered is that they got stuck in the mindset of, “Okay, I’m supporting these desktop screens, 916 and 1,200.” When we went to mobile devices we started thinking about those device sizes in 320 and 768, and that was not really a wise decision on our part. Really you don’t ever want to use a breakpoint that is a well-known device size width because it doesn’t make a whole lot of sense.
What you’ll find is that some apps on mobile devices will actually add a little bit of chrome so it’ll actually cut off some of the pixels within the viewport. If you’re viewing a website within like a Twitter app you may actually see a completely different layout because you’ve set your breakpoint at the device size and yet the viewport is slightly smaller than the device size now.
The way you actually find breakpoints is basically you find pieces in the actual spot in your design where those breakpoints should be. And how do you do that? It’s actually pretty straightforward because the breakpoints basically are near the point in your design where your design breaks, right?
If we start with a mobile design and a small viewport and if we sort of increase the size gradually and make it wider and wider and wider until we get to a spot where like, “You know what, this design doesn’t look good anymore. I think I need to transition to a new design.” Right at that spot where you think it looks bad, sort of just shrink it a little bit until it looks good again and then take that as your breakpoint, because you wanted the breakpoint to be a transition from a good design to another good design. You want it to be relatively near a spot where the design breaks.
You just use this technique of gradually increasing, finding the spot where it looks, “Ah!” and then sort of backing up until it looks good. That’s how you progressively increase the size of your site until you build up a sort of natural set of breakpoints that make your site look really good at any single device size that’s possible.
One of the interesting things that you end up with as this blog post from Patrick Grady, designer at … posted is that you end up sort of inverting where your breakpoints are because instead of breakpoint being at like 320 where the iPhone is, you find that 320 is sort of right in the middle of the spectrum, so it’s sort of in between your natural breakpoints. Your natural breakpoints are the spots in between all of the device spots that we had been traditionally been thinking about. I think this is a really great approach, using natural breakpoints, and I really recommend using that approach as well.
The other thing I would like to talk about is percentage-based gutters. This is actually one of the boring slides, that bullet point. But fortunately I’ve actually only got one bullet point, which is that they suck. The reason why percentage-based gutters suck so much is because … Gutters of course are the space in between your grid columns. Using standard CSS technologies, you have to … Since we’re using a flexible grid we have to use percentages for our column widths. Using standards CSS, I think that usually means that we need to use percentages for our gutters, the margins between the columns.
What we discover when we do that is that if we want to have a consistent gutter size like let’s say of 2ems, 600 pixels of 5% gutter equals approximately 2ems or 30 cycles. If we still want to have 30 pixels at 900-pixel size, we actually have to shrink the gutter size to 3.33333%.
Basically, we end up having to create a whole bunch of breakpoints just to get consistent gutter sizes. Not only do we have to change the gutter size at those break points, we have to recalculate all of our column widths as well.
This is just a real pain in the butt, and fortunately there’s no good reason that we have to continue using that. That’s because there is a widely supported CSS property called box-sizing. With the setting box-sizing, we’ll change the CSS’ box model. Traditionally our – if you look at the graphic here – our CSS box model says that when you have a white dotted box here which has specific widths and you add paddings and borders, that padding and borders is outside the width. When you set box sizing equal to border box, suddenly the padding and the borders are internal to the width.
Of course this makes a lot more sense than the traditional CSS box model. If we have a box and we decide to add some padding to it, it makes no sense that the box would get bigger because of the added padding. Physical boxes don’t act that way and our CSS boxes really shouldn’t either. That’s why white box sizing border box, because you’re then able to set it better using padding. You don’t even have to use percentages anymore, you can use ems or pixs, and you have very consistent better width because you just use 2Ems. It’s always 2 ems no matter what media query, no matter what breakpoint span that your in.
Paul Irish talks about this box-sizing CSS property on his blog post. Now this is also Patrick Grady who pointed this out to me a couple of months before Paul Irish posted this blog post, and this pretty much changed my life because without it, the Zen Grid is impossible.
How do we go about building different layouts in Drupal? The obvious layout method is to use the region-based layouts and basically if you look at this diagram here on the right-hand side that’s sort of the traditional Drupal layout with left sidebar content and right sidebar. Doing your really based responses layouts means that as the viewport, which is the block box here, shrinks and finds the regions that sort of rearrange themselves, so the right sidebar drops down to be below the left side bar and the content of and then as it shrinks even more than the left sidebar, it drops down as well.
This is the way that starts in Drupal 8 will work. Incidentally, it’s a leads default layout file that’s given with the Zen 5 as well. That comes with the obvious method here of region-based layouts is that it’s kind of warned because everybody is … it is really obvious, everybody knew this layout method. It make sure responsive designed slightly cookie-cutterish and not very unique.
At Palantir we decided to try a completely different technique when we designed that at the palantir.net website. That was to use the old-based layouts. Basically, each field on a particular multi-content page becomes a grid item inside our possible grid. This is a screenshot or partial screenshot of one of our experienced content types, a Palantir classic experience, and this is a portfolio page. Basically it has a large image across the top and then it has a body text. Then it has a highlights text field and a team text field, which is I think it’s a user reference field or one of the new Drupal 7 reference manuals. Basically, each of the fields then become one of the things that you could actually position in place on your flexible grid.
I really like this method because it makes each of your content types, you can use a unique layout for each of them, one that works great for that content. The only reason why Zen 5 doesn’t come with a layout like this of course is because we don’t know what your content types are going to look like. I provide a default region-based layout file, but honestly you should throw it away and build your own. That’s what I’m showing you, how to build your own using Zen Grids.
Now, Zen Grids is actually a separate project from the Zen theme. That’s why we talk about the Zen theme and Zen Grids. The Zen theme has been around a long time. The Zen Grids project is pretty new. I wrote it over Christmas break and I started writing it over Christmas break, finished it up earlier this year and released it just before the release of Zen 5 this spring.
You can actually use each of these independently of each other. If you use Zen you don’t have to use Zen Grids, and if you want to use Zen Grids you don’t have to use the Zen theme. You don’t even have to use Drupal if you want to use Zen Grids. They really should be our separate independent projects but Zen theme comes with Zen Grids included with it.
You don’t have to separately download the Zen Grids, it’s inside with the download file of the Zen theme. It’s not a separate installation for that. Now, I didn’t mention that the Zen Grid is a Sass and Compass project. Zen Grids is a separate project and then zengrid.com is where you can find more information, everything about Zen Grids. There is a help page which documents all of the different … it’s an APA document, API documentation for all the different mixins and variables provided with Zen Grids.
Why did I create this separate project in Sass and Compass? I’m sure that most of you have heard about Sass. It’s a CSS preprocessor, which basically means you write your CSS using Sass and text and then it will … It’s a utility that will level convert that Sass file into a regular CSS file. Basically it would compile your Sass files into a regular CSS and then use Sass regularly within Drupal or any other kind of website.
Why did I think that it was necessary in order to start using Sass and Compass and draw this entirely separate Zen Grids project to do layouts when they … other themes within Drupal have decided to do layouts using other techniques. That’s because writing the raw layout CSS is really hard. If you looked at previous version of Zen, it uses the method called Zen Column which was really well a field tested but it is complex. You have to be really careful with your math when you’re editing the files. It’s easy to accidentally break the code because of the math is really sensitive to minor miscalculations.
Writing a single layout just using raw CSS, it’s hard. That’s why people developed the 960 grid system. That’s why we developed grid systems, because it provided an extraction layer, a way to simplify for getting layouts. But writing three to five separate layouts for a responsive design, because each media query basically means a different layout, that just becomes really, really hard using raw CSS.
I recognized that it no longer made any sense to try to use Zen Column on this CSS technique to build layout files. It just no longer made sense. It was way too difficult, even for me. Fortunately Sass makes this much easier. You don’t have to be afraid of Sass, because it’s just CSS syntax plus some extra stuff, some extra awesome sauce.
If you take a CSS file and rename it from .css to .scss you made a valid Sass file now. Because Sass just takes the CSS syntax and sort of extends it a little bit. I really believe that learning Sass will save you time immediately. We first tried out Sass within Palantir over a year ago. Basically I said to my fellow developers, “Let’s try this. We haven’t really studied it, we tried to learn it, let’s just try using it on this project because it just generates raw CSS. If we completely screw it up we can just throw away our Sass files and keep using the CSS files that it generates.”
We decided to go with that, and it really had saved us time immediately. I believe that there are certain Sass techniques that you can use that within a single project if you use those techniques, you’ll save all the time that you have to use to learn Sass within the same project. You will actually use less time developing all of your CSS if you learn Sass while you write it. Let’s do Sass in two minutes here, and then we can talk about Zen Grids.
Sass, it has seven domain features that two of these … each ones are variable. This was one of the things that I wanted in CSS ever, right? You can set a variable and then just use a very little name repeatedly throughout your Sass file. Here we have an example of setting the blue variable to this specific color here and then we’re using it multiple times in our Sass files, which is the first sequence here and then underneath the arrow basically, it gently takes out the Sass file and generates the CSS below. You can see that it is just … it inserted the actual raw sort of raw variable or raw value into all the spots where the variable was, very straightforward.
Mixins are a really, really useful thing. Here are the example of Mixins and basically what Mixins do is, it allows you to apply a group of CSS properties using a single line of Sass code instead of, a lot of, anywhere from zero in this example is two lines of CSS properties on to a certain infinite number of CSS properties onto any CSS selected that you want to put just using a single line.
It’s a great savings in writing your code and of course it’s a good code we use. If you’ve written a Mixin that just does left, provided a parameter of distance and basically what it will do is it will float that element to the left and move it away from that left edge by the distant CSS file. Here we’re going to apply it to the .pictureselector and we just call that Mixin using @includeleft and then the value that we want is 10 pixels.
I should say that that Mixin, that’s how you define your Mixin. You can create your own Mixin, we created this last Mixin and now we’re going to use this here with the @include left. Then when Sass generates the raw CSS you can see it just goes and adds float left and margin left to the picture selector. We’ve written one line of Sass and it’s generated all the lines of CSS. The way that we use Sass within a counter is we would write all of our files using Sass and then have a Sass utility to generate the CSS sort of on the fly as we write this and then deploy the CSS.
This sounds like its more steps but it actually is. All of the Sass you said will be used … will basically you will set them and say, “Hey, watch this folder of Sass files and as soon as you see me save a change to that Sass file it immediately generate a CSS file.” You save your Sass file and immediately you have to generate your CSS so you can deploy the CSS however you want. I like to work locally, some people use MAMP to work locally. You’re literally just editing your Sass files, saving, then going to the browser and reloading because the CSS are already ready for Drupal to pull that in, in the normal ways. You can learn more about Sass’ features at sass-lang.com.
I want to talk about Compass. When people talk about Sass they talk about Compass at the same time, and there’s a really good reason for that. Compass is basically, it’s a library of pre-defined Sass mixins. Basically the mixin idea is really powerful, but if you have a community of developers who are writing mixins and sharing them that’s even more a powerful idea. Compass is a library that includes a whole bunch of really this whole thing including CSS3 mixin. With CSS3 mixins you never have to mess with vendor prefixes ever again.
Your box shadow, you don’t have to remember which vendor prefix you have to use for the box shadow, which vendor prefix do I have to use for the animation and all that stuff. You just view it as a single line of Sass, which is called a Compass mixin, and it’ll write all of the vendor prefixes for you automatically. Super handy. That alone will save you tons of time because you no longer have to go and look up, “Can I use…” on HTML user groups or wherever you’re looking to find out about vendor prefixes.
You don’t have to do any more research, just use Compass and it’ll write the right vendor prefixes for you. It also provides a vertical rhythm help for Mixin which Zen 5 includes in order to do some nice vertical rhythms, since it can be tricky to do that using raw CSS. It also tried some standardized IE Legacy variables so you can turn on or off support of IE six, seven or eight with a single variable just like you said, legacy support for IE6, default or true or whatever.
That’s become really useful because we had a client that said, “Oh, by the way, didn’t we tell you our CEO uses IE7?” We were able to fix a lot of issues that we had with IE7 simply by turning Legacy support for IE7 back to tool. That fixed a lot of the issues that we had already and then there was a little bit of cleanup. It was a much easier job of adding in that support for IE7 so late in the project.
Also it includes some mixins for image price generation, which are really super timesavers. You don’t have to do all of your sprite generations in Photoshop or what have you, and do a whole bunch of calculations and measurements in order to find the right spot in order to add that to your CSS.
Because Compass is so great and has all those other stuff in it, Zen Grids requires Compass. What exactly is Zen Grids? Zen Grids is another library of pre-defined Sass and Mixins. It’s just like Compass, except that it’s only for doing layouts. It uses some of the Legacy IE variables, which is why it requires Compass. That’s why when people talk about Sass they say you should install Compass at the same time, because it’s just a great feature set.
One of the sort of bugaboos that people have about Sass is they think it requires Ruby. That’s simply not true. Sass and Compass are written in Ruby, but I don’t use … I’m not a Ruby builder. I don’t know anything about Ruby. I wrote Zen Grids using Sass’ syntax. I don’t know anything about Ruby. You don’t have to learn Ruby. The only thing is if you’re installing Sass or Compass from the extend line, that simply means that you have to have Ruby installed on your machine. That’s the only thing about Ruby.
The first thing about command-line junkies, installing Compass and Sass you can do that for free. Just go to the URL site that’s provided here along Sass-lang.com. The hardest part might be getting Ruby installed on your system if you’re a Windows user. Mac OSX, that’s already on there. Then you still have to go into the command line and install Compass. You just might not want to do that.
Instead, if you don’t like going to the command line there’s a $14.00 app, Fire app, which is great. It has Sass and Compass sort of bundled inside the app, so you just have to run the Fire app and you have Sass and Compass installed in your system. The other question that people have is, “Do I need to install Sass and Compass on my server?” The answer is absolutely not, because these are tools for developing CSS so they should be tools on your development systems like on your laptop. You install a Compass and Sass there, it generates your CSS and then you’re just copying the CSS files from your development environment up to your staging production, what have you.
I’m going to talk about Zen Grids. I’m going to try to share my desktop here and show you how Zen Grids actually works. Okay, that looks like it’s going well. Let’s go over to zengrids.com. This is where you can learn all about Zen Grid syntax and Mixins, and it is of course a responsive to site as well. It’d be pretty silly to have a system that allowed you to create responsive layout but wasn’t responsive itself.
The first part of it here is my sort of manifest on why I think you have to write responsive sites using Sass and Compass, but let’s jump straight into using Zen Grids. I’ve given some example markup, and this is a pretty basic markup where we just have a wrapper or a container view and then we have a bunch of HTML5 elements, articles in the size and stuff. We’re going to position each of these items inside our grid.
As you can see, there’s nothing special about this markup. That’s why I’m showing it to you. Zen Grids doesn’t require any special markup. I would say the only requirement is that you’d be able to have a sort of custom class of things that you want to position inside your layouts, which we have here.
When we’re writing our Sass files the first thing we’re going to do is add imports. Adding imports is similar to the CSS add imports. The difference here is that basically you’re telling Sass to import all of the mixins for Zen Grids using the using the add/import Zen. Then we’re just going to set a couple of variables here, set the number of columns in our flexible grid to seven and set the gutter width to 10 pixels.
I want to show you here, this is the layout that we’re actually going to be creating here. As you can see it’s a seven-column grid, and then we’re just going to position those five different grid items inside our grid.
There’s basically just four or five things that you have to learn for Zen Grid, and I’ve already taught you three of them. Those two variables in the add/import, the next one here is the Zen Grids container Mixin. This basically just adds some standardized CSS properties to the wrapper that contained all of your grid items. You can actually use the body element as your container. There’s no requirement that has to be a div. It can only be the body and the division, all of that is inside the body as grid items.
The Zen Grids item Mixin, this is how you’re going to actually apply and position each of your grid items. This first aside we’re going to position inside our grid using this pass include Zen Grid item two comma one.
What are those parameters in there, two comma one? It’s really quite basic. Here is the content. This is the content element, and we are going to position it inside our grid using @include zen-grid-item four, three and that four. That first parameter says, “Make this grid item span four columns,” so we want to be four columns wide. Then three, the second parameter here is, “Position this grid item in the third column.”
Literally it’s just sort of reading this, and it’s English. It’s making a Zen Grid item that’s four columns wide starting in the third column from the left. If we go down and look at our … See I’ll put here, you can see that that’s how the content is being positioned. It’s starting in the third column as we counted from left to right, and we’re making it span four items. It’s in the three, four, fifth, and the sixth columns, and we’re just doing the same thing here.
You can see that our second side which is the right sidebar, we’re positioning this grid item and we’re saying make it one column wide and positioned in the seventh column from the left. Include Zen Grid item one, seven, so one column wide, seven columns from the left.
Let’s look at this again here. We’ve taken our side one and put it, again, two columns wide starting in the first column. Our content div, which is four columns wide starting in the third column, and then our side two which is one column wide starting in the seventh column. This is all the Sass markup we need in order to create this layout.
We’re also going to take a look at one other thing here, how do you create new rows? The side one content and side two, that’s all in one row. But we’d like to put our footer, our two footer elements in the second row beneath the first row. The way we do that is pretty easy, since we’re using floats as the actual sort of layout technique underneath. We’re going to simply do a Zen Clear on our first footer and that will start a new row sort of appear below everything in the previous row.
For the ones, the first element in our HTML markup but because Zen Grid is very powerful, you can also rearrange things within that row. Our second footer, which is actually the second element in the HTML source after footer one I should say, is positioned to the left because we told it to be positioned in the first column. So footer one is positioned starting in the fifth column and footer two is positioned in the first column, so we’ve switched the visual ordering of this simply by using the proper or the placement parameter here, so which column do we want this grid item to be positioned in. That’s basically almost everything you have to learn for Zen Grids add/import, you set the variables for the column count and the column width and that this Zen Grids container for the single container that you need for all of your grid items and then just start positioning all of your grid items because the Zen Grids item, and then lastly Zen Clear starts a new row.
Let’s go and … Yeah, congratulations to you, you’ve learned all the basics of Zen Grids, which is true. It only took about 10 minutes to do that. Let’s go ahead and pop open an actual Zen theme sub-theme. This is something that I’ve created using Drush earlier this evening, about two hours ago. Then I downloaded some content, put some things in the right sidebar, left sidebar here. When you open up it … I called it Taipei. Taipei is actually the city where I live in Taiwan, it’s actually 9:00 at night here now.
If you take a look at your sub-theme that you’ve created you’ll see a whole bunch of different folders here. The config.rb file, it’s an interesting file which we’ll talk about in just a second. But the Sass were all the sort of Sass files and the layout file that Zen uses by default, which again I recommend you sort of run away in building your own, is a responsive sidebar. That’s this file right here.
The first thing that I’m doing here is setting the column count to be five, the gutter width to be 20 pixels. Let’s go down here, our writing the Zen Grid container here. These are the three wrappers that we’re using inside this particular layout, and let’s go over to our first media query. Our default media query should just be a … when I say default media query, these files that we use outside of media queries should be the mobile layout which is single column and basically no layout on any of our grid items because we want it to appear in the same order that it appears in the HTML source in a single column.
We’ll just put that sort of the … and I’ve not used the right breakpoints, definitely, 480 is sort of the size of the iPhone. Again, I don’t know anything about your content so I can’t pick the right breakpoints.
If we look at this, these are slightly larger than the phone because the 480 pixels through 960 or 959 actually. I’m going to set the Zen column count to three, so basically we want to create a layout that only have three grid columns in it. We can, our content item we want it to be two columns wide starting in the second column, so let me just …
Basically we just send in the second and third column from the layouts of the column, the middle of the column on the right. Then our first sidebar will be one column wide starting in the first column because of course, we’re going on the left. Then our right side bar we actually want it to be below our first sidebar and the content reaching, so we add that Zen Clear to create a new row.
We’re actually going to have it span the entire width of our grid, so three columns wide starting in the first column. The way that I get this CSS file is here to be generated into a CSS file, which is right here, is by using this little Fire app which is up here, which I installed a while ago. I’m going to tell it to watch the specific folder, watch our Taipei folder. Basically, I’m going to point this application at the root folder of my sub-theme, and in fact we’re going to go and read some integration information from this config.rb, and so it’ll know how I want it to generate the CSS. What do you know,
I’m getting an error. Ugh, live demos. (Laughs)
I’m going to go straight to my backup, which is using command lines. That normally works great, I’m not sure what’s going on there. We’ll go over to the command line. I’m going to type my Taipei root and then you can install it, Compass watch. We use the command line, the quarter length of the Fire app.
All I have to do is type this one utility and then it’s going to start watching the Sass sub folder here. Anytime it sees me make a change it’ll generate the CSS file. Let’s prove that. I’m going to go over here and make a very trivial change, just add a single line, hit save, and now let’s go back over to our terminal. You can see that it has already overwritten the CSS file and generated a new CSS file automatically.
Let’s take a look at that three-column layout that we wanted for the small sizes. Here you can see our left sidebars over here, our main content is this called two columns on the right. If we scroll down, our right sidebar is now in a new row down here, and all that CSF was generated on the file, here I can help you below the … Zen believe me if this is actually then create new CSS. There’s our second sidebar down at the bottom.
Let’s go ahead and do something slightly more drastic. You can see how easy this is. Let’s switch the positioning of this sidebar and this content. We’re going to stick with three counts line, but let’s move our main content from the second column to the left to the first column to the left, and then move our first sidebar from the first column over to the third column. I’m going to hit save, and jump over to the terminal just to make sure, yup, there it overwrote the CSS file. Let’s jump back over to here and hit reload. Live demos always make me sweat. Hey, it worked. (Laughs)
Our content is now on the left and our sidebar is on the right. Like I said, the actual layout, if you look at this main is basically the wrapper that we’re using, the container, and here is the source order. Our content comes first and then here’s the first sidebar, it comes after the content. We were able to rearrange things using Zen Grids, using really, really simple syntax. You can’t get much simpler than just changing the column number that you want it to go in.
There are more wonderful things that you can run … One thing I would say is that on each of your media queries you’ll be wanting to change the Zen column count inside each one of those media queries because you’re going to naturally want more columns available to use for doing layouts as the viewport is larger. Down here even the larger 960 and above media query, we’re setting it to five columns wide so then we’re now some things using five columns because we’re kind of, 1, 2, 3, 4, 5 from the left side. That is basically it.
There is a lot of really awesome things above Zen Grids that I haven’t talked about because simply don’t have enough time, but I want to thank you so much and I’d love to open up to the questions.
Speaker 1: Hi John, thank you very much for the presentation. We do have a couple of questions. The first one is from Derrick Alexander, “Is there any advice you can give to theme upgrading a theme from using a previous version of Zen as a base theme, so using Zen product as a base theme or is it best to treat this is a brand new theme?”
John: Yes, every time there’s a major update of Zen within that major version I try to only do bug fixes and small changes because I don’t want to break the site. When I do a knew major version, that’s when I need to improve the best practices and keep them up to date.
Upgrading from one major version to another major version is a big change, and I would say that there’s basically … There’s two sort of used cases. One, you have an existing site, they’re already on Drupal seven, say they’re using Zen 7.x -3.0 as their base theme. If you’re using that as you’re base theme, there’s really no reason why you need to upgrade to Zen 5. If your theme works great now, I would recommend not upgrading to Zen 5. Zen 3 will continue to be supported, just keep using Zen 3.
If on the other hand the theme that you’re wanting to upgrade, you need to re-write it to be a new responsive site, like wasn’t previously responsive, then yes, you’re basically already going to be doing a re-write so I would say you kind of have to tackle that as a re-write. There’s not an easy way to do that because making your site responsive requires a sort of a rewrite of your content strategy and thinking about your layouts and your design all over again anyway, and upgrading the Zen projects as part of that process.
Speaker 1: William Robinson asks, “Can I use this Zen on HTML 5 with Open Atrium?”
John: With Open Atrium, I haven’t been following Open Atrium. As long as Open Atrium has been upgraded to Drupal 7, then I don’t see why you can’t use Zen files with Open Atrium. The thing of course that I would point out is that Zen basically has, as you saw from when I was doing screen training, it has really no design of itself. It has the minimum CSS that you need for any site. No one says you have to go through and make … undo filing, just to add your own filing. It has all sorts of styles, so yes, you can create your own sub-theme for Open Atrium. I would recommend using Zen but raw the basing is all by itself with any side actually.
Speaker 1: Randy Fill asks if you are able to contrast the Zen and Omega theme.
John: Sure. Omega theme, they have decided to sort of fully embrace the theme settings that are available with Drupal 6 and Drupal 7. You can basically configure your layout and your breakpoints within the settings page. That makes building those layouts really easy.
The reason why Zen doesn’t build that way is because we feel like when you’re building layouts it’s really … your crafting it for your specific design. Zen Grids makes it really easy, just using Sass, to write some simple Sass lines using the Zen Grids to make and create really customized wonderful layouts. You’re getting your hands dirty a little more working within Sass and CSS, and really that’s going to provide the most optimized experience for your end-users because they’re not relying on PHP settings and conditionally doing certain things depending on PHP because you’ve written very specific CSS, very optimized CSS that this is loaded all the time, the media queries. I would say that’s the biggest difference.
I haven’t investigated Omega theme super thoroughly, so I don’t want to mischaracterize anything that I don’t quite understand about it. I’m going to remain silent, yes. I think there might be even some Java script to change class names, depending on the media width, but I’m not certain. Let me just say I’m not sure if Omega does this, but there are some people who use JS and are good chain selectors, CSS class names in order to alter the layout depending on the viewport width. I think using JS to do layout is a bad idea because CSS already does layout. Why are you adding a dependency on Java script in order to do layouts?
Speaker 1: Randy would also like to know, “Can we use Zen Grids with old Drupal themes?”
John: Yes, absolutely. Like I said, they’re completely separate projects. You can use Zen Grids … You don’t even have to use it within Drupal. The zengrids.com on site is just plain HTML. There’s no CMS on it at all. Then just using Zen Grids to generate the layout CSS, but you can … When you’re using Sass and Compass, there’s not even anything special you have to do within the theme. You just have to have the .info file load, the CSS files like normal. You’re under the development environment, your laptop whatever, you’re saving, you’re writing your Sass and it’s automatically generating the CSS. The Drupal theme only knows about the generated CSS because in the .info file you’re pointing at generating the CSS, so you can decide on anything.
I would say that definitely take a look at the config.rb file that comes with Zen’s starter kit, because there’s some really handy things in there. You can just sort of copy that one file and use them in whatever theme you want if it doesn’t have it on the config.rb file.
Speaker 1: Brent would like to know which Sass utility you use.
John: I’m sorry, which what do I use?
Speaker 1: Sass utility?
John: I have Compass watch, it’s a great utility for generating your Sass. Sass has its own utility use just like Sass-- watch and then it’s this really long command line and we have to type a set and the source/folder is where the destination pieces holder is. There’s a whole bunch of like options and plugs. I had the Sass utility, which really makes it a pain to use.
Compass watch is, meaning that’s the only thing that you have to type, Compass watch, that’s it. You just do it within the root of your sub-theme, and it’ll read all those flags and options from the config.rb file, so you’d basically have like a .info file but it’s for Sass options and sort of read all those configuration things inside the config.rb file. You only have set Compass watch after no one add those special command and it’ll generate CSS for using Sass.
I have been using Fire app for about a month now. I just set up with general site and I forgot to check Fire app using it. I know why, it has a long, yeah, I forgot write before I rename the directory where the demo was stored and I forgot the update Fire app to tell the new location outside there and it was time to look in the wrong spot completely. Then that was my fault because I’ve been using Fire app and that was great. You just have to start the app and then it becomes a utility inside your menu bar and in Mac OSX and Windows, Google or something and it works well, it works great.
Speaker 1: Okay, great. Matthew Olivera would like to know, “Do you add base .scss and that generates CSS files, do you actually report a check?”
John: Yes. Absolutely, using a source control like this is really essential for any sort of development work that you do. At the counter yes, we definitely add our .scss files to Git. Then we also add the generated CSS files to Git as well. We’re writing both of those files into Git and when we’re lucky enough to deploy on production sites using Git that’s really handy because of the CSS and then to Git and then it just deploys CSS and Google will happily think of the word with .scss files that are just sitting there.
Speaker 1: Paul would like to know, you said recommend to have the Sass translated on the development machine. Are there any security issues or is it just for keeping the services of the template as possible?
John: There’s really, especially if you’re using Git, there’s no reason why you need to have Sass and Compass and all that installed on your server. You want to make your server as simple as possible absolutely. I would recommend not running or running as few themes on your server as possible because that means you have more CPU cycles, available to touch you, or whatever you have from the web server.
Use MAMP or whatever to develop locally. I have like a copy of the database for your Drupal site and just work locally. It’s much faster development too because you’re not having to constantly … when I first started doing websites I would edit my CSS and then I would upload them to the server and then wait for it to finish transferring with either FTP and then reload them in my browser and that’s just a really painful process and very slow where I think we should develop locally, it’s much faster, so that’s why I like to use Sass and Compass locally.
Speaker 1: Paul would like to know, “What is your opinion on the Sass module and where do you think it would be best to use?”
John: The Sassy modules … I actually feel like there’s no reason at all why this module should exist. (laughs) Literally, if you’re using Sass as a development tool, Sass is already generating the CSS for you and you’re just pointing your theme at CSS files. Why do you have to have Drupal involved at all in Sass?
Some of these modules, I think there’s two or three of them. Some of them actually have a PHP version of Sass that generates the Sass and the CSS and there’s just no way to keep featured paired the app with the official version of Sass, which is written in Ruby.
I just think it’s not a good idea, both from an adding an unneeded burden to your Drupal site as well as you’re going to end up having a slightly out of date version of Sass. I don’t even know how Compass works with it because like I said it’s a library of pre-defined Mixins. I’m not sure how that integrates with those Sass modules as well. My personal opinion is don’t use them.
Speaker 1: Lars would like to know, “Is Zen compatible with Ubercart E-Commerce?”
John: Absolutely, yes. They reviewed from reports that I'v seen where they’re complaining about it not being compatible with other modules.
Speaker 1: Okay, sure. Marvin would like to know Omega seems like and … Sorry, let me repeat this question again. Brent would like to know, “We have had our Comp done, what is the roadmap for taking the Compass and incorporating Zen files and Zen Grids?”
John: I think I missed some other words, can you repeat the question?
Speaker 1 : What is the roadmap for taking the Comp and incorporating Zen files and Zen Grids?
John: As you have designed Compass you should take a look and see hopefully, they design it to a grid and then just turn in what the prompt count is inside the comp, figure out what the gutter would need to be and then just start writing the Sass, and the setting of the appropriate variables and then basically you need to take the comps and create many wireframes due to sort of to hand all and with your columns and the different blocks and start just taking them inside the grid, the flow of grid that you created.
I actually just about a week and a half ago created a worksheet which has a bunch of different column layout in it like there’s a one column layout on the left, or I should say one column grid on then like three columns and then five columns and seven columns, inside a single sheet and that’s like sketched out on this paper just like printing out a worksheet, and it’s getting hard when I arranged my blocks and then of course it has the numbers on the worksheet so then I can just starts plugging it eventually. Yes, that’s for the actual Sass files and the Zen Grids.
Speaker 1: Cory would like to know, “Does Zen Grids provide any tools to dealing with images responsibly other than sprite?”
John: Does Zen Grids provide any use of these for responsive images? No. Zen Grids is purely about creating layouts. You’ll notice that it actually doesn’t have any special things to deal with media queries either. When I created Zen Grids that I could tell that I felt like there is something in Sass that you can write to manage media queries and I couldn’t quite figure out what it was at the time, but it was also how the scope of what I wanted to do which was to go with the layouts so the Zen Grids was only dealing with layouts.
There’s a new Compass library created by this tech, people coding designer and it created a Sass library called “great ones” and that deals with managing your breaking frames and managing your media queries, and I like to look at that. I haven’t got the chance to use it yet.
One of the nice things about Compass is that you can fix the libraries that you want to use and mix it together for the best features set for you. However, getting back to images, the Zen themes does have CSS in there to deal with making sure that your image is resize to fit inside your flow of grid, there’s just a future lines of CSS that you need and that’s already included with the Zen.
If you want to handle physically resizing the images and voting different side files depending on the viewport there are modules which can deal with that and that I would recommend take a look at this with … there’s a few of them that are getting some of the best feature setting now.
That’s something that we simply can’t do within the email because it has to go with Drupal 7 image now. The answer is yes and no. Some of it is already with Zen and some of it, it can’t be.
Speaker 1: Okay, great. I think that’s all we’ve got time for intensive questions. If you have any separate questions that you think has to take you can get in contact with us. I’d like to thank John and Dana for presenting. Again, the slides that you pick is the slideshow and the recorded webinar will be based on acquia.com in the next 48 hours. Thank you for joining, we hope to see you next time, bye.
John: Thank you everybody, bye.