Using mixins to customize your Foundation App project

By default, Foundation for Apps comes with lot of predefined CSS classes. You can use these classes in your HTML. You can also define your own classes with Foundation for Apps functions and mixins. Mixins are available for each component. In this recipe, you will learn how to use these mixins to create your own CSS class structure. In this recipe, the Title bar component is used to demonstrate how to reuse Foundation's mixins.

Getting ready

Read the Setting up a Foundation App project recipe of this chapter before you start finding out how to install Foundation for Apps.

How to do it...

1. Create a new Foundation for Apps project by running the following command in your console, as described in the Setting up a Foundation App project recipe of this chapter:

   foundation new
   

2. Run the foundation watch command in your console and open the app in your browser at http://localhost:8079.
3. Now, edit the client/index.html file and write down the following...