Introducing “daisy” a sass/pattern-lab workflow solution using Vagrant

daisy-vagrant

I have been a big fan of Brad Frost and Dave Olsen‘s project, Pattern Lab.

Anyone that knows me heard me say “Embrace the fluidity of the web!”. Atomic Web Design is a concept that I always circle back to whenever I’m talking about web. I am also a big fan of sass, and also of Zurb Foundation.

We were able to use a lot of those ideas on a hbr.org’s new responsive site, which launched November 10. My colleagues, Kevin Newman, Fred Lalande, Matt Wagner, Kevin Davis and I just did a presentation on SASS and Pattern-Lab team workflow using Vagrant/Puppet at our Boston CSS meetup, Cascade Bos. Topic was really wide, we talked about anything from Object-Oriented CSS to Web-based Style Guide to deployment method to… everything. You can go through our slide deck here.

But for the “workflow” part, here is the gist of it.

HBR’s pattern-lab work flow

  • Instead of installing all our dependencies — such as php and apache for pattern lab, ruby and compass for css preprocessor and node for grunt and bower — into each of our individual computers, we have a Vagrant/VirtualBox virtual machine that are committed in our github repo.
  • What is really nice about Vagrant is its pass-through file system. Meaning you can edit the file on your OS (be it Mac, Windows, or Linux) using your favorite text editor locally (without going through virtual window), and it can be accessed by both host and virtual machine.
  • So we edit our www/source/scss folder, and www/source/_pattern folder right on our machines. Then, with power of grunt, you can view your changes appear on your browser, served right from your VM.
  • After we like what we see on our local machine, we make a pull request (we commit the whole thing, Vagrant and everything) in github. We have a internal agreement that you don’t merge your own request… so it gets reviewed by peers and then, eventually, gets merged to the master branch.
  • Then our hardest working member of the team, Mr. Jenkins, who watches the changes on the master branch, sees that it changed. And he pulls the latest, compile sass, compile pattern lab, and then he puts the public folder part of the pattern lab onto our internally available web server (is “intranet” still a word?). This is our living style guide. Our backend developers uses it to grab markup code out of it. Designers and editors, as well as marketing people, can access it any time they want.
  • Only part that goes directly out of our pattern lab to production is compiled CSS (it gets minified on its way to our production). But CSS HAS TO BE EDITED IN pattern lab, which forces everyone to first create a new pattern inside our pattern lab. This also ensures that our style guide is most up to date. Win-win!

That’s basically our workflow. I understand that pattern lab is not the silver bullet that works for everyone, but I am pretty proud of how it turned out for us. Another nice thing about committing your entire dev environment in the repo like this, is, say, if you spilled a full glass of red wine on your MacBook Pro by accident (Oops!). All you have to do next day is to get a loaner from IT and download your text editor and you are right back at it. If I had to install node on my machine again ON A DEADLINE, I think I am going to cry. But anyhow…

One of the thing that I wanted to do was release public version of our pattern lab github repo. One without styles in it, and one that is a stand alone virtual machine which runs Pattern Lab.

And, lo and behold, (Thanks to Matt Wagner and Kevin Davis) we were able to release it. It is available for you to download.

Introducing daisy.

Check it out. Star it, fork it. Comment it. File issues on it. Even make pull request on it!

I would absolutely love for you to try it out and let us know what you think.

Here is the copy of daisy’s documentation as we have it right now https://github.com/HBRGTech/daisy.

daisy

This is a vagrant and grunt powered Pattern Lab, an Atomic Web Design Design Pattern library/styleguide, derivative work from hbr.org’s 2014 redesign. We use SCSS version of Foundation which is installed via bower.

Read about it here: http://hbrgtech.github.io/pattern-lab-team-workflow/

Published results can be viewed at http://daisy.pattern.lab/ (or your local domain of choice) after vagrant is up.

Edit your scss in the www/source/scss folder and your html/mustache mark-up in the www/source/_patterns folder. Pattern Lab will automatically be generated to http://daisy.pattern.lab/pattern-lab if grunt watch is running properly (if it isn’t, use vagrant ssh, cd /vagrant_data, and run grunt or grunt watch manually).

Pattern-Lab documentation:

Versions included (Updated as of November, 2014):

  • Foundation v5.4.7 (see bower.json)
  • Pattern-lab v0.7.12

Daisy

Overview

