Styling your Project¶
The projects generated with this cookiecutter include a scss file, named
app.scss. You can find the settings file under
Every component includes a set of variables that modify the core structural or visual styles. If there’s something you can’t customize with a variable, you can just write your own CSS to add it.
We are now using colors $primary, $secondary, $tertiary, so changing the look of your site has now become simpler. Change these main colors can give your project a whole new look within seconds. These are the default scss colors of your project.
$primary: #3F51B5; $secondary: #303F9F; $tertiary: #FF4081; $off-white : #F2F2F2; $tundora: #444; $mine-shaft: #333; $dark-metal: #222;
By default your project is set:
$primary- Topbar, Header Backgrounds and Links
$secondary- Social Bar and Sub-headers
$tertiary- Buttons and Hovers
$tundora- Headers and Paragraph
For further documentation on using sass check out Foundation SASS.