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.
Read the Setting up a Foundation App project recipe of this chapter before you start finding out how to install Foundation for Apps.
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
Run the
foundation watch
command in your console and open the app in your browser athttp://localhost:8079
.Now, edit the
client/index.html
file and write down the following...