Empezar a utilizar Sass en un proyecto IONIC Cordova

Como Bootstrap o muchos otros frameworks, Ionic viene ya con SASS. Estos frameworks para utilizar CSS de manera avanzada, con herramientas de programación, cada vez son más presentes y permeables. En este pequeño artículo vamos a echar un vistazo a la presencia de SASS en Ionic.

Instalación de SASS

Instalamos SASS en nuestro sistema, para que Ionic pueda utilizarlo.

Uso de SASS en Ionic

En cuanto a Ionic y CSS, podemos utilizar directamente el css vacío (/* Empty. Add your own CSS if you like */) que nos aparece en:

nombre_app\www\css\style.css

O podemos trabajar con Sass directamente, que es el que va a generar el css final. Este css final generado por Ionic lo encontramos en:

nombre_app\www\css\ionic.app.css

Para sobrescribir las variables de estilo de scss no vamos directamente a los scss sino que los sobrescribimos en los archivos del directorio nombre_app\scss, que terminan todos unidos en:

nombre_app\www\lib\ionic\scss\ionic.scss

Por ejemplo, si abrimos el fichero:

nombre_app\www\lib\ionic\scss\_variables.scss

podremos en él cambiar variables globales, y empezaremos a disfrutar de poder progamar, o por lo menos acercarnos más a lo que es programar, en CSS.

IMPORTANTE: si queremos trabajar directamente con sass en la compilación de la app en tiempo real, debemos hacer un gulp sass;

gulp sass

Declarando SASS en la página index.html

En la página index.html declararemos nuestro CSS de una manera u otra dependiendo de si queremos escribir directamente css o de si queremos trabajar directamente con SASS.

Así, en el HEAD, debemos escribir:

Si no utilizamos sass:

<link href=“lib/ionic/css/ionic.css” rel=“stylesheet”>

<link href=“css/style.css” rel=“stylesheet”>

Si utilizamos sass:

<link href=”css/ionic.app.css” rel=”stylesheet”>

 

Instalar SASS en Windows

SASS, junto con LESS, es una manera de llevar las ventajas de la programación a CSS, dándonos las ventajas del uso de variables o de subclases. En este link podéis leer una buena comparativa entre ambos.

Por nuestra parte, simplemente os echamos una mano para instalar vuestro SASS en Windows para empezar a utilizarlo.

Con RUBY

