Una de las cosas que más me gustan de Ionic 2 es su adaptabilidad en diseño. Por un lado, sus componentes están prediseñados por defecto según los standards de cada plataforma. Por el otro, el equipo de Ionic ha hecho un gran trabajo con SaSS para que puedas personalizar el diseño de tu app al 100%.

Deja que te cuente los principales mecanismos de personalización de Ionic 2.

Colores

Uno de los principales mecanismos de personalización de cualquier app son los colores. Diseñar una app exige un esfuerzo considerable eligiendo la paleta de colores adecuada y decidiendo posteriormente como usarla.

Ionic 2 proporciona unas variables de SaSS predefinidas con algunos colores, que modifican automáticamente el comportamiento de sus propios componentes.

Estas variables se encuentran en un archivo destinado justamente a la personalización de la app, en src/theme/variables.scss:

// src/theme/variables.scss

// ...
$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
);
//...

Puedes usar estos colores directamente como propiedad en cualquier componente del framework y lograrás modificar su comportamiento.

Por ejemplo, asignando estos colores sobre los botones…

  <button ion-button color="primary">Primary color btn</button>
  <button ion-button color="secondary">Secondary color btn</button>  
  <button ion-button color="danger">Danger color btn</button>    

Conseguirás este resultado…

Actualizando variables de color

El mecanismo obvio para cambiar estos colores es sobreescribir las variables en el archivo anterior. De este modo, podría darle un valor #E28413 al color primary…

// src/theme/variables.scss

// ...
$colors: (
  primary:    #E28413,
  //...
);
//...

…y se actualizarán todos los componentes que lo usen.

Los botones del caso anterior quedarían así:

Creando nuevos colores

La variable $colors de SaSS que define Ionic, es un map al que le puedes añadir otros elementos.

Podría crear, por ejemplo, un color corporate…

// src/theme/variables.scss

// ...
$colors: (
  corporate: #2eb398,
  //...
);
//...

…y utilizarlo tranquilamente como cualquier otro color de Ionic:

<button ion-button color="corporate">CORPORATE color btn</button>

El resultado sería este:

Color de contraste

El mapa de colores de Ionic permite detallar más los colores, incluyendo uno de base y otro de contraste (que en un botón, corresponderían al color de fondo y al del texto, respectivamente). Lo harías así:

// src/theme/variables.scss

// ...
$colors: (
  corporate:  (
    base:#2eb398,
    contrast:#27292B
  ),
  //...
);
//...

El botón anterior se actualizaría así:

Colores en componentes custom

Ya has visto como usar el mapa de colores de Ionic en sus propios componentes, pero… ¿y si quieres utilizar esos mismos colores en tus propios componentes?

Fácil: solo tienes que usar la función de SaSS color que proporciona Ionic.

Detalle: A priori podrías utilizar el método map-get de SaSS, pero eso no te serviría para colores que incluyen base y contraste. Por eso Ionic te proporciona el método color.

Aquí tienes un ejemplo de como usarlo tanto para colores básicos como para colores con contraste.

    my-custom-comp{
        background-color: color($colors, primary);
        color: color($colors, corporate, base);
    }

Variables y métodos SaSS

Justamente como Ionic utiliza SaSS, puedes sacar partido de su potencial para facilitarte las cosas.

Variables SaSS

Imagina que quieres reaprovechar un mismo valor en varios lugares de tu hoja de estilos. Para eso tienes las variables de SaSS. Ahí va un ejemplo muy simple:

$box-size: 40px;

box-component{
    height: $box-size;
    width: $box-size;
}

Métodos SaSS

Ya has visto el método color de SaSS que te proporciona Ionic. En la propia documentación de SaSS puedes encontrar muchas otras funciones interesantes.

Me parecen especialmente útiles las de manipulación de color, como lighten($color, $amount) o darken($color, $amount), para obtener una versión más clara/oscura de otro color.

Por ejemplo, podría crear un color compuesto (base y contraste), del siguiente modo:

// src/theme/variables.scss

// ...
$colors: (
  primary:  (
    base:#E28413,
    contrast:darken(#E28413, 15%)
  )
  //...
);
//...

El resultado sería este botón:

Atributos útiles prediseñados

Ionic ha prediseñado un conjunto de atributos que, al aplicarlos sobre sus componentes, realizan una serie de transformaciones de CSS muy útiles.

Los atributos prediseñados de Ionic se utilizan así:

<ion-content padding></ion-content>

Donde padding es uno de estos atributos.

Transformaciones de texto

Los nombres son autoexplicativos. Los hay para alinear el texto, ajustarlo o manipularlo. Aquí los tienes:
text-left, text-center, text-right, text-justify, text-wrap, text-nowrap, text-uppercase, text-lowercase, text-capitalize.

Paddings del elemento

Nombres también muy obvios:
padding, padding-top, padding-left, padding-right, padding-bottom, padding-vertical, padding-horizontal, no-padding .

Margins del elemento

Igual que con los paddings:
margin, margin-top, margin-left, margin-right, margin-bottom, margin-vertical, margin-horizontal, no-margin.

Alineación de los ion-button

• start: Alinea el elemento al inicio, en función del SO. En iOS, esto significa a la izquierda mientras que en Android lo ubica el primero a la derecha.
• end: Alinea el elemento al final, en función del SO. En iOS es a la derecha mientras que en Android lo ubica el último la derecha.
• left: Lo alinea a la izquierda.
• right: Lo alinea a la derecha.

Estilos específicos por plataforma

Ionic añade una clase concreta al componente raíz de la app en función del SO sobre el que se está ejecutando. Por ejemplo:

<ion-app class="md">

Las opciones son:

• ios: Para iOS
• wp: Para Windows
• md: Para Android y también cuando no son los anteriores.

Así, todo el contenido de la app hereda esa clase y los estilos de los componentes se ven afectados de forma acorde. No solo eso, si no que tú también puedes aprovecharlo en tu favor.

Cambiando estilos por plataforma

Por ejemplo, si quieres añadir un margen inferior de 10px a todos los botones cuando estás en Android, puedes actualizar la hoja global de estilos así:

.md button {
  margin-bottom: 10px;
}

Variables SaSS por plataforma

Ionic dispone también de multitud de variables SaSS con valores por defecto que asigna a sus componentes. El ejemplo anterior también lo podrías resolver actualizando la variable adecuada en el archivo SaSS principal, antes de cargar Ionic:

 $button-md-margin: 0px 0px 10px 0px;
 //. . .

 @import "ionic";

Puedes consultar todas las variables por defecto de Ionic aquí.

Configuración inicial

El estilo que se aplica en función de la plataforma no solo afecta al CSS, sino que también modifica la configuración de inicio con la que se carga la app.

Esta configuración inicial -que puedes modificar en el @NgModule-, define cosas como la ubicación de los tabs (tabsPlacement), las animaciones entre páginas (pageTransition) o el contenido del botón atrás (backButtonText).

Puedes consultar más detalles de la configuración por defecto aquí.

Conclusiones

Como ves, Ionic 2 se adapta por defecto al entorno en que se ejecuta la aplicación (Android, iOS, Windows), pero está diseñado para que puedas tunearlo a tu antojo, tanto a escala individual, como a la hora de modificar los estilos de toda la plataforma.

Y esta reflexión me lleva a la pregunta de la semana:

¿Eres de los que utilizan los estilos por defecto de Ionic, o tuneas fuertemente tus apps?

Puedes contestar en los comentarios.

¡Un abrazo!