Vistas (HTML)

Si quieres modificar el HTML de alguna página puedes hacerlo copiando el HTML de app/views y poniendolo en app/views/custom respetando los subdirectorios que encuentres ahí. Por ejemplo si quieres modificar app/views/pages/conditions.html debes copiarlo y modificarla en app/views/custom/pages/conditions.html.erb

Estilos CSS con SASS

Si quieres cambiar algun selector CSS (de las hojas de estilo) puedes hacerlo en el fichero app/assets/stylesheets/custom.scss. Por ejemplo si quieres cambiar el color del header (.top-links) puedes hacerlo agregando:

.top-links {
  background: red;
}

Si quieres cambiar alguna variable de foundation puedes hacerlo en el fichero app/assets/stylesheets/_custom_settings.scss. Por ejemplo para cambiar el color general de la aplicación puedes hacerlo agregando:

$brand:             #446336;

Usamos un preprocesador de CSS, SASS, con la sintaxis SCSS.

Además puedes comprobar la sintaxis de tus ficheros scss con:

scss-lint

Accesibilidad

Para mantener el nivel de accesibilidad, si añades colores nuevos utiliza un Comprobador de contraste de color (WCAG AA es obligatorio, WCAG AAA es recomendable)