Styling your Project¶
The projects generated with this cookiecutter include a settings file, named _settings.scss
. You can find the settings file under <project_slug>/pages/static/css/
.
Every component includes a set of variables that modify 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.
Here’s an example set of settings variables. These change the default styling of buttons:
// Default padding for button.
$button-padding: 0.85em 1em !default;
// Default margin for button.
$button-margin: 0 $global-padding $global-padding 0 !default;
// Default fill for button. Is either solid or hollow.
$button-fill: solid !default;
// Default background color for button.
$button-background: $primary-color !default;
// Default hover background color for button.
$button-background-hover: scale-color($button-background, $lightness: -15%) !default;
// Default font color for button.
$button-font-color: #fff !default;
// Default alternative font color for button.
$button-font-color-alt: #000 !default;
// Default radius for button.
$button-radius: 0 !default;
// Default sizes for button.
$button-sizes: (
tiny: 0.7,
small: 0.8,
medium: 1,
large: 1.3,
) !default;
// Default font size for button.
$button-font-size: 0.9rem !default;
// Default opacity for a disabled button.
$button-opacity-disabled: 0.25 !default;
For further documentation on using sass check out Foundation SASS.