Living Styleguide Solutions

[HipsterBrown]

I would like to set up the design contribution workflow with a living styleguide, i.e. Pattern Lab, with easily reusable components for use and reference in the project. I have seen several workflows that use grunt, gulp, or some other front-end build tool to dynamically build the guide. I would like to make it as simple as possible to setup, run, and contribute changes. If you have seen any good solutions, please comment below.

This guide could live in a Design branch to separate contribution concerns, thoughts on this are also welcome.

[jbrooksuk]

We're using Gulp already for Elixir, so that'd be great.

[HipsterBrown]

Alright so +1 for Gulp so far. What kind of templating system are you using now, so we could have easy to copy snippets in the same style?

[jbrooksuk]

Our current setup is just Bootstrap 3.3.1 and then we use Blade (Laravel templating), with no re-usable components as such.

[HipsterBrown]

Ok cool. The basic plan is to make a mini-bootstrap style framework for the project, to keep the front-end code slim and DRY. Basic principles of this technique are described here.

I will look into some Gulp-Blade rendering plugins for use in the styleguide build process.

[jbrooksuk]

Also Elixir (Gulp) takes care of SCSS compiling for us too.

[HipsterBrown]

Great. I'm glad there is a decision on CSS preprocessing as well.

How do you feel about a separate Design branch of the project? I was thinking about using the gh-pages branch for easy visual testing through the repo.

[jbrooksuk]

I'm happy with that.

[HipsterBrown]

Awesome! 👍

I found this gulp-blade plugin for reference later.

[jbrooksuk]

@HipsterBrown could you move this issue into the cachet-ui repo?

[jbrooksuk]

This issue was moved to cachethq/ui#1