The new Drupal 8

theming way

 

Jorge Ram

@jeyram7

jorgeram@axai.com.mx

Joaquin Bravo

@jackbravo

joaquin@axai.com.mx

Elias De la Torre

@eliasdelatorre

elias@axai.com.mx

 

A quién va dirigido

  • Personas  familiarizadas con el theming de Drupal 7 y desean conocer los cambios en Drupal 8


  • Personas que son nuevas en Drupal y  quieren conocer como funciona el theming en Drupal 8

Qué veremos

  • Un panorama general de los elementos que  integran el sistema de theming en Drupal 8

  • Un vistazo  a nuevas herraminetas de front end, técnicas y buenas prácticas

  • Algo más que simple código

Qué no veremos

  • Un tutorial introductorio de Twig

  • Manejo de frameworks de CSS (Bootstrap , Fundation...)

  • Un tutorial de SASS


 

Estándares y buenas prácticas

¿Cómo creamos nuestro proyecto?

Hecho

  • El diseño comienza en el contenido, no en la página

  • Los mockups fallan en prover algún contexto y no pueden representar el creciente número de variables involucradas

  • La "página" es (la mayoría de las veces) irrelevante, atar tu diseño al esquema de páginas afectará la experiencia del usuario

http://pointnorth.io/#north

Content Strategy

Diseña tu contenido.  Entonces,  construye sistemas de diseño para soportar ese contenido.

"Content strategy" es el proceso en el cual el contenido es analizado,  ordenado, construido y colocado.
Los usuarios vienen a un sitio primordialmente por su contenido, por lo que resulta la parte más importante del sitio.

Content Strategy

  • Visión de Proyecto

  • User Personas

  • Inventario de Contenido

  • Auditoría de Contenido

  • Modelado de Contenido

  • Arquitectura de la Información

Roles

  • Product Owner

  • Project Manager

  • Designer

  • Developer

  • Quality Assurance

Project Vision

  • Cuál es el objetivo del  Product Owner?

  • Para quién se construye el sitio?

  • Quién mantendrá el desarrollo?

  • Cuáles son los puntos criticos del proyecto?

Actividades

Roles y Responsabilidaes

Determinar los roles y responsabilidades en cada grupo y registrarlos en intake.center

Project Vision

Trabajen juntos en el equipo en intake.center  y creen la Visión de proyecto de su iniciativa.

Soporte al Contenido con Componentes

  • Diseñar y construir Stand-Alone Components

  • Diseña el Layout que contenga esos Componentes

  • Ensambla Componentes y Layouts para conformar laArquitectura de Información

Modernas Herramientas para  Frontend

 

Yeoman

http://yeoman.io/

https://github.com/north/generator-style-prototype

Bundler Logo

http://bundler.io/

NPM Logo

https://www.npmjs.com/

Bower Logo

https://www.bower.io

Grunt Logo

http://gruntjs.com/

Fasten RWD Development with Sass, maddesigns (Sven Wolfermann)

http://sass-lang.com/

Compass is an open-source CSS Authoring Framework.

http://compass-style.org/

http://jmolivas.com/slides/dcla2015/speeding-up-drupal-8-development-using-drupal-console/assets/images/drupal-console.png

http://drupalconsole.com/

Retomando el camino

¿Qué es lo que cambió?




Directorios

Files / Folders

  • Drupal 7 ---> sites/all/themes

  • -----------> .info, tpl, css, js

  • Drupal 8 ---> themes (en root)

  • -----------> .yml, twig, css, js

Markup

Drupal 7

Drupal 8

WAI-ARIA

Web Accessibility Initiative

Accessible Rich Internet Applications

http://www.w3.org/TR/wai-aria/

.TPL

  • Drupal 7 Core, mecanismo basado en PHP template engine

  • Permite cualquier lógica posible 


Old theme layer

D8  theme layer

SMACSS

Scalable and Modular Architecture for CSS

BASE

  • Elementos HTML y pseudoclases
  • Child and siblings selectores
  • Usualmente contiene un CSS reset
  • Drupal 8 incluye normalize.css
 

LAYOUT

  • Composición primaria de nuestra maquetación
  • CSS de nuestro Grid system
 

COMPONENTS

  • Elementos reutilizables del UI
  • Reglas flexibles. (buttons, widgets, menu, etc..)

STATE

  • Aumetan o sobrescriben  los estilos de algun elemento
  • Comúnmente describen alguna estado o acción
  • Sus clases típicamente comienzan con el prefijo is-

THEME

  • Llamado también como Skin
  • Define colores y/o imágenes para el "look and feel" de elementos previos

BEM

Block Element Modifier

  • Block = Una entidad independiente, definida,  que represente una pieza de la interfaz en una pagina

  • Element = Parte de un bloque, enlazado semántica y funcionalmente.

  • Modifier = Conjunto de banderas en bloques o elementos que definen un

BEM

TWIG

Sintaxis

Variables

Variables

Código como Variable


Filtros

Filtros

Control tags

Control tags


Control tags

keep-calm-and-say-no-to-php-3.png

¿Dónde agrego mi CSS y JS?

{nombre_tema/modulo}.libraries.yml

Libraries


Drupal Layout



  • D 5  lanzó ---> Panels

  • D 6 lanzó --->  Display Suite

  • D 7  ---------> Implementó temas responsivos

  • D8   ---------> Se pretende unificar  todo lo anterior en el Core

Display Suite

https://drupal.org/project/ds


  • Relativamente fácil de usar

  • Muy Flexible

  • Altamente exportable

  • Su creador es un developer del Core Field.


Panels

https://drupal.org/project/panels


  • Un integración futuro en el Core ( Iniciativa SCOTCH , Panels in Core D9 )

  • Si manejas views te servirá para conocerlo

  • Altamente Flexible

  • Se puede sub-dividir facilmente (mini-panels --> blocks)

  • Complejidad



 

Resurces

  • http://d8.sqndr.com/index.html
  • https://www.drupal.org/coding-standards/css/architecture
  • https://www.drupal.org/node/1823416
  • https://www.drupal.org/node/172169

www.axai.com.mx