OMEGA 4

Que esperar de ésta charla?

Que esperar de ésta charla?

Un poco de historia (a lo biblico)

Y himerus creó Omega 3 y vio que era bueno.

Un poco de historia

Y fubhy vio que Omega podía ser mejor y creó Omega 4

Un poco de historia

Y himerus y fuhby tendrían un follón

Futuro

Esto último parece que va a decantar en un fork en el que va a haber un Ω que va a ir mas por el lado de lo que fuera Ω3 y otra rama que irá por lo que actualmente es Ω4.

Esto es malo? No. Vamos a tener Las dos filosofias de Omega en Drupal 8. De hecho parece que es fubhy el que va a crear el fork y lo va a llamar "KHAN"

Las novedades que traiga khan/Omega 5 dependerán mucho de como evolucione D8, por lo que de momento no se pronuncian.

Comenzamos

Crear un subtheme

Omega como buen theme base tiene un comando drush para crear un subtheme:

drush omega-subtheme NUEVOTHEME

Ahora bower o Make

bower install

#o pueden usar make
drush make libraries.make --no-core --contrib-destination=.

Cosa de una sola vez

Necesitas instalar sass, compass, gemas extra y un par de cosas mas en tu sistema para que todo funcione.

Por eso Omega viene con bundler.

sudo gem install bundler && bundle install
No hace falta lanzar el comando de bundler mas que la primera vez. El software que se instale lo hace en todo el sistema, no en el theme creado.

SASS

rgbapng

Solución muy mala: 
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#d8ffffff', endColorstr='#d8ffffff');
Solución simplemente mala: usar un png transparente que represente el color 

body{
    background: url('../img/red-a-0.75.png');
}

O podemos usar rgbpng


body{
    @include rgba-background(rgba(#FF0000, .75));
}

Que genera:


body {
    background: url('../img/rgbapng/ff0000bf-5.png');
    background: rgba(255, 0, 0, 0.75);
}

sass-globbing

Esta gema nos saca de una situación bastante recurrente y molesta. Ya no tenemos que andar puteando cuando creamos un nuevo archivo, compilamos vamos al navegador no vemos nada y terminamos cayendo en la cuenta que como no lo habiamos incluido en el archivo maestro ese nuevo archivo no se va a renderizar en la vida.

Es una pequeña perla que le viene faltando a sass o compass. Te deja importar todos los partials .scss de un directorio mediante la sintaxis: 

@import "components/*"
O Importar todo lo que haya en todos los subdirectoios recursivamente: 

@import "components/**/*"

sass-globbing

Con lo que pasamos de tener interminables listas de includes como estas:


@import "base/forms";
@import "base/icons";
@import "base/layouts";
@import "base/lists";
@import "base/tables";
@import "base/typography";

@import "components/blocks";
@import "components/breadcrumb";
@import "components/contact-data";
@import "components/tables";
@import "components/tabs";
@import "components/views/grid";

sass-globbing

A esto:


@import "base/**/*";
@import "components/**/*";

breakpoint

Omega no usa media queries, usa la gema breakpoint que está mucho mas buena.

Las media queries son un poco difíciles de tratar a veces. No son semánticas y por ahí te tenés que poner a pensar si la que estas tocando es la que deberías. Bueno este plugin hace todo eso mucho mas fácil.

Para usarlas solo hay dos cosas que tenes que hacer:

1: Definir variables con las medidas que necesitas (aka "puntos de corte"):


$between: 100px 479px;
$mobile: 480px;
$tablet: 768px;
$escritorio: 1280px;

2: Usar el mixin breakpoint() en lugar de @media:


body {
    background: yellow;

    @include breakpoint($between) {
        background: $color-movistar;
    }

    @include breakpoint($mobile) {
        background: $color-vodafone;
    }

    @include breakpoint($tablet) {
        background: $color-orange;
    }

    @include breakpoint($escritorio) {
        background: $color-yoigo;
    }
}

Hay mas cosas

Hay un par de plugins compass mas en omega como "toolkit" y "compass-normalize" pero no son muy relevantes para esta charla.

Drush

Drush

drush omega-guard

livereload?

Es un programa que abre un canal entre la aplicación misma y un js inyectado en la página que estamos maquetando.

Cuando tocamos un archivo SASS, livereload es capaz de enviar los css compilados directamente al browser y el cliente js se encarga del resto.

Livereload: ¿ventajas?

Vas RAPIDO.

No tenes que recargar la página cada vez que quieras ver como queda lo que acabas de cambiar.

Al no tener que recargar, podes hacer mas fácilmente cosas como maquetar un modal que aparece después de hacer ciertas acciones en lugar de tener que repetir esos pasos cada vez que refrescas.

Uso: 
drush omega-guard [tutheme]

Ya está. livereload viene configurado para funcionar sin mas.

template.php

Separando las manzanas y las peras

Problema típico: template.php es enorme.

Omega 4 da una de las soluciones mas elegantes que he visto en mucho tiempo. Separa lo repetitivo :)

¿Qué se repite mas en template.php?

Por cada uno de los hook se ha creado un directorio

Uso

Dentro de cada uno de estos directorios tenés que crear un archivo para cada hook que pretendas usar usando una nomenclatura. Ej: HOOK-preprocess.inc

Y dentro del archivo solo pones el código del hook:


function drupixma_preprocess_block(&$vars) {
    $vars['block']->subject = "bla bla bla";
}

Ventajas?

Layouts

What if

¿Y si pudieramos tratar a los layout como un recurso mas?

¿Empaquetarlos?

¿Separarlos del resto de un theme?

¿Moverlos a otros proyectos?

Omega 4 wins

Implementa un sistema de layouts válido para él mismo, pero a su vez también para Panels y Context.

Y lo anterior marca un punto de inflexión:

Se pueden empaquetar y mover a otros themes (o módulos llenos de layouts).

Y lo mejor de todo es que NO dependen de Panels ni de Context.

¿Como los creamos?

name = Landing
description = Tipo portada landing.
preview = preview.png
template = landing-layout

regions[one] = One
regions[two] = Two
regions[three] = Three

stylesheets[all][] = css/landing.layout.css
scripts[] = js/landing.layout.js

Usar layouts

A lo fácil (pero basico)

Pros:

No puede ser mas simple.

Se puede cambiar el layout activo mediante HOOK_omega_layout_alter()

Contras:

Solo podés seleccionar un layout activo y no podes cambiarlo dinamicamente como con context o panels.

A lo Context

Solo hay que habilitar un módulo que hace de puente: context_omega

Integración en Context

A lo Panels

Para ello usamos panels everywhere (PE)

Los layout de Omega son compatibles con PE

Sistemas de grids

Bower

Es un gestor de dependencias para la capa frontal (de la familia de npm o composer).

Cada día se usa mas porque hacía falta.

Creado por twitter.

Su uso en omega es muy simple: bower install

Ejemplo del archivo de conf

  "name": "omega",
  "versión": "1.0.0",
  "dependencies": {
    "respond": "fubhy/respond",
    "selectivizr": "fubhy/selectivizr",
    "html5shiv": "fubhy/html5shiv",
    "matchmedia": "fubhy/matchmedia",
    "pie": "fubhy/pie"
  }
}

