Journal

29 March 2010

Markup Library

An open source library of markup languages, including XML, HTML and XSLT to develop a resource of markup and user interface design patterns that adhere to a generally accepted set of code standards.

Ever since I discovered the CSS Zen Garden, I have wondered whether this experiment could be extended to the complete markup required to maintain a complex site. As a front end designer, my work sometimes ends with the design of a Photoshop file. For more complex sites, my role involves assessing the content, developing a model of the site architecture, and creating the markup to describe the content in order to build interactive prototypes of the site.

Several CSS frameworks, such as Blueprint CSS and the 960 Grid System, provide consistent methods to build grid-based HTML layouts. I took inspiration from the 960 Grid System to create the Fluid 960 Grid System. The idea was to build commonly used markup patterns that could be easily integrated into any layout. It was my first opportunity to experiment with JavaScript libraries to add common user interface enhancements. While people have been waiting for me to add IE6 support to the framework, I’ve been wondering how to create a similar grid system that uses more semantic classes and IDs. In the meantime, I’ve discovered OOCSS, and I’ve adapted my own versions of this approach. Content types are being developed, but not fast enough for the projects that I have been working on. So, I’ve been creating these content types as I go.

Sites such as UI Patterns and Pattern Tap provide visual galleries of solutions to user interface design problems, but I am uneasy about using these sources, since I don’t want to plagiarize others’ ideas. Nathan Smith is curating the Design Patterns Library & Code Standards of Fellowship Technologies and has offered his code standards for reuse.

What I’m still looking for is a standard library of common markup patterns. I made a quick search for a markup library and came up empty. In fact, markuplibrary.com and markuplibrary.org were available domains. So, I registered them.

One could argue that the web is already a markup library. But lifting sites wholesale would be morally and ethically repugnant. I need an open source library of markup that goes far beyond the requirements of the typical blog or brochure site. So, I give you the Markup Library:

The goals of the Markup Library are to stimulate worldwide development of collaborative web development libraries, to support the web development efforts of all citizens of the web, and to provide a free and open framework in which markup may be shared and improved in partnership with others.

The Markup Library allows the markup to be used, studied, modified and redistributed freely. The Markup Library is being released under the MIT, GPL licenses and can be downloaded or cloned from the GitHub repository.

I have created a Git repository of the site that anyone can fork on GitHub, add their contributions and send a pull request to include the additions in the master repository. Everyone can have the same core library to use for their web development. This can include Git submodules that point to commonly used CSS frameworks. Open source fonts such as The League of Moveable Type are now available to be downloaded and used in sites to serve fonts to web browsers that support the @font-face directive. These could potentially be added as a submodule.

We’ll need some standards to adhere to as we build the library. There will likely be some discussion about web standards, best practices, coding conventions, formatting preferences and open source licenses. But there will also be opportunities to discuss and explore the latest developments in HTML5 and the like. Consider this the repository of the collective consciousness of the web. At least, that’s what I hope this can become.

Free code built the web. Let’s keep things free.