{"id":2178,"date":"2015-09-24T11:39:38","date_gmt":"2015-09-24T10:39:38","guid":{"rendered":"https:\/\/blogs.kent.ac.uk\/webdev\/?p=2178"},"modified":"2015-10-01T09:40:18","modified_gmt":"2015-10-01T08:40:18","slug":"building-and-hosting-a-pattern-library-on-github","status":"publish","type":"post","link":"https:\/\/blogs.kent.ac.uk\/webdev\/2015\/09\/24\/building-and-hosting-a-pattern-library-on-github\/","title":{"rendered":"Building and hosting a pattern library on github"},"content":{"rendered":"

I built a pattern library for a project I\u2019m working on<\/a> which would help developers (and me) build web pages in a consistent way, and in keeping with the University style and brand.<\/p>\n

Pattern libraries should be evolving things. As design features evolve and bugs get fixed so the pattern library needs to change too.<\/p>\n

I didn\u2019t want a series of static files which have to be updated separately from the code. I wanted a dynamic pattern library, where changes to the code get reflected directly in the library.<\/p>\n

Hologram<\/h2>\n

There are various tools for building a living pattern library, but I settled on hologram<\/a> because of its ease of implementation and use.<\/p>\n

Hologram takes inline documentation in your css\/less\/sass files and uses that to build html files for a static\u00a0pattern library. So not only do you end up with great inline documentation for developers, but you don\u2019t have to do anything extra to build your web-based pattern library.<\/p>\n

Even better it integrates easily into things like\u00a0grunt<\/a> so your pattern library gets updated every time you make a change to a file.<\/p>\n

Github<\/h2>\n

So, you have your static pattern library files sitting there on your laptop. Now what?<\/p>\n

Well, of course you could copy them to a webserver and you’re\u00a0done. But this is an extra step to remember to do, and as we all know web developers are a lazy bunch and love automation.<\/p>\n

I found a really simple way of getting your pattern library on the web is to use github pages<\/a>. In itself this is just another hosting option, but the great thing about github pages is that you can publish by pushing changes up to your repository.<\/p>\n

In my case I was using a project site, which meant using a branch called gh-pages<\/em>.<\/p>\n

Submodules<\/h2>\n

The simplest way of combining committing your source code and publishing to github pages in one go is to make the gh-pages branch a submodule.<\/p>\n

That way you can tell Hologram to publish its pattern library to your gh-pages folder (a submodule). When you make code changes, commit them to your develop branch, and then push them. You can then\u00a0update your submodule and push those up too.<\/p>\n

Now you have your code updated in github, and your hologram-generated content pushed up to your gh-pages branch in one fell swoop.<\/p>\n

How to do it<\/h2>\n

Assuming you are in your develop or master branch, you need to make a new empty branch called gh-pages…<\/p>\n

git checkout \u2013orphan gh-pages<\/code><\/p>\n

Now switch back to your develop branch and add a submodule from the gh-pages branch…<\/p>\n

git submodule add -b gh-pages [your-github-repository-url] pattern-library<\/code><\/p>\n

This also creates a new folder in your codebase, into which Hologram can put its pattern library html files.<\/p>\n

Now commit and push the submodule changes in the normal way.<\/p>\n

When you make changes to the codebase and commit them, git will warn you that you need to also commit changes to the gh-pages branch. When you commit the gh-pages they will update automatically on your github page, usually after a minute or two.<\/p>\n","protected":false},"excerpt":{"rendered":"

I built a pattern library for a project I\u2019m working on which would help developers (and me) build web pages in a consistent way, and in keeping with the University style and brand.<\/p>\n

Pattern libraries should be evolving things. As design features evolve and bugs get fixed so the pattern library needs to change too.<\/p>\n

I didn\u2019t want a series of static files which have to be updated separately from the code. I wanted a dynamic pattern library, where changes to the code get reflected directly in the library.<\/p>\n","protected":false},"author":2,"featured_media":2180,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[79410,1464,79395,79436],"tags":[521,9017,79456,79455,79457,79392],"_links":{"self":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/2178"}],"collection":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/comments?post=2178"}],"version-history":[{"count":3,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/2178\/revisions"}],"predecessor-version":[{"id":2182,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/2178\/revisions\/2182"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/media\/2180"}],"wp:attachment":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/media?parent=2178"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/categories?post=2178"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/tags?post=2178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}