Add Views, Styles and javascript sections
This commit is contained in:
@@ -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)
|
||||
|
||||
|
||||
15
docs/es/customization/javascript.md
Normal file
15
docs/es/customization/javascript.md
Normal file
@@ -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 .
|
||||
```
|
||||
31
docs/es/customization/views_and_styles.md
Normal file
31
docs/es/customization/views_and_styles.md
Normal file
@@ -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)
|
||||
Reference in New Issue
Block a user