28 lines
878 B
Markdown
28 lines
878 B
Markdown
# Styles with CSS
|
|
|
|
In order to make changes to any CSS selector (custom style sheets), you can add them directly at `app/assets/stylesheets/custom.scss`. For example to change the header color (`.top-links`) you can just add:
|
|
|
|
```css
|
|
.top-links {
|
|
background: red;
|
|
}
|
|
```
|
|
|
|
If you want to change any [foundation](http://foundation.zurb.com/) variable, you can do it at the `app/assets/stylesheets/_custom_settings.scss` file. For example to change the main application color just add:
|
|
|
|
```css
|
|
$brand: #446336;
|
|
```
|
|
|
|
We use [SASS, with SCSS syntax](http://sass-lang.com/guide) as CSS preprocessor.
|
|
|
|
Also you can check your scss files syntax with
|
|
|
|
```bash
|
|
scss-lint
|
|
```
|
|
|
|
## Accessibility
|
|
|
|
To maintain accessibility level, if you add new colors use a [Color contrast checker](http://webaim.org/resources/contrastchecker/) (WCAG AA is mandatory, WCAG AAA is recommended).
|