Skip to content

Instantly share code, notes, and snippets.

@bewest

bewest/transforming_style_guide.markdown

Last active December 20, 2015 03:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bewest/6067525 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bewest/6067525 to your computer and use it in GitHub Desktop.
Download ZIP
smart style guide? transforming a style guide in predictable ways
Raw
transforming_style_guide.markdown

what is a style guide

A style guide is a suite of documents both demonstrating and implementing standard look and feel. Here's a nice one: https://github.com/styleguide/css/2.0

Basic idea is that each UI component in an application is known ahead of time, and this is kind of a working inventory of available components, often organized by category.

These pages are often designed to show implement just enough of the style guide to adhere to the standard, while demonstrating in isolation how a particular widget works. This makes them an excellent place for developing new UI components/widgets, and for testing them.

what is a smart style guide

I just made up that term, it's blather, and you should ignore it. Most websites, from page to page are mostly similar. So the idea is that it might be easier to create a set of scripts that weave together the right components from the right parts of the style guide to ensure that a page is well formed.

Here's a few specific examples:

So this implies that you can use something like brunch.io or jekyll or docpad or something to work on features and widgets, each on their own dedicated page, along with a couple of main views that include the right things in the right places.

Then, in a proxy server, the server can implement a mapping between views, and the data sources needed to transform bits of the page. For example, if the page has a microformat for a logged in person, under a .currentProfile, then the server can automatically fill in the DOM nodes for that bit of DOM by requesting data from the mapped data source, eg perhaps /api/whoami.

libraries

based on node-trumpet

based on node-cornet

So to make a styleguide "smart" you need to assemble the final view for the end user by mapping some (proxied) data source via something like trumpet. This can be automated to some degree, assuming you have a nice set of mappings between css selectors and data providers, and by mapping them back into the page at the right place.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment