Building Drupal Style Tiles using Foundation and SCSS
5 min read
This past weekend, Pacific Northwest Drupal Summit in Seattle, WA, was buzzing with talk of Foundation, an amazing responsive web framework built with HTML5 and SCSS.
I led a session on Building Drupal Style Tiles using Foundation and SCSS and provided sample code for attendees to download and install to create their own style tiles.
Original video is available on YouTube.
What are Style Tiles?
Style Tiles are not a new concept in design. Graphic and interior designers often use Mood Boards or similar deliverables to develop aesthetics before beginning design. Everyone can now style tile-ize whatever they want - Just sign up for Pinterest and start pinning and you too can create a palette for your new living room or create a palette of cute baby animals. (Why I really love Pinterest)
Style Tiles for the web were made popular by Samantha Warren of Twitter. She has developed the site styletil.es which discusses the value that style tiles have in the design process and provides a Photoshop template download so you can create your own tiles. She has written a great article on A List Apart discussing the style tile process.
I have used Photoshop style tiles in multiple projects and have found them to be an invaluable step in the design process. By creating style tiles, a designer is able to flesh out multiple palettes, typography choices and design patterns without having to take all the time it takes to design an entire homepage. I especially love creating the different patterns and only giving the user a "sneak-peek" of these patterns. Once the client chooses the option with which they want to move forward, the style tile process makes it easy to duplicate the Photoshop layer patterns and begin the homepage design.
One thing I have removed from my style tiles is the descriptive adjectives. I have found that they are distracting to the clients and that often, the clients focus more on the words than the design.
Creating Style Tiles Using HTML5 and SCSS
This summer while sitting on an airplane and designing a style tile in Photoshop, I thought to myself:
"Wouldn't it be cool if I had a style tile built in HTML that I can just plug colors and other stylistic elements into SCSS variables and create an interactive style tile?"
And…
"Wouldn't it be cool if I could build style tiles that use Drupal HTML code that I can style and then reuse code and mixins in my site's theme? "
And...
"Wouldn't it be cool if those style tiles were responsive so that the client could get a feel for how elements change in different devices?"
At the same time, I had just discovered Zurb's Foundation web framework and was totally swooning over it. I still am.
I immediately closed Photoshop, downloaded Foundation and started coding.
What is Foundation?
So what is Foundation? Foundation is, and I quote Zurb on this (and totally agree), "The most advanced responsive front-end framework in the world."
Foundation is written in HTML5 and SCSS to provide a responsive open-source code set that developers can download and use for prototyping or site building.
Foundation comes with a huge list of features. Some features are:
- 12-column typographic grid designed to work on almost any sized device screen
- Typography based on a golden ratio modular scale
- Multiple button styles, patterns and sizes plus hover and active states
- Custom form styles with validation states and checkbox/radio styles
- Multiple navigation styles with drop down support and configurable for responsiveness
- Responsive image or content slider
- Modal Dialog
Whoa. So great!
Building the Style Tiles in Foundation
I use Foundation to create the two-column responsive layout. I have created two different directories. One is called base, the other is called example. Each style tile shows and defines the style for the following elements: typography, swatches, link styles, button styles, tabbed navigation, tags, pager and status/warning/error messages. I have included app.scss and settings.scss and modifed specific settings in settings.scss to define colors and fonts.
I created tile.scss to provide the layout and the swatch mixin for the style tile. I have also included an empty overrides.scss for any new styles.
Base Style Tile
The base style tile shows Foundation in action using its default colors and styles.
In the example style tile, I have removed the Foundation classes on HTML elements and I added styles to the overrides.scss. These styles and mixins are intended to be the code that a front-end developer can use in their Drupal theme.
How can these style tiles be used?
During the presentation at Pacific Northwest Drupal Summit, the group and I discussed the different potential usages of this code. Straightforward, these style tiles can replace Photoshop based style tiles. While the designer may still do a bit of work in Photoshop, the presentation of the style tile will be in HTML.
We thought that this could be a tool to help facilitate communication between designers and front-end developers to help clarify how the design is carried out into interaction. This tool could also serve as a client deliverable to show how fonts will render, allow the designer to showcase different webfonts and demonstrate how specific elements will change with user interaction.
Potentially, as a Drupal-specific project, we can access the Styleguide module through hook_styleguide() and hook_styleguide_alter() to modify the Style guide output so that it contains style tile elements such as color swatches.
I would love to hear any other ideas people have. Please download, fork and add bugs or questions to the github queue if you have any issues.