SASS está escrito en Ruby, de manera que para instalar SASS en nuestro sistema necesitamos primero instalar Ruby (aunque hace poco han sacado http://sass-lang.com/libsass como un puerto C/C++ para Sass). Instalamos Ruby desde su oágina oficial.

Una vez instalado podemos ir a la consola de Windows e instalar Sass desde gem, el gestor de packages de Ruby:

gem install sass

Para asegurarnos de que todo ha ido bien consultamos la versión instalada de sass:

sass -v

que nos tiene que dar, en el momento de este tutorial:

sass 3.4.7 (Selective Steve)

En el caso de que tengamos sass pero queramos actualizarlo a la última versión:

gem update sass

Con Node

Recientemente tenemos la posibilidad de instalar SASS mediante npm:

npm install node-sass

Cómo debugar una web app en Chrome

Cuando hacemos una web app, ya sea con jQuery Mobile, con Ionic, con Sencha Touch, etc., una de las cosas que más quisiéramos tener es poder actuar con la web app con F12 y ver y depurar todos los procesos. Es cierto que podemos abrir la app con el navegador, pero no es lo mismo, ya que muchas llamadas u otros procesos se pierden.

Pues bien, entre otros métodos que analizaremos en futuros artículos, hoy queremos comentar la herramienta que nos ofrece Google Chrome. Así es, debugar una aplicación web con Google Chrome es posible a partir de Android 4.0!

Tenéis toda la documentació en la página de desarrollo de Chrome, pero vamos a ver los pasos principales.

Paso 1: Requisitos

Como desarrolladores de web apps, ya tendréis habilitada la conexión USB developer entre el teléfono y el ordenador (en caso de que no fuera así, el tutorial de Chrome incluye también instrucciones, o podéis también consultar aquí: http://www.fandroides.com/que-es-y-como-habilitar-la-depuracion-usb-en-android/; recordad también de instalar los controladores usb de vuestro dispositivos, que normalmente se encuentran en la web del fabricante o incluido en los paquetes de instalación (como el KIES en el caso de Samsung). Para la conexión es lo único que necesitamos.

Paso 2: Google Chrome

En Chrome nos vamos a:

Menú -> Más Herramientas ->Inspeccionar dispositivos

Se abrirá la pestaña de DevTools y el apartado devices.

Menú > Más Herramientas > Inspeccionar Dispositivos

Menú > Más Herramientas > Inspeccionar Dispositivos

Paso 3: Debugar

Nos aseguramos de que “Discover USB devices” está marcado, y nos aseguramos de que nuestro dispositivo ha sido encontrado.

Si tenemos alguna web view activa (nuestra app u otra), ésta se mostrará; si no en cuanto la abramos se mostrará.

Una vez se muestre la app, podemos hacer click en “inspect”, y se mostrará nuestro conocido F12 (en caso de que no sea conocido, podéis echarle un vistazo a este tutorial: https://developer.chrome.com/devtools )

Chrome DevTools - Inspect Devices

Chrome DevTools – Inspect Devices

Como hemos dicho, hay otras herramientas, pero esta es una rápida y magnífica manera de conseguir debigar de verdad una web app!

 

Entendiendo display, float y positions en CSS


Primer concepto: page flow

El HTML se basa en etiquetas. Cada etiqueta ocupa un espacio en la página web, al que se llama caja. Por defecto cada caja ocupa el alto de lo que contiene y el 100% de ancho. Por lo tanto, cada caja se situa debajo del anterior.

Este es un tag normal de HTML

Este es otro tag normal de HTML

Incluso si incluimos un width pequeño, aunque veamos el tag de cierta manera, la caja de ese tag estará ocupando el 100%.

Este es un tag normal de HTML con width al 50%

Este es otro tag normal de HTML al 45%

Aunque pongamos los width de los dos tags de manera que ambos sumen menos de 100%, seguirán el uno debajo del otro, pues la caja de cada tag sigue ocupando el 100%, como vemos si pasamos el selector en el Developer Tools.

ejemplo del 100% de una tag HTML

Para romper esta tendencia tenemos dos maneras: o cambiar el display del tag HTML o posicionarlo

Display

La propiedad display de CSS cambia la manera en que esa caja se muestra. Hay varios. Podéis ver la lista completa con explicaciones en w3schools. Básicamente, el display permite que se rompa la regla de que la caja del HTML ocupe el 100% del lugar en que está y pasa a adaptarse a lo que contiene.
Los principales son:

  • inline: muestra el elemento dentro del inline (como <span>), es decir, haciendo que la caja se adapte a lo que contiene pero que siga inline. Respeta margins y paddings left y right pero no top ni bottom; no permite height ni width, y permite a otros elementos estar a su derecha o a su izquierda.
  • block: muestra un elemento como un bloque contenedor (como <p>), haciendo que la caja se adapte a lo que contiene pero sigue ocupando todo el 100%. Permite width y height, y todos los margin y padding.
  • inline-block: muestra un elemento que actúa como un bloque contenedor pero que se mantiene dentro del inline; el interior del bloque está formateado como un bloque inline, la parte exterior está formateada como un bloque, y el elemento en sí como una caja inline. Permite a otros elementos estar a su derecha o a su izquierda. Permite width y height, y todos los margin y padding.
  • none: el elemento no se muestra y desaparece la caja del espacio que ocupaba.
  • todos los relacionado con table
display: inline
display: inline
display: inline

display: block
display: block
display: block

display: inline-block
display: inline-block
display: inline-block

Float

Para romper la tendencia natural de las cajas de los tags HTML, a menudo tenemos suficiente con displays. Pero a veces nos interesa que cierto elemento se situe a la izquierda o a la derecha de su contenedor y que el resto de elementos floten a su alrededor. Es el caso, por ejemplo, de las imagenes que deben estar rodeadas de texto.

La propiedad float de CSS admite height y width, se adapta al contenido y float todo a la derecha o a la izquierda del contenedor. El resto de elementos que están situados después de él lo rodean.

texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes
probando float
texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después

texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes
probando float
texto después texto

texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes
probando float
texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después

Si nos fijamos en el ejemplo, veremos que el resto de elementos que viene después de un float se sitúan también rodeando el elemento:

la propiedad float afecta a todos los elementos que vienen detrás

Cuando queremos romper esa inercia, le damos al elemento que queremos que no entre en el float la propiedad clear.

texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes
probando float
texto después texto

texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes texto antes
probando float
texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después texto después

La propiedad float se ha ido usando tradicionalmente para construir layouts de diversas columnas, aunque cada vez más se utiliza la propiedad display:inline-block para hacerlo. Aquí tenéis una defensa del vs inline-block seguida de una interesante discusión.

Position

Uno de los cambios que aportó el CSS respecto a las primeras páginas web fue la capacidad no ya de mostrar de una manera u otra las cajas, sino de situarlas en relación unas con otras. Las positions son quizás el aspecto más complejo del layout en CSS, pero también el más útil.

La lista de reglas y comportamientos, las posibilidades combinatorias o las excepciones, todo son listas largas y complejas. Sin embargo, para iniciar una aproximación, puede resultar útil este primer vistazo:

  • position:static ⇒ es la posición por defecto en el page flow
  • position:relative ⇒ el elemento se posiciona respecto a sí mismo
  • position:absolute ⇒ el elemento se posiciona respecto a un padre a su vez posicionado
  • position:fixed ⇒ el elemento se posiciona respecto al viewport

position: static

Es la posición por defecto. Se situa respecto a los demás elementos según el page flow. Normalmente el posicionamiento se efectúa a través de las propiedades top, bottom, left y right, que indican la distancia entre el elemento situado relative y su sibling.

Container 1
STATIC
Container 2
STATIC
Container 3
STATIC

Texto situado al final del page flow

position: relative

Los elementos se posicionan en relación a su posición original. Los tags se mueven, pero se mantiene la posición original de la caja, ocupando el mismo lugar en el page flow (en el ejemplo el texto sigue en la misma posición porque las cajas soguen ocupando el lugar).

Container 1
RELATIVE
left: 0;
Container 2
RELATIVE
top: -80px;
left: 50px;
Container 3
RELATIVE
top: -160px;
left: 100px;

Texto situado al final del page flow

Esta técnica se utiliza también para establecer relaciones entre siblings (hermanos, elementos que están en un mismo nivel).

position: absolute

Los elementos se posicionan en relación a un parent (padre, el elemento contenedor) que esté posicionado (si no está posicionado, se le puede incluir position:relative para que los child o hijos se posicionen absolute).

Container 1
ABSOLUTE
top: 20px;
left: 0;
Container 2
ABSOLUTE
top: 20px;
left: 150px;
Container 3
ABSOLUTE
top: 20px;
left: 300px;

Texto situado al final del page flow

Texto debajo del div relative siguiendo el page flow.

Los elementos posicionados absolute y sus cajas desaparecen de su posición original en el page flow y pasan a flotar.

position: fixed

Los elementos se posicionan en relación al viewport (esto es, en relación a la ventana del navegador).

Container 1
FIXED
top: 0;
left: 0;
Container 2
FIXED
top: 0;
left: 150px;
Container 3
FIXED
top: 0;
left: 300px;

Haz click aquí para ver los divs posicionados fixed

Texto situado al final del page flow


Diseño Web: 10 recursos on-line imprescindibles

Como diseñador web, una de las cosas que agradezco de vez en cuando es una lista, decálogo o pentálogo, de recursos para mejorar mi trabajo. Normalmente siempre se puede sacar algo de ellos. En agradecimiento, pongo aquí diez de las utilidades que uso a menudo en mi trabajo, por si alguien no las conociera. Si así fuera, os recomiendo que las probéis.
Continue reading