diff --git a/docs/en/SUMMARY.md b/docs/en/SUMMARY.md index 042fa553f..bf09a80fa 100644 --- a/docs/en/SUMMARY.md +++ b/docs/en/SUMMARY.md @@ -22,6 +22,8 @@ * [Templating](customization/templating.md) * [Texts & Translations](customization/translations.md) * [Images](customization/images.md) +* [Views & Styles](customization/views_and_styles.md) +* [Javascript](customization/javascript.md) * [Overwritting](customization/overwritting.md) * [Adding new features](customization/new_features.md) diff --git a/docs/en/customization/javascript.md b/docs/en/customization/javascript.md new file mode 100644 index 000000000..76b743fe9 --- /dev/null +++ b/docs/en/customization/javascript.md @@ -0,0 +1,15 @@ +# Javascript + +If you want to add some custom Javascript code, `app/assets/javascripts/custom.js` is the file to do it. For example to create a new alert just add: + +```js +$(function(){ + alert('foobar'); +}); +``` + +If you work with Coffeescript code you can check it with [coffeelint](http://www.coffeelint.org/) (install with `npm install -g coffeelint`) : + +```bash +coffeelint . +``` diff --git a/docs/en/customization/views_and_styles.md b/docs/en/customization/views_and_styles.md new file mode 100644 index 000000000..911bbf088 --- /dev/null +++ b/docs/en/customization/views_and_styles.md @@ -0,0 +1,31 @@ +# 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: + +```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 +``` + +## Accesibility + +To maintain accesibility level, if you add new colors use a [Color contrast checker](http://webaim.org/resources/contrastchecker/) (WCAG AA is mandatory, WCAG AAA is recommended) diff --git a/docs/es/SUMMARY.md b/docs/es/SUMMARY.md index 0a026571d..b68deaaaa 100644 --- a/docs/es/SUMMARY.md +++ b/docs/es/SUMMARY.md @@ -22,6 +22,8 @@ * [Interfaz y diseño](customization/templating.md) * [Textos & Traducciones](customization/translations.md) * [Imágenes](customization/images.md) +* [Vistas & Estilos](customization/views_and_styles.md) +* [Javascript](customization/javascript.md) * [Adaptar la aplicación](customization/overwritting.md) * [Añadir nuevas funcionalidades](customization/new_features.md) diff --git a/docs/es/customization/javascript.md b/docs/es/customization/javascript.md new file mode 100644 index 000000000..461224caa --- /dev/null +++ b/docs/es/customization/javascript.md @@ -0,0 +1,15 @@ +# Javascript + +Si quieres agregar código Javascript puedes hacerlo en el fichero `app/assets/javascripts/custom.js`. Por ejemplo si quieres que salga una alerta puedes poner lo siguiente: + +```js +$(function(){ + alert('foobar'); +}); +``` + +Si trabajas con código coffeescript puedes revisarlo con [coffeelint](http://www.coffeelint.org/) (instalalo con `npm install -g coffeelint`) : + +```bash +coffeelint . +``` diff --git a/docs/es/customization/views_and_styles.md b/docs/es/customization/views_and_styles.md new file mode 100644 index 000000000..210bd2a58 --- /dev/null +++ b/docs/es/customization/views_and_styles.md @@ -0,0 +1,31 @@ +# 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: + +```css +.top-links { + background: red; +} +``` + +Si quieres cambiar alguna variable de [foundation](http://foundation.zurb.com/) 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: + +```css +$brand: #446336; +``` + +Usamos un preprocesador de CSS, [SASS, con la sintaxis SCSS](http://sass-lang.com/guide). + +Además puedes comprobar la sintaxis de tus ficheros scss con: + +```bash +scss-lint +``` + +## Accesibilidad + +Para mantener el nivel de accesibilidad, si añades colores nuevos utiliza un [Comprobador de contraste de color](http://webaim.org/resources/contrastchecker/) (WCAG AA es obligatorio, WCAG AAA es recomendable)