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
Foundation is a great tool, and like any great tool, it's easy to pick up and incredibly rewarding to master. Learning best practices will help you eliminate the process of trial and error to find out the quickest, best, ways to code with Foundation. While the docs are pretty detailed, the University Introduction to Foundation course helped walk people through Foundation's basic components and getting started. We're going to start a new course on Advanced Foundation, where you'll not only learn about best practices for Foundation, but also get in-depth knowledge on Foundation's Javascript, master the grid, and learn our tips and tricks — all from the people that build Foundation and use it everyday!
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.
- Advanced Foundation Javascript: Unlock the secrets of Foundation's JS plugin arsenal.
- 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.
