The simple and speedy way to build bulletproof websites

Bulletproof web design Sparkl combines Meaningful Markup, Bulletproof CSS and Unobtrusive JavaScript into one easy to use web development framework. Sparkl makes it simple to create bulletproof websites that are accessible, flexible and conform to web standards.

Features:

  • Flexible Layouts

    Sparkl's layout modules make it easy to create grid or 3 column layouts with the content in any order. These layouts are flexible - resistant to changes in the text size and browser window size. Try changing the window size and text size on this page and it will flex to fit in all but the most extreme cases.

  • Semantically structured html

    Commented code. Standard naming conventions (class names, ids and image names). Valid xhtml 1.0 strict and CSS

  • Organised Code

    Sparkl uses a modular structure, making it easy to use what you need and leave out what you don't. Reset stylesheet to set all styles to a baseline. Tabbed navigation, image-replacement and tables can be created by simply changing a class name or including the relevant module. Internet Explorer specific stylesheet that target specific versions. The modular structure of Sparkl makes it easy to organise your styles.

    Folder structure to keep files organisedCSS delclarations in alphabetical order

  • Themes

    There is a theme package containing a number of themes that will transform the look and feel of a site instantly. It's also really easy to create your own themes based on Sparkl's core modules.

What are you waiting for?

Download now

If you want to try Sparkl out, all you need to do is download it and then have a read of the Getting Started wiki page. More documentation can be found at the sparkl wiki. Help and discussion is also available on the Sparkl Google Groups Page.

Sparkl is completely free and open source. You can use it however you want, but please consider contributing to the project.

Download

Download the framework from google code.

Find out more about Sparkl on its google code page.

The source code can be seen in the project's subversion repository.

News

6 April 2008 - Version 0.4 Akihabara Released!

The main aim of this release was to iron out all of the bugs and make everything work the way it should on as many browsers as possible. Getting it to work in Internet Explorer 6 took a lot of time, hacks and patience, but it now works almost as well as the other browsers. Another aim for this release was to get each module fully documented. I settled on a common style for each wiki page that will hopefully make them easy to use. They are by no means finished and I intend to develop them further in the future, as well as adding lots more links for furter reading. My aim is for the sparkl wiki to be a useful resource for web development.

There are also some new modules in this release. The images module that gives some nice classes for flexible images that will float in the text and span half or the full width of their container. There is a code module for styling code examples. This only has classes for html at the moment, but could be expanded in the future to include lots of other languages. The links module provides some basic baseline styling for links. The tables module just made it into the last release, but has had a lot of work put into using the most accessible and semantic html. The grids module has also undergone a lot of changes and now has automatic gutters and different, more semantic class names. There is now a vanilla page that demonstrates all of the different modules using a simple, grey theme.

Neil has been busy developing the core Javascript library that should make cross-browser Javascript coding much easier, especially common tasks such as setting cookies and DOM methods. He has also produced some excellent documentation on how to use it. The next release will hopefully have more examples of the Javascript library being utilised.

The next release will also start to incorporate microformats and the Sparkl site will get a bit of a makeover. I'm also working on producing a tutorial in building a page from scratch using Sparkl and hope that more and more themes get developed. Now that Sparkl works, it's time to get it looking better.

Browser Support

Sparkl currently works in the following browsers:

  • Firefox 2
  • Internet Explorer 7
  • Safari for Windows 3
  • Opera 9.26
  • Internet Explorer 6

Current Modules:

Upcoming Modules:

  • Forms
  • Quotes
  • Microformats
  • Print Stylesheet
  • Handheld Devices

Books

The following books have inspired and helped the development of the Sparkl CSS Framework: