Yesterday, I was super excited to launch Pure at CSSConf. Pure is a set of small, responsive CSS modules that you can use in every web project.

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.

pure-hacker-news

pure-github

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.

7 Comments

Cancel

  1. thanks man this is amazing css library for me

  2. Jake Love

    Great framework so far! There’s just one issue with Chrome however. I sent you an email detailing everything. The jist is that it works great on all browsers but Chrome is making one of my columns jump to the next line when it should be side by side. Not sure how long the example will be up, but you can see the issue via http://programmingedge.com/entercom-digital-test/.

    Please let me know of a fix or any possible solution to this at your earliest convenience. Thanks for the awesome framework!

    Jake

  3. Jake Love

    Looks like this has to do with font selection. Will this ever be corrected to work with any font? Right now I see issues with Tahoma, Arial Black, Verdana, and Trebuchet MS.

    Do you have an easy work around?

  4. Angelo

    pure css is fantastic, the thing I love is that its simple and light,many thanks great work,hope you project will grow,thanks