Ponencia del taller 'Arquitectura frontend para proyectos con preprocesadores CSS' impartido por Alberto Portolés en la Wordcamp Zaragoza 2018

1. Arquitectura frontend para
proyectos con
preprocesadores CSS

2. Me presento
Alberto Portolés Coscojuela
Ingeniero tecnico en informática de gestión
Especialidad IPO
@albertoportoles

3. Numéricco
Agencia
Digital
Creativa

4. Agencia
Numéricco es una agencia digital creativa especializada en
estrategia de marca y creación digital.
Diseñamos la identidad de marca, realizamos el seguimiento
para hacerla evolucionar, y trabajamos para aplicarla de una
manera coherente y moderna a todos los dispositivos digitales.
Analizamos el proyecto y estudiamos las posibilidades para su
desarrollo con el fin de encontrar las mejores técnicas actuales
y futuras.
Nuestro objetivo principal es dar a cada proyecto una solución
creativa única que le haga destacar, ajustándose a sus
necesidades.

5. Índice
1. ¿Qué es y para que sirve un preprocesador CSS?
2. Ventajas del uso de preprocesadores CSS
3. Características de los preprocesadores (SASS)
4. ¿Cómo generamos nuestro archivo de CSS?
5. ¿Qué es Gulp?
6. Crea tus propias tareas con gulpfile.js
7. ¿Cómo lo integramos en nuestro Wordpress?
8. Caso de uso: Proyecto digital

6. ¿Qué es y para que sirve un
preprocesador CSS?
Arquitectura frontend para proyectos con preprocesadores CSS

7. ¿Qué es y para que sirve un
preprocesador CSS?
Un preprocesador de CSS es una herramienta que nos permite
escribir pseudo-código CSS que luego será convertido a CSS

8. ¿Por qué utilizar un
preprocesador?
Un archivo de CSS contiene muchas líneas de código, lo que
demanda una inversión significativa de nuestro tiempo
Escribir CSS genera un trabajo menos productivo
“CSS on its own can be fun, but stylesheets are getting larger,
more complex, and harder to maintain”

9. ¿Por qué utilizar un
preprocesador?
Un archivo de CSS contiene muchas líneas de código, lo que
demanda una inversión significativa de nuestro tiempo
Escribir CSS genera un trabajo menos productivo
“CSS on its own can be fun, but stylesheets are getting larger,
more complex, and harder to maintain”
Aquí es donde un preprocesador de CSS puede ayudarnos.

10. ¿Cómo nos ayudan los
preprocesadores?
Ventajas y Características del uso de preprocesadores CSS

11. Ventajas del uso de
preprocesadores
Menos es más
Nos ayuda a escribir menos código y a evitar que se repita.

12. Ventajas del uso de
preprocesadores
Nesting: Anidación
Los preprocesadores nos permiten nestear los selectores de
CSS dentro de otros selectores para así no tener que repetir
una y otra vez la clase de tu .selector-principal cada vez que
quieras darle estilo a algo al interior de dicho selector.
SASS
CSS

13. Ventajas del uso de
preprocesadores
Es modular
Podemos importar diferentes hojas de estilos dentro de un
archivo .scss sin sumar peticiónes http.

14. Ventajas del uso de
preprocesadores
Arquitecturas efectivas
Organiza tus ficheros de forma que tu proyecto sea escalable:
· vendor/
· base/
_mixins.scss
_variables.scss
· layouts/
_grid.scss
_header.scss
· modules/
_forms.scss
_buttons.scss
· main.scss

15. Características de los
preprocesadores (SASS)
Variables
Espacio donde almacenar información para luego reutilizarla
tantas veces como se necesite

16. Características de los
preprocesadores (SASS)
Mixins
Grupos de declaraciones que se incluyen en un elemento,
pueden recibir parámetros.
Ej: prefijos vendor para motores de navegador

17. Características de los
preprocesadores (SASS)
Extends
Extensiones de código que se puede aplicar a diferentes
elementos:
Conseguimos una declaración en CSS que incluye a todos los
elementos que tienen dicha extensión.

18. Características de los
preprocesadores (SASS)
Operators
Operaciones aritméticas combinadas con medidas (px)

19. ¿Cómo generamos nuestro
archivo de CSS?
Muy bien todo esto pero..

20. Compilación en terminal
Instalamos Ruby
gem install sass
Ejecutamos SASS
sass input.scss output.css
Le decimos a SASS que se ejecute
cuando haya un cambio en input.scss
sass --watch input.scss:output.css

21. Formatos de salida en SASS
1.
Nested
Estilo por defecto, indenta y
anida todos los selectores
sass text.scss text.css
4.
Compact
Ocupa menos líneas y
prioriza los selectores por
encima de las propiedades.
sass text.scss text.css --style compact
2.
Expanded
Como si se creara
manualmente la hoja de
estilos CSS
sass text.scss text.css --style expanded
5.
Compressed
Formato orientado a la
producción
sass text.scss text.css --style compressed

