jueves, 18 de agosto de 2016

Fundamentos de SASS

sass logo

Como hablamos anteriormente la manera de personalizar nuestras vistas en ionic 2 es a traves de los archivos SASS.

En este post vamos a hablar sobre los Fundamentos de SASS, para que de esta manera no tengamos problemas al realizar nuestras modificaciones.

Que es SASS?

SaSS es una forma de escribir hojas de estilos (CSS) con algunas mejoras que permiten tener una mejor estructura y hacerlo mas escalable.

Por que usar SASS?

Ahorrar tiempo a mediano plazo y proyectos mas escalables.

Como usar SASS?

Ionic por defecto maneja el uso de SASS desde tu proyecto, entonces, no debes preocuparte :)

Fundamentos

Variables

Las variables permiten asignar valor a cualquier serie de propiedades y de esta manera hacer cambios rapidos sobre la apariencia solamente modificando estas. Las variables utilizan $. Un ejemplo:


$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Anidamiento

Vas a poder organizar mejor tus archivos de estilo gracias a las opciones de anidamiento que te brinda SASS. Un ejemplo:


nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Importar

SASS tambien ofrece la capacidad de importar, lo cual crea una version completa de todos los modulos que hemos importado permitiendo utilizar una estructura modular en nuestro proyecto en el CSS. Un ejemplo puede ser:


// base.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Parciales

Cada vez que creamos una version un archivo a traves de importaciones esto crea copias de cada archivo en css. Con los parciales le decimos a SASS que no cree una version indepentiente de ese archivo en CSS. Lo unico que debemos hacer es colocar _ en el nombre para que se entienda que ese archivo no sera convertido.


_reset.scss

Mixins

Los Mixins te permiten crear grupos de codigo que estas pensando en reutilizar a través de la definicion de tu CSS. Un ejemplo claro son las definiciones de CSS3 para cada navegador.


@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

Herencia/extend

Con esta caracteristica podemos utilziar definiciones completas de un elemento en otros.


.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

Operadores

Con el uso de operadores +,-,*,/ podemos realizar calculos sobre los tamaños de los elementos.


.container { width: 100%; }


article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

Bueno espero esta info sea de utilidad y ya estas listo para crear increible apariencia en Ionic.


viernes, 12 de agosto de 2016

Ionic 2 Beta 11

ionic

En este nuevo release de Ionic 2 Beta 11 el equipo de ionic se ha enfocado en la solución de bugs, en mejoras, en este release hay BREAKING CHANGES puedes ver todo el Changelog acá.

Overlays

Componentes de Overlay tal como Alert, Modal, etc. seran ahora inyectados en el componente. Ver lista de componentes afectados acá.

Tabs

Los tabs han sido actualizados para tomar la actualización de Materia Design.

Angular

Ionic esta utilizando ahora Angular RC 4.

Proximos a un Release Candidate.

Estamos proximos a una versión oficial despues de una ultima actualización Beta 12.

Soporte de URL.

Se han hecho mejoras al manejo de URLs por la importancia que tiene para Progressive Web Apps.

Bueno no queda más que actualizar nuestras apps en Ionic 2 y prepararnos para lo que se viene :)


viernes, 5 de agosto de 2016

Personalizando vistas en Ionic 2

sass logo

La personalización de nuestras Apps es uno de los aspectos en el exito en el mar de Apps que puedes encontrar en Google Play o App Store.

Ahora si quieres personalizar las vistas en Ionic 2 deberas utilizar SASS, lo cual hace muy facil realizar cambios a todos los componentes de Ionic.

La forma mas facil de empezar es modificar el archivo app/theme/app.variables.scss aca podras encontrar las variables principales para poder modificar.

$colors: (

  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,

);

Puedes cambiar los colores en este archivo y podras observar como se modifica la apariencia general de tu app. Te recomendamos comenzar con primary

Luego observaremos un poco más a fondo como personalizar nuestras apps y te invitamos a jugar con estas variables y a investigar un poco más sobre SASS.