Instalación Básica

1. Se requiere homologar la termina en la cual vamos a trabajar por lo que si usas Windows, es recomendable que descargues GIT: https://gitforwindows.org/

Esto instalará GIT BASH que será la terminal que usaremos durante el taller.

Instalación Básica

Permite a los desarrolladores escribir y ejecutar aplicaciones JavaScript en el servidor. También los desarrollador comenzaron a usar node.js para codificar herramientas que les ayude en el desarrollo web local.

Es una simple interfaz de línea de comandos que permite a los desarrolladores instalar y manejar paquetes en sus computadoras locales (tales como SASS). El desarrollo web moderno (herramientas, framework y librerías) no sería posible sin los manejadores de paquetes.

2. npm es parte de node.js por lo que necesitamos instalarlo: https://nodejs.org/es/, la LTS (Basta con seguir el asistente). Para probar la instalación, abra GIT BASH y escriba el comando:

node -v
// Debe mostrarle la verisón instalada de node

Instalación Básica

3. Instale el navegador Firefox Mozilla:

https://www.mozilla.org/es-ES/firefox/new/

4. Instale el editor de código Visual Studio Code:

https://code.visualstudio.com/

Recursos

5. Durante el taller se utilizarán imágenes que previamente puede descargar desde el siguiente enlace:

https://drive.google.com/drive/folders/1m9K7Vr2eUN0cPqrnm5sZJGaMsusxor95?usp=sharing

Sass

Sass (Syntactically Awesome Style Sheets) o CSS con súper poderes, es una excelente herramienta escrita en Dart y Ruby que nos permite crear hojas de estilos estructuradas, limpias y fáciles de mantener.

Referencia de Sass: https://uniwebsidad.com/libros/sass

Sass

Código fuente SASS

Código CSS compilado

Compilador SASS

Principales características de Sass

Variables: para reutilizar valores como colores, tamaños de fuente, espacios, etc.
Anidamiento (nesting): anidar selectores dentro de otros nos permite escribir menos código.
Operadores: para operaciones matemáticas dentro de CSS.
Partials e Imports: para escribir CSS en diferentes archivos y luego importarlos en un único archivo.
Mixins: para reutilizar piezas de código CSS
Functions: similares a los mixins, con la diferente que este devuelve un valor que puede ser usado más tarde.
Extends: para hacer que diferentes selectores hereden declaraciones que son comunes.
Control de directivas: para escribir código complejo usando condicionales y ciclos.

Instalar Sass (1)

1. Abrir la carpeta raíz del proyecto web y ejecutar desde la terminal el comando:

npm init

Este comando creará el archivo package.json: Vamos a definirlo como un archivo de definición o manifiesto para nuestro proyecto, en el cual especificamos referencias al proyecto como: autor, repositorio, versión y sobre todo las dependencias, entre otros.

Instalar Sass (2)

npm install node-sass --save-dev

2. Instalamos SASS.

Con la opción --save-dev estamos indicando que es una herramienta que usaremos solo en desarrollo (development)

¿Cómo escribir código Sass?

CSS

Sass

Scss

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

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

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

  li { display: inline-block; }

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

Configuremos SASS

mkdir sass
cd sass
touch main.scss

 "scripts": {
    "compile:sass": "node-sass sass/main.scss css/style.css -w"
  },

En package.json

Desde la terminal

Compilar

Desde la terminal

npm run compile:sass

Recargar página al realizar cambios

Desde la terminal

npm install live-server -g

¿Qué es un framework?

El Framework es una especie de plantilla, un esquema conceptual, que simplifica la elaboración de una tarea, ya que solo es necesario complementarlo de acuerdo a lo que se quiere realizar.

¿Cuadrícula CSS?

Una cuadrícula es un conjunto de líneas horizontales y verticales que crean un patrón sobre el que podemos alinear nuestros elementos de diseño

¿Cuadrícula CSS?

Una cuadrícula en general tiene columnas, filas y luego espacios entre cada fila y cada columna, conocidos comúnmente como canales.

¿Cuadrícula CSS?

Variables

$main-color: green;
$border-color: transparent;
$main-font: sans-serif;

Nesting (Anidamiento)

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

  li { display: inline-block; }

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

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Tipos de archivos en Sass

1-Maestros: Los maestros, son los archivos que Sass tomará para realizar el proceso de traducción o conversión de Sass a CSS. En ellos, se agregan estilos e importamos todos los parciales (partials) que necesitemos sean llevados a la hoja de estilo que se utilizará en el Sitio Web o Aplicación que estamos trabajando.

