# !Arrarray!
##### Drupal Theming
##### DrupalCamp Quito 2015
####### Martes 20 Octubre 2015
#### James Wilson
##### [@jwilson3](https://twitter.com/jwilson3)
## Diapositivos
[bit.ly/arrarray](http://bit.ly/arrarray)
####### Lo único constante
es el cambio
## Browser Support
- ≥IE9
- SVG (no Android 2.3)
# ☹
[d.o/project/ie8](https://www.drupal.org/project/ie8)
(por si lo necesitas)
## HTML(5)
- formato schema.org (RDFa)
- Mejor accessibilidad.
- Atributos WAI-ARIA.
- Atributos _data_.
- Niveles DOM: D7 17, D8 17
## CSS(3)
- Menos \#IDs
- SMACSS & BEM
- Clases definidos en TWIG
- [d.o/coding-standards/css](https://www.drupal.org/coding-standards/css)
## Javascript
- jQuery v2.x
- Modernizr - detección
- Backbone.js - MVC
- Underscore.js - utilidades
## Templating
- _PHPTemplate_ => _Twig_
- `theme_*` y `*.tpl.php` => `*.html.twig`
- Mas limpio.
- Mas seguro.
- Mas facil.
## Performance
- _Agregación de CSS y JavaScript_ por defecto.
## Components
- Mejor experiencia admin
- Nuevos elementos
- Botones desplegables
- Dialogos modales
## Responsivo
- Themes, toolbar, imagenes, y tablas
- Breakpoint media queries
## SVG
- Druplicon
- Throbbers/Spinners
- Icono RSS
######## Más Allá
## Metas
- Reducir repeticion
- Codigo más eficiente
- Reducir tamaño de recursos
## SASS
- Extender la sintaxis de CSS con:
- `$variables`
- `.reglas{.encajadas{}}`
- inline `@imports`
- `@mixins` (funciones)
## Compass
- caja de herramientas
- vendor prefixes
## Autoprefixer
Crear CSS prefijos automaticamente
según datos de caniuse.com
[caniuse.com/svg](http://caniuse.com/svg)
a {
display: flex;
}
a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
## NPM, Grunt, Gulp
- concatenar archivos
- mejorar sintaxis (js/css hint)
- correr pruebas
- minificar js, css, svg
- monitorear cambios
## Optimización front-end
- Drupal
- CDN
- ImageAPI Optimize (Yahoo! SmushIt)
- CSSTidy
- Non-drupal
## Divitis D7
No hay una bala mágica
Mothership
## Divitis D8
Classy o Stable
## Classy
Favorite horses
Black Stallion
Shadowfax
Hidalgo
## Stable
Favorite horses
Black Stallion
Shadowfax
Hidalgo
## Recursos
- [#57563: modulos de optimizacion front-end](https://groups.drupal.org/node/57563)
- [caniuse.com](http://caniuse.com/svg)
- [d.o/documentation/theme](https://www.drupal.org/documentation/theme)
- [#2356951: Diferencias de Theming 6,7, y 8](https://www.drupal.org/node/2356951)
#### Gracias!!
James Wilson [@jwilson3](https://twitter.com/jwilson3)
## Diapositivos [bit.ly/arrarray](http://bit.ly/arrarray)