Nicolas Gallagher recently posted a brilliant article, Mobile first CSS and getting Sass to help with legacy IE, in which he suggests using a pre-processor to produce two versions of compiled CSS from the same core code. He is basically extending Jeremy Keith’s Windows mobile media queries method.

Using Ant as pre-processor

Inspired by Nicolas’ article, I’ve adapted the Ant build script that I use in my One Web Boilerplate, to do the same kind of file pre-processing on the server side when doing a build. This enables you to work on the same stylesheets when developing, and then generate two versions, to serve legacy IE browsers a desktop layout, while more capable browser get the enhanced version with Media Queries.

Ant ReplaceRegExp task

Before minifying the files, the script inlines all @import-ed styles and then turns Media Queries into comments wherever it sees /*replace*/, like so:

/*replace*/@media only screen and (min-width: 30em) {/*replace*/
/*Styles*/
}/*replace*/

For IE-specific stylesheet, this is changed like below and then minified:

/*@media only screen and (min-width: 30em) {*/
/*Styles*/
/*}*/

Modern browsers get the minified version with Media Queries in place.

I could have of course used Sass, but since my framework already uses Ant, and since I want to keep it generic, I didn’t want to add any other external dependencies to it. Also, I’ve written earlier about how Apache Ant can help you building and optimizing frontend code so I know how incredibly useful Ant can be for code deployment.

See it on GitHub

See the One Web Boilerplate README on GitHub for info on how it works! Decoupling your layout CSS rules from the actual Media Queries during build time can greatly improve your workflow and help managing your code.

Modular build framework

So, with all that in mind, I’ve put together a One Web Frontend Boilerplate, a modular framework for building responsive (mobile first) websites with Apache ssi. It’s still a work in progress, but stable enough to be used in real-world projects (it has been used already!).

It draws code from many other projects, combining best practices and various solutions into a custom frontend build framework. Think of Responsive web design, HTML5 Boilerplate, Mobile Boilerplate and 320 and up merged together, with code being written once and run anywhere on your pages with Apache ssi.

Apache Ant build script

The project also includes Ant build script with the following tasks:

• Check JavaScript and CSS code quality,
• Optimize CSS, JavaScript and HTML files,
• Use RegEx to swap the CSS and JavaScript references in HTML header and footer during the build, to link to optimized assets instead of individual ones used during development,
• Merge ssi into single web pages (changing .shtml file extensions to .html),
• Generate JSDoc documentation,
• Optimize PNG and JPG images (public target, not included in default build),
• Create a new directory where all the optimised assets and markup are placed for deployment.

More info is available in the project README file. The framework can easily be plugged into Continuous Integration solutions, such as Jenkins, to handle the deployment process after a successful Ant build.

Check out the One Web Boilerplate on GitHub. And remember to check the Credits section too. I hope you’ll find the framework useful in managing your source code and deployment process, while increasing productivity in large and small web teams.

If you have any thoughts or suggestions on how to make the framework better I’d love to hear them.

UPDATE 20 November, 2011

Included my GitHub fork of Jeremy Keith’s Pattern Primer, to include common markup snippets (or atomic units of content as Jeremy calls them). The idea is to build elements from the content out, outside any layout context and external dependencies.

My goal was to target smartphones, tablets, netbooks and desktops with the same codebase by responsively enhancing the site with CSS3 Media Queries and some JavaScript. All users get reset, typography and colour declarations. Width and float declarations are added only if larger viewport is detected, using four resolution breakpoints.

All elements are aligned to a fluid 8-column symmetrical grid structure. All font sizes are defined in ems, according to the traditional typographic scale (8-9-10-11-12-14-16-18-21-24-36 etc.). I’ve also made an effort to maintain a consistent baseline even if element font size decreases or increases.

Finally, some extra nice-to-have (but not core) content is lazy loaded with JavaScript. This means that you’ll see Platform info, Credits and Elsewhere content only if you have JavaScript enabled and your viewport is larger than 48em/768px.

What about Internet Explorer? I thought you’d ask that. Internet Explorer lower than 9 get Andy Clarke‘s excellent Universal IE6 stylesheet. You see, on this site I can’t be bothered to patch dead browsers (at work I do though). Also, if you have JavaScript enabled in IE lower than 9, you’ll be prompted to install Chrome Frame. Done.

For icons, I’m using Vector social media icons. I’m using ARIA landmark roles for styling, referenced with CSS attribute selectors. Another solution I’m using here is Sticky footer. It works nicely.

I was also planning for switching the display of content and navigation based on browser size but that’ll have to wait until the next design iteration of this site.

Here are some of the articles and frameworks published during the last year or so that inspired this redesign:

• Boilerplates: HTML5 boilerplate, HTML5 mobile boilerplate, 320 and Up
• CSS3 Media Queries: Hardboiled CSS3 Media Queries, Revisit Hardboiled CSS3 Media Queries, CSS Media Queries & Using Available Space, Combining media queries and JavaScript, Rethinking the Mobile Web, CSS Media Query for Mobile is Fool’s Gold, Using Media Queries in the Real World
• Trigger media queries with ems rather than pixels: Responsive enhancement
• Document outlines and semantics: HTML5 document outline revisited, Semantic boilerplate
• JavaScript should not be relied on for layout: Using HTML5 semantic elements today, HTML5 Right Here, Right Now
• Responsive images: Fluid images
• Use IDs only for internal links and document fragments, not for styling: Don’t use IDs in CSS selectors?
• Microformats: hAtom 0.1 microformat

There are still some tweaks to be done but I figured the theme was ready to be put online. This is the fifth version of this site. The previous version was online from November 2009 until September 2011.

Any comments? Drop me a line.