Master ring

Meta side projects

For a long time I have let my side projects grow organically and a lot of times it didn’t do them any good. Debugging existing site through developer tools and then adding custom styles in the WordPress editor to the end of CSS file is a hole from which a theme will never  properly recover. There has to be a better way, meta side project to create front-end style guides for all of them.

Couple of weeks ago I have started making a meta side project where all design information about my side projects would be gathered. At the beginning I made a decision to make it public on github so you can take a look at it, learn from it and comment on it. At the moment I am working on SarahGebauer.com front-end style guide and currently it is stuck in alpha version. Before it’ll be called at least beta it’ll have to be compatible with WordPress styles.

The main piece of technology which binds everything together is gulp. The choice to use gulp was influenced by it’s pipe architecture, something I love, and a curiosity, at my day job I use WebPack.

As a first thing I had to throw away the idea that I could create just one main task. But that wouldn’t work mostly because one set of Sass stylesheets takes some time to compile, four or five of them being recompiled when a small change occurs in one of them isn’t justifiable. So currently I have two main-ish gulp tasks, each with one subtask:

The subtask, sarahgebauer-sass , performs compilation of Sass files to one CSS file. While the main task watches files for changes and when necessary updates CSS file and refreshes browser. The decision to use browserSync was made through the way of the least resistance because incorporating MAMP would require a bit more work and instant refresh is a nice feature.

In the next post from this series I’ll write how I made it.

Also on: