Thinking Inside the Box Inside the Box Inside the Box


Click here to watch Thinking Inside the Box Inside the Box Inside the Box

Great design, like jazz, needs both harmony and discord skillfully executed in just the right places. On the web, many of our projects are playing sour notes. Let's want to get in tune.

Even in the age or Responsive Web Design, many sites are being designed from the outside in. Whether the page is defined in Photoshop or, let's hope, in-browser, many design projects slide out of tune when they get to the second or third page. Components are inconsistent, page and layout dimensions vary, font sizes shift. These details add up. Living style guides have been proposed to address this problem, the trouble is they're often extracted from the finished project.

Let's design the style guide first. Start from inside out with the most common aspects of a design language. Instead of envisioning individual pages, work to create a cohesive family of components and layouts that can be assembled into any page. By leveraging a tool called Style Prototypes, components, layouts, and even working pages can be created and designed. It's the new blank paper.

This session will focus on the principles and benefits of this approach and use real-world examples from client work and personal projects. There will be some technical examples that will range from intermediate to advanced Sass and Responsive Web Design. This will include Sass partials, extends, mixins, and Compass extensions like Breakpoint and Singularity Grid System.

Schedule info
Experience level: 
Drupal Version: 
Time slot: 
Wednesday · 03:45-04:45
F - Blackmesh | 4th floor


This was a great session to attend. Lots of good information to soak in. I've been to a number of Camps/Cons and fwiw this was probably the most stylized session I've ever attended with the slide design and even the music beforehand. nice work codingdesigner

drupalatx’s picture

This session was hands-down my most productive hour at Drupalcon. Not only did it open my mind to a completely different approach to design, but it streamlined my development process as well. I now have a brand new mindset going into my current projects.