With a responsive design workflow for creating Drupal sites, there's a real need out there for getting a project off the ground with a well-thought out design system. Using a front-end framework allows you to either get your feet wet with a tested system or fork the project into your own creation.  Building out front-end interfaces with Zurb Foundation and the popular CSS preprocessor, Sass allow you to do just that. 

The popularity of front-end frameworks has helped shift the mindset of the web community from thinking of the web as a page-by-page endeavor to thinking of it as a system of components.  A sea of designers and developers are starting to leverage the iterative nature of working with non-physical materials on the web by relying on the browser as the medium for deliverables.  A browser is, after all, the vehicle that allows a user to understand how layouts, text and images will ultimately fair once they are made interactive, as opposed to static, non-interactive (though well-intentioned) design files that only offer a hope of what the finished product will actually resemble. 

In this session, we'll explore:

  • How to use the Zurb Foundation base theme to create your own custom subthemes
  • How getting started with Sass and Compass can help you create modular, reusable design systems instead of messy vanilla CSS
  • Helpful Sass mixins to speed up your workflow and create more maintainable sites 
  • Prototyping in the browser to share lightweight deliverables before integrating designs into Drupal
  • Using existing Foundation Drupal modules like Interchange and Orbit for responsive images and slideshows