2-Partials: Sass nos brinda la posibilidad de crear archivos con pequeños fragmentos de estilos, y estos son procesados sólo cuando los incluimos a los archivos maestros.

Partials e Import

@import 'variables';

@import 'header';

@import 'content';

@import 'sidebar';

@import 'footer';

@import 'media';

_variables.scss

_content.scss

_header.scss

_sidebar.scss

_media.scss

style.css

_footer.scss

maestro

partials

El guión bajo (underscore) le dirá a Sass que el archivo es únicamente un parcial y que no debe ser procesado por sí solo.

Interpolación #{ }

$name: foo;
$attr: border;

p.#{$name} {
  #{$attr}-color: blue;
}

El código Sass se compila:

p.foo {
  border-color: blue;
}

Maps

Se trata de una lista con llaves y valores

$map: (key1: value1, key2: value2, key3: value3);

Maps

$colors: (
  twitter: #55acee,
  facebook:  #3a5795,
  send-mail: #C25E30
);

@each $name-color, $bg-color in $colors {
    btn-#{$name-color} {
        background-color: $bg-color;
    }
}

Maps

map-get($map, $key):

Devuelve el valor de una llave.

map-merge($map1, $map2):

Une dos variables.

map-remove($map, $key…):

Borra llaves de una variable.

map-keys($map):

Devuelve una lista de todas las llaves en una variable.

map-values($map):

Devuelve una lista de todos los valores en una variable.

map-has-key($map, $key):

Devuelve si una variable Map cuenta con una llave del mismo nombre del segundo argumento ($key).

keywords($args):

Devuelve las palabras claves pasadas a una función que toma o recibe argumentos de variables.

Existen varias funciones que nos permiten manipular los Maps fácilmente:

Maps

$breakpoints: (
  mobile: 240px,
  tablet: 600px,
  desktop: 1024px  
);
 
@mixin breakpoint($device) {

    @if map-has-key($breakpoints, $device) {
        @media screen and (min-width: #{map-get($breakpoints, $device)}) {
            @content;
        }
    } @else {
        @warn "Desafortunadamente el valor #{$device} es desconocido.";
    } 
}

body {
    @include breakpoint(mobile) {
      background-color: yellow;
    }  
    @include breakpoint(tablet) {
      background-color: blue;
    }  
    @include breakpoint(desktopp) {
      background-color: red;
    }
}

$map-has-key, para comprobar si el argumento que le pasaremos al Mixin se encuentra en el Map breakpoint creado anteriormente.
Luego, hacemos uso de $map-get, para obtener e imprimir el valor del argumento.
La directiva @content, nos permite pasarle un bloque de estilos al Mixin.

Extends

Permite crear un fragmento de estilos que luego podamos reutilizar fácilmente en cualquier componente. Nos permite escribir Sass con DRY

<div class="message message-error">Esto es un mensaje</div>

$bg-success: green;
$bg-error: red;
$bg-warning: orange;
// Clase helper
%message {
  border-radius: 3px;
  color: white;
  padding: 5px;
  text-align: center;
}
.message-success {
  @extend %message;
  background-color: $bg-success;
}
.message-error {
  @extend %message;
  background-color: $bg-error;
}
.message-warning {
  @extend %message;
  background-color: $bg-warning;
}

Mixins

Nos permiten definir estilos que puedan ser reutilizados en nuestro proyecto, sin necesidad de recurrir a las clases helpers que ya comentamos, también pueden contener complejas reglas de CSS.

Mixins

@mixin sizes($width, $height: $width) {
    height: $height;
    width: $width;
}

@mixin prefixer($property, $value, $prefixes: webkit moz ms o) {
    #{$property}: $value;
    @each $prefix in $prefixes{
        -#{$prefix}-#{$property}: $value;
    }
}

@mixin transition($value) {
    @include prefixer(transition, $value);
}

.box {
    background-color: green;
    
    // declarando mixins
    @include sizes(200px);
    // @include transition(0.4s);
    @include transition(2s);
    @include prefixer(border-radius, 3px, webkit moz);
    &:hover {
      @include sizes(300px);
    }
}

Mixins vs Extends

Una de las mayores diferencias con los Extends, es que los Mixins pueden recibir argumentos, los cuales te permitirán producir una gran variedad de estilos con unas simples líneas.

La impresión en CSS de los Mixins, no es la misma que tienen los Extends. Estos se imprimen separados en cada uno de los lugares donde fueron declarados.

Operadores

Realizar operaciones matemáticas en CSS, es posible gracias a Sass. Contamos con diversos operadores: (+, -, *, / y %) que trabajan de la misma forma que las operaciones matemáticas básicas que aprendimos en la escuela.

Operadores

Supongamos que deseamos crear un simple grid, basado en 960px y que el ancho de cada elemento sea expresado en porcentajes:

$wrap: 960px; 
 
article[role="main"] {
  float: left;
  width: 630px / $wrap * 100%;
}
 
aside[role="complimentary"] {
  float: left;
  width: 330px / $wrap * 100%;
}

article[role="main"] {
  float: left;
  width: 65.625%;
}
 
aside[role="complimentary"] {
  float: left;
  width: 34.375%;
}

sass

css

Funciones

Su labor es permitirnos separar la lógica de los estilos, lo cual nos ayuda a elaborar mejores estructuras de proyectos que sean más fáciles de leer y entender.

Funciones

$width: 1000;
@function half($width){
    @return $width/2 + px;
}

@function one-third($width){
    @return $width/3 + px;
}

@function one-fourth($width){
    @return $width/4 + px;
}

.half-width {
    width: half($width);
}

.one-third-width {
    width: one-third($width);
}

.one-fourth-width {
    width: one-fourth($width);
}

Funciones (II)

.test {
    // margin: abs(-10) + px;
    // margin: ceil(4.2) + px;
    // margin: floor(4.2) + px;
    // margin: round(4.5) + px;
    // margin: max(1px, 40px);
    // margin: min(1px, 4px, 0.5px);
    // margin: percentage(0.5);
    // margin: comparable(2px, 1em);
    // margin: random(10);
    // margin: unit(2px);
    margin: unitless(0);
}

Funciones (III)

.test {
    // font-family: quote(Arial);
    // font-family: unquote("Arial");
    // font-family: to-upper-case("Arial");
    // font-family: to-lower-case("Arial");
    // font-family: str-length(Arial);
    // font-family: str-index("sans-serif", "sans");
    // font-family: str-insert("Helvetica Neue", " Mono", 10);
    // font-family: str-slice("Helvetica Neue", 3);
    // font-family: str-slice("Helvetica Neue", 3, 10);
    // font-family: str-slice("Helvetica Neue", 3, -7);
    font-family: unique-id();
}

Referencias

https://styde.net/aprende-front-end-css-sass/
Para crear un Grid Avanzado: https://styde.net/aprende-a-crear-un-grid-system-con-sass/
https://rockcontent.com/es/blog/framework/

CSS Grid

CSS Grid Layout es un sistema de rejilla bidimensional donde puedes colocar los elementos del grid en celdas definidas por filas y columnas, es decir, la idea principal de CSS Grid es dividir la pantalla en líneas horizontales y verticales para crear las filas y columnas.

Ventajas de CSS Grid

Con CSS Grid Layout el proceso de colocar y distribuir los elementos en una página es muy sencillo. También nos brinda otros beneficios, como lo son:

Mayor flexibilidad.
Reducción considerable del código empleado.
Responsive más sencillo de realizar.
Buen soporte en los navegadores.

.container {
    display: grid;
}

Terminología

grid-container
Es el elemento padre contenedor. Se encarga de manejar cómo sus hijos son alineados y contiene el número de filas y columnas que tendrá el layout.

Terminología

grid-item
Son todos los hijos directos de nuestro contenedor (grid-container).

Terminología

grid-line
Son las líneas verticales y horizontales que dividen nuestro grid, para separarlo en columnas y filas.

Terminología

grid-line
Son las líneas verticales y horizontales que dividen nuestro grid, para separarlo en columnas y filas.

Terminología

grid-track
Es el espacio entre dos líneas de nuestro grid, las cuales pueden ser verticales u horizontales. Piensa en ellos como las columnas o filas del grid.

Terminología

grid-area
Se compone por varias celdas que están consecutivas; ya sean horizontales, verticales o ambas.

Terminología

grid-cell
Es el espacio definido entre dos líneas horizontales consecutivas y dos líneas verticales consecutivas, es decir, los «cuadros» que se forman en la intercepción de estas líneas.

Terminología

Referencias

https://styde.net/introduccion-a-css-grid/