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