Make como alternativa a bower

Como el autor de omega tenía miedo de quedarse corto con bower, decidió poner make como un gestor de dependencias alternativo.

drush make libraries.make --no-core --contrib-destination=.

Grunt

Grunt

Es un task manager usado prácticamente por todos los proyectos modernos.

Sirve para cualquier tarea mecánica:

  • Compilar sass
  • Hacer verificaciones con jshint
  • Crear backups parciales o totales
  • Y mas cosas

Que trae de serie?

Viene con un task definido que:

  • Comprime y ofusca los archivos js
  • Compila los archivos sass en su versión de producción
  • Ejecuta jshint para autitar el js

Tambien se pueden crear mas task

Ejemplo practico:

Extraigo imágenes de un PSD pero sin pensar en la optimización de las imágenes

Quiero poder tirar un comando en consola que genere una versión optimizada de todas las imágenes extraídas

Solución

Para ello solo necesito crear un nuevo task y usar un plugin llamado imagemin

imagemin: {
    dist: {
        files: [
          {
            expand: true,
            cwd: 'images/src',
            src: ['**/*.{png,jpg,gif}'],
            dest: 'images/dist'
          }
        ]
    }
},

Y aprovecharla mediante un nuevo task:

grunt.registerTask('optimizar', [
    'imagemin:dist'
]);

Mas cosas

El diseñador quiere auditar las imágenes que vamos usando del diseño original.

No sabe usar GIT, ni usa un IDE, ni le interesa andar navegando por los archivos del proyecto.

Quiere que en lo posible le pasemos un zip con las imágenes.

Solución

Pues usamos un nuevo plugin llamado compress

Y un nuevo task que aproveche la generación de imágenes del plugin anterior, y cuando acabe que comprima el directorio de imágenes:

compress: {
  main: {
    options: {
      archive: 'disenyador.tgz'
    },
    files: [
      {src: ['images/dist/**/*']}
    ]
  }
},
    
grunt.registerTask('imagenes-y-comprimir', [
    'imagemin:dist',
    'compress:main'
]);

FIN

¿Preguntas?

/