Recently, I also forked Jeremy Keith’s Pattern Primer where the idea is to style reusable content snippets outside of any layout context. With Accessible Patterns, the idea is to build and maintain a library of accessible ARIA widgets, with only minimal styling. I’m taking ideas from other plugins (see credits information) but also adding new features. I hope you find the patterns useful. There’s always room for improvement, so feel free to suggest changes and additions!

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.