Included within this project is a Vagrant development environment. The goal is provide you with an environment that can be cloned to allow multiple front-end developers to quickly collaborate.

What You Get

  • Ubuntu 14.04
  • Apache
  • PHP CLI
  • Ruby
  • Node.js/npm
  • Grunt
  • Pattern Lab
  • Zurb Foundation

See package.json and bower.json for version information.

Requirements

Getting Started

Download Vagrant and VirtualBox. After cloning this repository to your computer, you’ll want to start up the vagrant box by following the instructions below. The first time you run the installer will be the slowest, as it will download the Virtual Box image and provision the Virtual Machine. Each subsequent run will ensure that the Virtual Machine has the lastest tools and code available.

Unix/Mac

If you are on a Unix based machine or an OSX based Mac, the setup is pretty easy.

  1. Clone the daisy Github repo
  2. Also clone all submodules by running git submodule update --init
  3. Open a terminal and run the init script: ./bin/daisy-init.sh
  4. If you get ‘permission denied’ run ‘chmod 755 ./bin/daisy-init.sh’
  5. Go to http://daisy.pattern.lab in a web browser on the computer running vagrant.

Windows

Daisy is only supported on Windows 7 and above. If you are using Windows XP, please ensure that you have the Windows Power Shell installed.

  1. Clone the daisy Github repo
  2. Also clone all submodules by running git submodule update --init
  3. Run the installer batch script: ./bin/daisy-init.bat
  4. Go to http://daisy.pattern.lab/ in a web browser on the computer running vagrant (may launch automatically).

Vagrant Primer

The Vagrant CLI documentation will be useful for developers that haven’t used Vagrant before. Since Daisy is built on top of Vagrant, the Vagrant CLI commands will also work.

Some useful commands:

  • vagrant up – Start and provisions the VM
  • vagrant ssh – Logs into the VM with ssh
  • vagrant reload – Restarts and provisions the VM
  • vagrant provision – Provisions the VM. You can also do vagrant up --provsison or vagrant reload --provision
  • vagrant suspend and vagrat resume – If you don’t want fully shut it down
  • vagrant halt – Stops the VM
  • vagrant destroy – Deletes the VM

Working with the respository and the VM

Once the VM is up and running, any changes made to the /source/www/resources/ will be automatically compilied. To see the output of these changes, check grunt.log.

If for some reason, you suspect grunt is not running (i.e. grunt.log does not update, css does not compile, or pattern lab not generated) you can go into the VM by vagrant ssh then cd /vagrant_data. There, you can see if grunt is on, ps aux | grep grunt. If you see a process, you can stop it by kill [process id]. If you do not see grunt in process, you can either run bin/watch.sh or grunt watch.

For more information on grunt, read this excellent tutorial by Chris Coyer titled “Grunt for People Who Think Things Like Grunt are Weird and Hard”

4 Responses to “Introducing “daisy” a sass/pattern-lab workflow solution using Vagrant”

  1. This is fantastic and definitely something I’d love to play around with, however it appears there is an issue with the VM. This is the error I’m getting when initialising the bat file in PowerShell:


    ==================================
    = Provisioning the VM
    ==================================
    Bringing machine 'default' up with 'virtualbox' provider...
    ==> default: Box 'daisy-pattern-lab-ubuntu-14-04-64' could not be found. Attempting to find and install...
    default: Box Provider: virtualbox
    default: Box Version: >= 0
    ==> default: Adding box 'daisy-pattern-lab-ubuntu-14-04-64' (v0) for provider: virtualbox
    default: Downloading: https://vagrantcloud.com/puppetlabs/boxes/ubuntu-14.04-64-puppet/versions/1/providers/virtualbox.box
    default: Progress: 0% (Rate: 0/s, Estimated time remaining: --:--:--)
    An error occurred while downloading the remote file. The error
    message, if any, is reproduced below. Please fix this error and try
    again.

    The requested URL returned error: 404 Not Found
    ==> default: VM not created. Moving on...

    The link 404s on VagrantCloud.

  2. Ok I worked out that my earlier issue is being caused by the Vagrantfile referring to vagrantcloud …versions/1/providers/virtualbox.box when it should be …versions/1.0.0/providers/virtualbox.box

    Making that change fixed this.

  3. When cloning submodules in Unix/Mac environment , command lacks a dash. It should be:
    git submodule update --init

    ;)

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>