Reloading Style Guides with Corkscrew v2

by Tim Wright

Two years ago we created the first version of Corkscrew, our style guide framework. It was built on a custom JavaScript codebase designed specifically for the needs of our clients; it had its funky little quirks, but it served us well. Today is the day Corkscrew grows up.

We’ve rebuilt the framework from the ground up with Slim, the PHP microframework, and a flexible templating system powered by Twig. We’re really excited about the direction and are proud to present it to you today!

If you can’t be bothered with the notes below, feel free to hop over to Github and check out the code. As usual, it’s released under an MIT license, so by all means, have at it.

Version 2 Upgrades

Version 2 involved a move away from JavaScript into PHP. To get the features and portability we were looking for, staying with JavaScript and moving to a Node server really didn’t sit right. So here we are.

This version offers a fine-grained atomic templating system to create and nest components across the style guide (while keeping them absolutely connected). There were also some minor upgrades to the UI like adding the ability to deep link into a specific module or component.

The most glaring addition is the API. Moving over the new system allowed us to easily create a file system-based API, rather than depending on a database (reducing the portability). Version 1 of the API allows for a direct duplication of all the style guide elements into JSON format, however future versions will allow content to be dynamically injected through a management system. This pattern allows us to fully integrate a design system in a product while preventing the decoupling of HTML.

Usage

Corkscrew is still meant to be very portable and have the least amount of dependencies possible. Every dependency was carefully looked at and made sure to be easily integrated. All you need to run the framework is a server that can run PHP (Apache or Nginx) and Composer. If you want to edit the core of the framework, you’ll need Sass (not really though). That’s it, no npm install, no build process, no taskrunner, not even jQuery. We want to make the barrier to entry so low that anyone could use it virtually out of the box.

Once again, we invite you to fork or clone Corkscrew on Github and let us know what you think!

About Fresh Tilled Soil

Fresh Tilled Soil is a Boston-based user interface and experience design firm focused on human centered digital design