views_and_styles.md

Views and Styles

Views (HTML)

If you want to change any page HTML you can just find the correct file under the app/views folder and put a copy at app/views/custom keeping as well any sub-folder structure, and then apply your customizations. For example if you want to customize app/views/pages/conditions.html you'll have to make a copy at app/views/custom/pages/conditions.html.erb (note the pages subdirectory).

CSS Styles with SASS

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:

.top-links {
  background: red;
}

If you want to change any foundation variable, you can do it at the app/assets/stylesheets/_custom_settings.scss file. For example to change the main application color just add:

$brand:             #446336;

We use SASS, with SCSS syntax as CSS preprocessor.

Also you can check your scss files syntax with

scss-lint

Accessibility

To maintain accessibility level, if you add new colors use a Color contrast checker (WCAG AA is mandatory, WCAG AAA is recommended).