Generating styled markup from a folder of markup snippets
Switch branches/tags
Nothing to show
Pull request Compare This branch is 4 commits ahead, 7 commits behind adactio:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


This is a fork from the fabulous Jeremy Keith's Pattern Primer code at He's written about it on his blog at

I prefer to have CSS in separate files so I can more quicky find what it is I want to change, or read down the code itself as a to-do list of what I need to change. I also prefer to separate the CSS that should be used on all sites (bug fixes, resets, best practices) from the CSS that will definitely be different from project to project (colors, fonts, borders/no borders). That way I won't hurt the always-used code while ripping up the always-changed code. And I don't have to see it, think about it, or have it clutter up what I'm doing. So I've separated things.

And I've used SASS. Perhaps later I'll Sassify this more — nesting, using variables, making the separate stylesheets into partials ( so that they compile into one CSS file. Maybe. This is good for now.

Really I am putting this up on github for myself, so I can use it again later. Maybe it will be helpful to someone else as something to take a look at. I don't plan to make a big deal out of this. I want to try it out first and see how this kind of tool works in my own practice. If I find it useful, then I'll likely add in more best practices from other places, and relaunch this as a separate github project. For now, it's just a fork of Jeremy's work.

(And yes, it's very bad to have a bunch of separate CSS files for a live website — more http requests results in a slower site. But (A) this isn't code for a live website, this is design code. (B) Many of us use tools like Drupal or SASS where development CSS gets compressed into one stylesheet before going live. So we don't have to worry about overdoing the number of http requests while developing either. And after many years of working in the Drupal world, I've realized I much prefer to have ten stylesheets with a couple hundred lines of code in each one than one stylesheet with thousands of lines of code. It's much more manageable for a whole bunch of reasons, including that it's easier to keep version control happy. As long as the running production CSS is mashed together in one file, you are fine.)

Jeremy Keith wrote about this:

Create little snippets of markup and save them to the "patterns folder." The pattern primer will generate a list of all the patterns in that folder. You will see the pattern rendered as HTML. You will also get the source displayed in a textarea.

You should be able to take the whole "pattern-primer" folder and drop it into your own project (assuming you're running PHP) BUT make sure to update the link element in the head of pattern-primer/index.php to point to your own CSS.