Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
@_rubenR
Theming en Magento 2 usando un
framework de front-end
@_rubenR
@_rubenR
rubenRP
@_rubenR
Rubén Rodríguez
Senior front-end developer
Interactiv4
@_rubenR
Menú del día
● Motivación
● Propuestas
● Instalación
● Estructura de ficheros
● Herramientas de compilación
● Her...
@_rubenR
¿Por qué?
● Necesidad del cliente
● Desarrollo complejo inviable en M2
● Solución intermedia hasta PWA Studio
@_rubenR
¿Por qué?
@_rubenR
¿Qué framework elegir?
● Bootstrap
● Foundation
● Materialize CSS
● Semantic UI
● Pure by Yahoo!
● UIkit
@_rubenR
Instalación
https://getbootstrap.com
@_rubenR
Instalación
@_rubenR
Creación de un tema
https://goo.gl/NFBWnd
@_rubenR
Estructura de ficheros -> SASS
● Base: estilos globales (a, ul, li,
body…)
● Layout: específicos por página
● Mod...
@_rubenR
Estructura de ficheros -> SASS
● Base: estilos globales (a, ul, li,
body…)
● Layout: específicos por página
● Mod...
@_rubenR
Frontools
● Facilita la compilación de .scss
● Watcher & live reload
● Minificación
● Herencia
● ES6
https://gith...
@_rubenR
Frontools
● Src
● Dest
● Locale
● Parent
● Stylesdir
● Ignore
● Modules
@_rubenR
Herencia
@_rubenR
Override vs Extend
Extend
● Situación más habitual
● Añade funcionalidad a la ya existente
Override
● Grandes mod...
@_rubenR
Recapitulemos
@_rubenR
PHTML - BEM
● Bloque: Entidad independiente con
sentido.
● Elemento: Parte del bloque, no
independiente.
● Modifi...
@_rubenR
PHTML - BEM
Ventajas
● Modular
● Reusable
● Estructurado
bloque__elemento--modificador
http://getbem.com
@_rubenR
JavaScript
● deps: Primer js en cargar
● paths: Rutas
● map: Implementación específica de paths
● shim: Dependenc...
@_rubenR
JavaScript
● deps: Primer js en cargar
● paths: Rutas
● map: Implementación específica de paths
● shim: Dependenc...
@_rubenR
Performance
● Bootstrap
● Minificación
● AMP
● Fastclick
@_rubenR
¡Gracias!
Upcoming SlideShare
Loading in …5
×

0

Share

Download to read offline

#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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

#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!

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.

Views

Total views

201

On Slideshare

0

From embeds

0

Number of embeds

4

Actions

Downloads

8

Shares

0

Comments

0

Likes

0

×