Successfully reported this slideshow.
Your SlideShare is downloading. ×

#MM17ES - Theming en Magento 2 usando un framework de front-end

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 22 Ad

#MM17ES - Theming en Magento 2 usando un framework de front-end

Download to read offline

Slides de la charla charla de Meet Magento España 2017 sobre la integración de un framework de front-end con Magento 2. En ella se habla sobre la instalación de un framework de frontend basado en SASS, su instalación y su uso utilizando Frontools. También se tratarán temas como la instalación de librerías, maquetado y performance.

Slides de la charla charla de Meet Magento España 2017 sobre la integración de un framework de front-end con Magento 2. En ella se habla sobre la instalación de un framework de frontend basado en SASS, su instalación y su uso utilizando Frontools. También se tratarán temas como la instalación de librerías, maquetado y performance.

Advertisement
Advertisement

More Related Content

Slideshows for you (18)

Similar to #MM17ES - Theming en Magento 2 usando un framework de front-end (20)

Advertisement

Recently uploaded (20)

#MM17ES - Theming en Magento 2 usando un framework de front-end

  1. 1. @_rubenR Theming en Magento 2 usando un framework de front-end
  2. 2. @_rubenR @_rubenR rubenRP @_rubenR Rubén Rodríguez Senior front-end developer Interactiv4
  3. 3. @_rubenR Menú del día ● Motivación ● Propuestas ● Instalación ● Estructura de ficheros ● Herramientas de compilación ● Herencia ● Layout ● PHTML ● Librerías JS ● Performance
  4. 4. @_rubenR ¿Por qué? ● Necesidad del cliente ● Desarrollo complejo inviable en M2 ● Solución intermedia hasta PWA Studio
  5. 5. @_rubenR ¿Por qué?
  6. 6. @_rubenR ¿Qué framework elegir? ● Bootstrap ● Foundation ● Materialize CSS ● Semantic UI ● Pure by Yahoo! ● UIkit
  7. 7. @_rubenR Instalación https://getbootstrap.com
  8. 8. @_rubenR Instalación
  9. 9. @_rubenR Creación de un tema https://goo.gl/NFBWnd
  10. 10. @_rubenR Estructura de ficheros -> SASS ● Base: estilos globales (a, ul, li, body…) ● Layout: específicos por página ● Modules: unidades reutilizables ● Vendor: librerías
  11. 11. @_rubenR Estructura de ficheros -> SASS ● Base: estilos globales (a, ul, li, body…) ● Layout: específicos por página ● Modules: unidades reutilizables ● Vendor: librerías
  12. 12. @_rubenR Frontools ● Facilita la compilación de .scss ● Watcher & live reload ● Minificación ● Herencia ● ES6 https://github.com/SnowdogApps/magento2-frontools
  13. 13. @_rubenR Frontools ● Src ● Dest ● Locale ● Parent ● Stylesdir ● Ignore ● Modules
  14. 14. @_rubenR Herencia
  15. 15. @_rubenR Override vs Extend Extend ● Situación más habitual ● Añade funcionalidad a la ya existente Override ● Grandes modificaciones ● Bloques estructurales
  16. 16. @_rubenR Recapitulemos
  17. 17. @_rubenR PHTML - BEM ● Bloque: Entidad independiente con sentido. ● Elemento: Parte del bloque, no independiente. ● Modificador: Cambian la apariencia de un elemento. bloque__elemento--modificador http://getbem.com
  18. 18. @_rubenR PHTML - BEM Ventajas ● Modular ● Reusable ● Estructurado bloque__elemento--modificador http://getbem.com
  19. 19. @_rubenR JavaScript ● deps: Primer js en cargar ● paths: Rutas ● map: Implementación específica de paths ● shim: Dependencias https://goo.gl/mMG74M
  20. 20. @_rubenR JavaScript ● deps: Primer js en cargar ● paths: Rutas ● map: Implementación específica de paths ● shim: Dependencias https://goo.gl/mMG74M
  21. 21. @_rubenR Performance ● Bootstrap ● Minificación ● AMP ● Fastclick
  22. 22. @_rubenR ¡Gracias!

×