Last month, I gave the third in a series of front-end web development talks here in Taipei. The 10 attendees and I discussed style-guide-centric development and front-end development automation.
The seminar was designed to be hands-on, so we started by installing Node.js and downloading Zen 8.x-7.0-alpha8 so we could play with code while discussing the evening’s topics.
Putting the style guide at the center of your development cycle is something that I’ve talked about many times before. As you build out each component of your design, it immediately goes into a style guide. Visualizing the component in an isolated manner makes it easier to construct the component, its elements, and its variations.
While I’ve given talks and written blog posts on this subject before, I’ve never built a style guide for a Drupal 8 site. This third talk in the Taipei seminars gave me the chance to build incrementally on the previous two talks, component design and Drupal 8’s Twig. Ideally your style guide should be using the exact same CSS, HTML and JS that your application is using. With Drupal 7, integrating the PHPTemplate system into a style guide was a non-starter for me; technically possible, but too difficult to invest the number of hours it would require. In the week leading up to this seminar, I started porting the Zen theme to Drupal 8.
Using the Twig template language we played with during the second seminar, I showed the attendees for the first time how I imagined you could build a Twig-based component library and integrate it with Drupal’s theme layer.
With vanilla Twig, you can construct a very simple component with the exact HTML you wanted and the exact variable names you wanted. Then you can convert Drupal’s very Drupal-ly variables and render arrays into the variables that your component expects. Just use the *.html.twig template to convert the variables from Drupal into the variables needed for the component and then extend/embed/include the *.twig component.
I’ll write a more detailed blog post on this soon. But it was really cool to share this method for the first time and get some early feedback.
From there I showed attendees how to “start living the dream” by taking the component written with Twig, CSS and JS and pull it directly into a style guide with KSS comments and the first of our automation tasks. Since we’ve pulled out the Drupal-specific variables out of our Twig files, that allows kss-node to use the component Twig file with Twig.js (the Node.js port of Twig). We have once set of HTML (the .twig file), of CSS, and of JS and both the style guide builder and Drupal uses it. Hooray!
We then launched into using a task runner to control all of the front-end development tasks we need to do. Automating our best practices means we can spare time for improving our craft.
I showed them Gulp.js and its very simple API that makes writing new tasks a breeze.
The most fun part of the evening when was when someone asked me to demo the Browser Sync task that comes with Zen. I ran “gulp watch” from my command line and that started up a BrowserSync proxy server that served up my Drupal site and style guide on a special URL. Then all of the attendees went to that URL and I could control the scrolling of the page on their machines with the mouse on my computer. It was pretty cool.
This seminar was amazing for me. I love doing hands-on deep dives of concepts and technology. If you missed the class or don’t live in Taipei, I’m available to teach your organization remotely or in person. Just contact me!