With every new Foundation release comes faster, better and smarter ways to code with Foundation. There is a lot of excitement happening in Yeti land lately — the Foundation 5 release is on the horizon, and we're starting a new Advanced Foundation class in our ZURB University, so we thought it would be a great time to answer some of the common questions about best practices for using Foundation.
We use Foundation every day here at ZURB for a huge variety of client projects, as well as in our own apps. We'd get lost pretty quickly without implementing its standards and best practices. We've pulled out the top three best practices that you can employ with Foundation.
1. Customize Your Settings
To start your project right with Foundation, you'll start by customizing your
_settings.scss file. The settings file contains the variables and values for all the Foundation components. This allows you to make structural and global changes to set Foundation up for your project without having to override styles. For example, if your site's brand uses red as the primary color, instead of overriding Foundation's default primary color everywhere with vanilla CSS, simply change the
$primary-color variable in your settings file to your brand's primary color.
2. Organize Your Files
Getting your files organized in a way that makes sense to you and your coworkers is a key to successful code. In a previous blog post, we wrote about 'chunking' your code — the practice of creating small manageable chunks of Sass files that represent each element on your site.
Create individual Sass files for each UI component, such as navigation, then separate the components from app.scss and
_settings.scss files by placing them in their own folder. If you're working on a complex app with a lot of UI components you can even separate those components into folders based on type. For example, main navigation, sub-navigation, and pagination can all be placed in a navigation folder.
Organizing files makes it super easy for you and your team members to find the appropriate styles for an element without having to search through a single file. When you import all these files into your app.scss file, you'll end up with a nice table of contents for your styles.
3. Use Mixins to Code Beyond Small, Medium, and Beyond
The Foundation grid allows you to build your site for small, large and, soon, medium devices. But the responsiveness doesn't stop there. Foundation comes ready with media query variables that you can use to deeply customize your design for multiple devices sizes, beyond what the grid offers. These variables allow you to specify styles for different devices outside of the media queries themselves, consolidating your power over styles in one place.
Learn More Best Practices
Become a Foundation Master
Your team will benefit from the Advanced Foundation course if you want to:
- Master the Grid: Use advanced techniques to bend the grid to your will beyond what is possible with basic rows and columns.
- Foundation Best Practices: We'll share more of our best practices for organizing your files, using different Sass versions, adding high-resolution assets, and more.
- Tips and Tricks: Add icon fonts, create custom UI elements, and write uniquely customized code based on Foundation.
Our first class is on November 14 at 9:00 AM PDT and can be taken from anywhere — it's held online using GoToMeeting.