Primer is GitHub’s internal styleguide and css toolkit. It is used as a way to share buttons, forms, grids, tooltips and more with all the internal and external properties of GitHub. For example Gist, Enterprise and GitHub.com.
We recently open sourced Primer, because we wanted to be transparent with our styleguide and if anyone could get any use out of it we would like to share. The toolkit isn’t meant to be a full fledged CSS framework like Bootstrap.
Lets build a toolkit
I’ve been copying and pasting the stylesheets from github/github for new gist.
In 2012 it started becoming more apparent that we needed a toolkit that we could share between our other github properties. Until that year gist was and always had been a separate rails app combined with github.com.
Gist shared everything with github, because it lived in the same codebase. We were working on a big initiative to upgrade the whole app and separate it into it’s own codebase.
During the process I was talking with the designer/developer working on the front-end, and we were tossing around the idea of building something to make it easier to share common styles (buttons, forms, text, syntax) between the properties. “How have you been using the styles?” I said. “I’ve been copying and pasting the stylesheets from github/github for new gist.” o_O “Ok, I’m going to create a repo tomorrow, lets start sharing stuff.”
Lets open source it
Primer went through a few iterations. It started as a rails gem, because bower.js wasn’t fully realized at the time. It wasn’t until recently that the work was beginning to look clean polished and ready for others to read and use.
A lot of what primer is today, is due to the hard work @mdo has been putting into it. He got us ready to release it.
Check out the source code or browse through the docs on GitHub.