Launching Pure

I’ve been working on Pure for the last few months. Check out the site for details, and view the code on Github. In fact, we open sourced the Pure website too (it’s built using Pure, how meta!).

The need for Pure

When designing websites today, we have a few options when it comes to CSS.

1. We can include a “Base” such as Normalize.css, or a Reset, and write all our website CSS from scratch. This gives us control, but we have to manage cross-browser issues, and re-write common styles. This option doesn’t let us focus on our site’s design.
2. We can use a CSS Framework like Bootstrap, or Foundation. This provides a set of styles to make things look good, but it has cons too. Firstly, they’re quite heavy. Bootstrap has over 90KB of CSS, while Foundation is over 70KB. When you write your site’s styles on top of this, your CSS gets even bigger. Even if you use a sub-section of these libraries, you’re still pulling in styles that you don’t need. This is a problem for mobile devices with slow data connections. Due to the nature of these frameworks, it’s hard to over-write CSS styles. Don’t want text-shadows and box-shadows? You have to add text-shadow: none; everywhere.

Compare this to Pure. With Pure, all you do is include one file on your page that is less than 5KB in size. It takes care of adding minimal styles to all the common elements that every webpage needs:

• A base built on Normalize.css
• Responsive Grids
• Buttons styled consistently across browsers
• Aligning forms
• Tables styles
• Horizontal, vertical, and drop-down menus
• Common layouts
• Responsive by default (with a non-responsive option if needed)

After including Pure, you can write your custom styles on top of it. Pure lets you:

• Greatly reduce the CSS required on your website.
• Make your website easier to customize, and not look cookie-cutter.
• Use your favorite CSS Framework on top of it. You can still use Bootstrap for modals, tabview, etc. Just leave the foundational CSS to Pure.
• Use your favorite JavaScript library (jQuery, YUI, or whatever else you want).

Here’s a short slide-deck that I presented at CSSConf:

Response

The response from developers has been great. In just over a day, Pure has over 1500 stars on Github, and was on the Hacker News front-page for 24 hours, garnering over 380 upvotes. I’m really excited to build this out with the community, and to see where it goes.

Contribute

If you want to get involved with Pure, now is a great time. The project is young, and we’re still figuring out where we can take it. File a pull request, start a new discussion, or file an issue, so that we can improve the project. You can do this all from the Github repo.