22. ¿Y si mi proyecto es más grande que una sola hoja de estilos?
¿Cómo hago para generar diferentes hojas de estilo CSS?
¿Y si necesito utilizar librerias externas?

23. Gulp
¿Y si mi proyecto es más grande que una sola hoja de estilos?
¿Cómo hago para generar diferentes hojas de estilo CSS?
¿Y si necesito utilizar librerias externas?

24. ¿Qué es gulp?
¿Para qué sirve?
Herramienta para automatizar y mejorar el flujo de trabajo:
· Minificar código JS
· Validar sintaxis
· Compilar SASS
· Recargar el navegador cada vez que modifiquemos un
archivo
· Colocar archivos en una ubicación determinada
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
sass = require('gulp-sass');
gulp.task('default', ['uglify', 'scss', 'watch']);
gulp.task('uglify', function() {
gulp.src('js/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('min_js'));
});
gulp.task('scss', function() {
gulp.src('scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('css'));
});
gulp.task('watch', function() {
gulp.watch('js/**/*.js', ['uglify']);
gulp.watch('scss/**/*.scss', ['scss']);
});

25. Crea tus propias tareas en
gulpfile.js
Tarea que compila SASS en gulpfile.js:
//Archivo gulpfile.js
var gulp = require(‘gulp’);
var sass = require(‘gulp-sass’);
gulp.task(‘styles’, function(){
return gulp.src(‘src/main.scss’)
.pipe(sass())
.pipe(gulp.dest(‘dist’))
});
gulp.task(‘watch’, function() {
gulp.watch(‘scss/**/*.scss’, [‘styles’]);
});
1. Instalamos el comando gulp de forma global
$ npm install-g gulp
2. Crear package.json
$ npm init -y
3. Inicio de instalación de paquetes necesarios
$ npm install --save-dev gulp gulp-sass
4. Lanzamos la tarea watch que ejecuta “styles”
$ gulp watch

26. ¿Y si queremos utilizar la
versión de sass de Bootstrap?
Instalamos bower para gestionar librerías externas
Descargamos la libreria de Bootstrap
Accedemos a la librería de variables y mixins interna
de Bootstrap
https://github.com/twbs/bootstrap-sass
1. Iniciamos Bower
$ bower init
2. Instalamos el código en SASS de Bootstrap
$ bower install --save bootstrap-sass
3. Lanzamos la tarea “styles”
$ gulp styles

27. ¿Y si queremos utilizar la
versión de sass de Bootstrap?
_bootstrap.scss Archivo de
variables de
bootstrap

28. ¿Y si queremos utilizar la
versión de sass de Bootstrap?
Nuestra Arquitectura SASS
· vendor/
bootstrap/*
_bootstrap.scss
· base/
_mixins.scss
_variables.scss
· layouts/
_grid.scss
_header.scss
· modules/
_forms.scss
_buttons.scss
· main.scss
1. Volvemos a lanzar el watch
$ gulp styles

29. ¿Cómo lo integramos en
nuestro Wordpress?
y todo esto...

30. ¿Cómo lo integramos en
nuestro Wordpress?
Editando la ubicación en gulpfile.js
var gulp = require(‘gulp’);
var sass = require(‘gulp-sass’);
var ubicacion = ‘wordpress/wp-content/themes/mytheme/css‘;
gulp.task(‘styles’, function(){
return gulp.src(‘src/main.scss’)
.pipe(sass())
.pipe(gulp.dest(ubicacion))
});
gulp.task(‘watch’, function() {
gulp.watch(‘scss/**/*.scss’, [‘styles’]);
});

31. Caso de uso
Arquitectura frontend para proyectos con preprocesadores CSS

32. Ractem
Líderes europeos en estanterías.
El análisis de los objetivos de expansión
de su negocio y la investigación de las
diferentes necesidades surgidas en los
diferentes mercados en los que opera, nos
han llevado a crear una nueva e-commerce
con una estrategia basada en facilitar la venta
al usuario y la configuración de cada parte
del producto. Un diseño único y totalmente
adaptable a todos los dispositivos.
El proyecto también incluye un rediseño de
marca que se aplica a todos los soportes
de comunicación, apoyando los nuevos
objetivos de la estrategia de venta online.
Proyectos digitales

33. Caso de Uso

34. Caso de Uso
Una estructura para la e-commerce adaptada al frontend de
Prestashop.
Surge un blog independiente a la e-commerce que necesita
recoger estilos de la tienda.
Creamos una nueva tarea en gulpfile.js que nos genere un
archivo css con los componentes que necesitamos.

35. Muchas
gracias.

36. Creativamente
digitales
Numéricco
Agencia digital creativa
Cuatro de Agosto, 14 4ºH
50003 Zaragoza, España
976 973 937
hola@numericco.com
www.numericco.com