Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de diseño de cuadrícula CSS: Holy Grail Angular 10 UI

 Este tutorial de diseño de CSS Grid está diseñado para desarrolladores de Angular 10 que desean aprender a crear diseños receptivos con CSS moderno. Primero comenzaremos con una introducción general para aprender sobre los conceptos básicos y luego veremos cómo usarlo dentro de una aplicación Angular 7/8 para crear el famoso diseño del santo grial.

En este tutorial, le enseñaremos cómo usar el diseño de cuadrícula CSS para crear fácilmente interfaces y diseños HTML receptivos sin tener que recurrir al uso de trucos CSS antiguos y complejos para lograr los mismos resultados, pero en su lugar utilizando estilos CSS limpios y fáciles de mantener.

Los diseños de cuadrícula son comunes en el diseño de sitios web y aplicaciones web, y gracias al diseño de cuadrícula CSS en los navegadores web modernos, ahora tenemos una manera fácil de crear estos diseños.

El diseño de CSS Grid ahora es compatible con los principales navegadores como Safari, Chrome, Firefox y Edge, por lo que los desarrolladores pueden comenzar a usarlo con más confianza y también pueden usar alternativas para los navegadores más antiguos.

En esta primera parte de nuestro tutorial, repasaremos los conceptos básicos de CSS Grid antes de construir nuestra interfaz de usuario angular con él.

Con diseño de cuadrícula CSS:

  • Podrá crear fácilmente diseños bidimensionales sin utilizar complejos trucos CSS y tablas HTML,
  • Puede crear diseños con marcado HTML simple,
  • No es necesario utilizar marcos CSS como Bootstrap.

En este tutorial de CSS Grid, aprenderá:

  • ¿Qué es un contenedor de cuadrícula y cómo crearlo?
  • ¿Qué es una cuadrícula implícita y explícita?
  • Qué son las pistas de cuadrícula y cómo usarlas,
  • ¿Qué son los huecos de la red o las canaletas?
  • Cómo colocar elementos usando números de línea de cuadrícula,
  • Cómo distribuir elementos en filas y columnas,
  • Cómo nombrar líneas de cuadrícula,
  • Cómo posicionar elementos por nombres de línea,
  • Cómo nombrar y colocar elementos por áreas de cuadrícula, etc.

En un diseño de cuadrícula CSS, tendrá dos cosas principales, la cuadrícula del contenedor y los elementos. Por ejemplo:

<div style="display: grid;">
  <div style="background: #00112211;">1</div>
  <div style="background: #00112233;">2</div>
  <div style="background: #00112288;">3</div>
  <div style="background: #00112299;">4</div>
  <div style="background: #001122dd;">5</div>
</div>

Al establecer la displaypropiedad CSS en grid, convertimos el div externo en un contenedor de cuadrícula .

Nota : Puede crear un contenedor de cuadrícula simplemente aplicando la displaypropiedad CSS a un elemento HTML como a <div>y le da un valor de gridinline-grid.

Como no aplicamos ninguna otra propiedad, tendremos una cuadrícula predeterminada que muestra los elementos en filas similares a una pila vertical. Cada artículo toma el ancho completo disponible.

Nota : Los elementos de la cuadrícula son simplemente los elementos secundarios de nivel superior del contenedor de la cuadrícula.

Esta es una captura de pantalla de nuestra cuadrícula:

Ejemplo de diseño de cuadrícula CSS

Si cambia la displaypropiedad a inline-grid, los elementos no ocuparán todo el ancho disponible:

Podemos ver este diseño como una cuadrícula unidimensional con una columna y 5 filas. Pero CSS Grid nos permite crear cuadrículas bidimensionales con múltiples filas y columnas.

Columnas y filas de CSS Grid

Una cuadrícula CSS puede tener varias columnas y filas. Podemos usar las propiedades grid-template-rowgrid-template-columnpara controlar el diseño de la cuadrícula definiendo el número de columnas de filas y su tamaño.

Podemos actualizar la cuadrícula anterior sin cambiar nada en el marcado HTML excepto CSS. Pero, primero, dado que necesitaremos agregar más CSS, coloquemos los estilos en línea en una clase CSS separada.

Este es el marcado HTML:

<div class = "grid">
  <div class="item" style="background: #00112211;">1</div>
  <div class="item" style="background: #00112233;">2</div>
  <div class="item" style="background: #00112288;">3</div>
  <div class="item" style="background: #00112299;">4</div>
  <div class="item" style="background: #001122aa;">5</div>
</div>

El div externo tiene una gridclase y cada div interno tiene una itemclase. Depende de usted elegir el nombre de sus clases y puede elegir cualquier nombre que considere conveniente.

Veamos cómo usar la grid-template-rowspropiedad para crear pistas de fila:

.grid {
  display: grid;
  grid-template-rows: 20px 20px 40px 20px 40px;
}

Creamos una pista de fila para cada elemento especificando un valor en píxeles (que representa la altura de la fila) en la grid-template-rowsplantilla. También puede utilizar otras unidades como %em, etc.

Al igual que las filas, puede crear pistas de columna especificando valores en la grid-template-columnsplantilla.

.grid {
  display: grid;
  grid-template-rows:    20px 20px 40px 20px 40px;
  grid-template-columns: 100px;  
}

Hemos creado una pista de columna con un ancho de 100px:

Si desea que la columna tome todo el ancho disponible en el contenedor, puede usar la unidad de fracción indicada por fr :

.grid {
  display: grid;
  grid-template-rows:    20px 20px 40px 20px 40px;
  grid-template-columns: 1fr;
}

Tenemos nuestra cuadrícula anterior:

! [] (

Ahora, cambiemos nuestro marcado de la siguiente manera:

    <div class = "grid">
      <div class="item" style="background: #00112211;">1:1</div>
      <div class="item" style="background: #00112233;">1:2</div>
      <div class="item" style="background: #00112288;">1:3</div>
      <div class="item" style="background: #00112299;">2:1</div>
      <div class="item" style="background: #001122aa;">2:2</div>
    </div>

A continuación, cambie la cuadrícula CSS de la siguiente manera:

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows:    1fr 1fr 1fr;
    }

Las propiedades grid-template-columnsgrid-template-rowsnos permiten crear una plantilla para hacer nuestra cuadrícula. Si miras esta parte del código:

  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows:    1fr 1fr 1fr;

Podrás representar que tenemos una cuadrícula, cada 1frunidad forma una celda. También podemos verlo como una matriz de 3x3 (3 filas y 3 columnas) si está familiarizado con este concepto en Matemáticas. Cada celda de la matriz contiene cuánto espacio ocupa la celda en el diseño de la cuadrícula. Usamos la frunidad.

Con CSS Grid Layout, tenemos una nueva frunidad que significa * unidad fraccionaria:

  • 1fr significa 1 parte del espacio disponible,
  • 2fr significa 2 partes del espacio disponible, etc.

¿Cómo se calcula el espacio de cada celda?

En nuestro ejemplo, tenemos tres columnas y cada columna ocupa igualmente 1fr, lo que significa que cada columna ocupa 1/3 del espacio disponible.

También tenemos tres filas y cada fila ocupa 1fr, lo que significa que cada fila ocupa 1/3 del espacio disponible.

Así es exactamente como se verá nuestro diseño de cuadrícula cuando se represente en HTML, excepto que no tenemos elementos para llenar la sexta celda en la posición 2: 3 y la última fila:

Podemos identificar cada celda por sus números de fila y columna en el formato fila: columna .

De forma predeterminada, a cada <div>elemento se le ha asignado una posición en la cuadrícula comenzando desde la izquierda. El elemento superior se coloca en la celda 1: 1, pero también puede cambiar las posiciones predeterminadas.

Huecos de cuadrícula CSS (canalones)

Puede agregar espacio entre los elementos de la cuadrícula usando las propiedades grid-column-gapgrid-row-gapque crean medianiles entre columnas y filas.

.grid {
  display: grid;
  grid-template-rows:    1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-row-gap:    10px;
  grid-column-gap: 10px;  
}

Nota : También puede utilizarlo grid-gapcomo abreviatura de grid-row-gap y grid-column-gap. Por ejemplo: grid-gap: 10px 10px;.

Colocación de elementos en el diseño de cuadrícula CSS

El diseño de cuadrícula CSS le permite controlar la posición y el tamaño de cada celda individualmente utilizando las siguientes propiedades:

  • grid-column-start,
  • grid-column-end,
  • grid-row-start,
  • grid-row-end.

O también sus abreviaturas grid-columngrid-row.

Veamos esto con un ejemplo. Apliquemos los siguientes estilos al primer elemento:

div:nth-child(1) {
  grid-column-start: 2;
  grid-column-end: 3; 
}

Esto colocará el primer elemento en la segunda columna en lugar de la primera columna y también hará que todos los demás elementos se desplacen en una columna:

Abarcando elementos en CSS Grid Layout

Los elementos de la cuadrícula abarcan solo una columna y pistas de fila de forma predeterminada, pero pueden abarcar varias filas y / o pistas de columna utilizando el mismo grid-row-*grid-column-*simplemente estableciendo la posición final en una línea que está a más de una fila o columna de distancia del inicio.

Por ejemplo, hagamos que el primer elemento abarque las dos primeras columnas agregando los siguientes estilos:

div:nth-child(1) {
  grid-column-start: 1;
  grid-column-end: 3; 
}

También distribuyamos el primer elemento en las dos primeras filas y el último elemento en las dos últimas filas:

div:nth-child(1) {
  grid-column-start: 1;
  grid-column-end: 3; 

  grid-row-start: 1;
  grid-row-end: 3; 
}

div:nth-child(5) {
   grid-row-start: 2;
  grid-row-end: 4; 
}

Esta es nuestra cuadrícula en este punto de este tutorial:

.grid {
  display: grid;
  grid-template-rows:    1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;

  grid-row-gap:    1px;
  grid-column-gap: 1px;  
}


div:nth-child(1) {
  grid-column-start: 1;
  grid-column-end: 3; 
}

div:nth-child(3) {
  grid-column-start: 1;
  grid-column-end: 3; 
}

div:nth-child(5) {
  grid-column-start: 1;
  grid-column-end: 4; 
}

Áreas de cuadrícula CSS

El diseño de cuadrícula CSS tiene otras características como áreas que brindan más flexibilidad al crear diseños. Podemos darle a cada celda de la cuadrícula un nombre de la siguiente manera:

.grid {
  display: grid;
  grid-template-rows:    1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;

  grid-template-areas:   "header header header"
                         "content content sidebar"
                         "footer footer footer";

  grid-row-gap:    1px;
  grid-column-gap: 1px;  
}

A continuación, podemos colocar los elementos dentro de la cuadrícula usando nombres de área y la grid-areapropiedad de la siguiente manera:

div:nth-child(1) {
  grid-area: header
}

div:nth-child(2) {
  grid-area: content
}

div:nth-child(3) {
  grid-area: sidebar
}

div:nth-child(4) {
  grid-area: footer;
  width: 50%;
  justify-self: start
}
div:nth-child(5) {
  grid-area: footer;
  width: 50%;
  justify-self: end 
}

Los elementos cuarto y quinto están asignados al área del pie de página, por lo que debemos ajustar sus anchos y luego usar propiedades de alineación, como justify-selfdividir el espacio del pie de página entre los dos elementos:

Después de ver los conceptos fundamentales del diseño de cuadrícula CSS, ahora creemos el famoso diseño del santo grial con Angular 8.

Prerrequisitos

Comencemos con los requisitos previos de este tutorial. Necesitas tener:

  • Node 8.9+ y NPM 5.5.1+ instalados en su máquina de desarrollo,
  • Conocimientos prácticos de TypeScript y Angular,
  • CLI angular instalado en su sistema. En el momento de escribir este tutorial, angular / cli v8.3.2 está disponible.

Puede instalar Angular CLI usando el siguiente comando:

$ npm install -g @angular/cli

Creando un proyecto de Angular 8

Creemos ahora un proyecto de Angular 8. Abra una nueva terminal y ejecute el siguiente comando:

$ ng new angular-cssgrid-demo

Se le preguntará si desea agregar enrutamiento angular. Escriba y para Sí y ¿Qué formato de hoja de estilo le gustaría usar? Elija la primera opción que es CSS .

A continuación, vaya a la carpeta de su proyecto y ejecute los siguientes comandos para iniciar el servidor de desarrollo:

$ cd angular-cssgrid-demo
$ ng serve

Con su navegador web, puede visitar su aplicación en http: // localhost: 4200 / address:

Antes de proceder a construir nuestro ejemplo de diseño de cuadrícula CSS, primero limpiemos nuestro proyecto del código de marcador de posición. Dirígete al src/app/app.component.htmly elimina el marcador de posición del archivo. Este es el contenido del archivo en este punto del tutorial:

 <router-outlet></router-outlet>

Creando los componentes

El diseño del santo grial es un patrón de diseño web que se usa comúnmente en sitios web. La interfaz de usuario del sitio web se divide en;

  • Un encabezado,
  • Una barra de navegación,
  • Contenido principal en el medio,
  • Un pie de página.

Los componentes son los bloques de construcción básicos de las aplicaciones angulares. En nuestra aplicación, podemos componer la interfaz de usuario usando las siguientes partes:

  • Componentes de encabezado, barra de navegación y pie de página,
  • Inicio y acerca de las páginas.

Las páginas de inicio y acerca de también son componentes pero están conectadas a rutas específicas, por lo que los usuarios pueden navegar entre ellas y el enrutador Angular se encargará de insertar el componente apropiado en el enrutador-salida cuando se active la ruta correspondiente.

Mientras que los componentes de encabezado, barra de navegación y pie de página son partes comunes (reutilizables) entre todas las páginas de la aplicación, por lo que deben pertenecer al shell de la aplicación en el src/app/app.component.htmlarchivo.

Procedamos a crear los componentes. Abra una nueva terminal y ejecute los siguientes comandos:

$ ng generate component home
$ ng generate component about
$ ng generate component header
$ ng generate component navbar
$ ng generate component footer

Por ejemplo, para el componente de encabezado, tendremos los siguientes archivos:

  • src/app/header/header.component.html,
  • src/app/header/header.component.spec.ts,
  • src/app/header/header.component.ts,
  • src/app/header/header.component.css.

La CLI agregará componentes automáticamente al módulo principal de la aplicación en el src/app/app.module.tsarchivo:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HeaderComponent } from './header/header.component';
import { NavbarComponent } from './navbar/navbar.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    HeaderComponent,
    NavbarComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ahora agreguemos los componentes home y about a la configuración del enrutador en el módulo de enrutamiento que generó la CLI cuando creamos nuestro proyecto. Abra el src/app/app-routing.module.tsarchivo y actualice de la siguiente manera:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';


const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full'},
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

A continuación, debemos agregar los componentes headernavbarfooteral shell de la aplicación. Abra el src/app/app.component.htmlarchivo y actualícelo de la siguiente manera:

<app-header></app-header>
<app-navbar></app-navbar>
<router-outlet></router-outlet>
<app-footer></app-footer>

Puede encontrar el selector para hacer referencia al componente desde las plantillas de los otros componentes desde el selectoratributo del objeto de metainformación pasado al decorador de componentes. Por ejemplo, para el componente de encabezado, el atributo selector tiene el app-headervalor:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Si guarda sus cambios, su aplicación se volverá a cargar en vivo y debe ser redirigido a la página de inicio y ver la siguiente interfaz:

El contenido del encabezado, la barra de navegación y el pie de página será común entre las páginas de inicio y acerca de.

Ahora, agreguemos contenido de marcador de posición a nuestros componentes y páginas. Abra el src/app/home/home.component.htmlarchivo y agregue el siguiente marcado:

<h2>Home</h2>

<p>This demo is making use of CSS Grid layout for creating the layout.</p>
<p> Go to the `src/app/app.component.css` file for the CSS code of this layout.</p>

A continuación, abra el src/app/about/about.component.htmlarchivo y agregue el siguiente marcado:

<h2>About us</h2>
<p>This is the about page of our application.</p>

A continuación, abra el src/app/navbar/navbar.component.htmlarchivo y agregue el siguiente marcado:

<a  [routerLink]="['/home']">HOME</a>
<a  [routerLink]="['/about']">ABOUT US</a>

A continuación, abra el src/app/header/header.component.htmlarchivo y agregue el siguiente marcado;

<header>
    <h1>Angular App</h1>
</header>

A continuación, abra el src/app/footer/footer.component.htmlarchivo y agregue el siguiente marcado;

<footer>
    <span>
        Copyright 2019
    </span>
</footer>

Abra el src/app/app.component.cssarchivo y agregue los siguientes estilos:

app-root {
    height: 100%;
    width: 100%;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 100px max-content 1fr max-content;
    grid-template-areas:
      "header"
      "navbar"
      "main"
      "footer";
}

app-header {
    grid-area: header;
}

app-navbar {
    grid-area: navbar;
}

router-outlet + * {
    grid-area: main;
}

app-footer {
    grid-area: footer;
}

Abra src/app/header/header.component.cssy agregue el siguiente código CSS:

:host {
    background: #9154f3;
    color: whitesmoke;

    border-top: 0px solid #9154f3;
    font-size: 21px;
    font-weight: 500;
    line-height: 49px;
    border-bottom-width: 1px;
    padding: 0 17px;
}

Abra el src/app/footer/footer.component.cssarchivo y agregue el siguiente código CSS:

:host {
    background: #9154f3;
    color: whitesmoke;
    border-top: 1px solid #9154f3;
    padding: 9px 16px;
    box-sizing: border-box;
  }

A continuación, abra src/app/navbar/navbar.component.cssy agregue el siguiente código CSS:

:host {
    border: 0 solid #e1e1e1;
    border-bottom-width: 1px;
    height: 49px;
    padding: 0 16px;

    display: flex;
    flex-flow: row;
    align-items: center;
  }

  a {
    color: #c697d8;
    font-size: 19px;
    font-weight: 900;
    line-height: 49px;
    margin-right: 27px;
    text-decoration: none;
  }

A continuación, abra las src/app/home/home.component.cssy los src/app/about/about.component.cssarchivos y añadir el siguiente código CSS:

:host {
    padding: 3px 19px;
}

En este punto, esperaríamos obtener el diseño correcto, pero esto no es realmente lo que sucede:

! [} (https://www.diigo.com/file/image/rscqpoqzocbpdrbeozdsdrssdr/Angulardemo.jpg)

Para solucionar esto necesitamos aplicar ViewEncapsulation.Noneal Appcomponente. Abra el src/app/app.component.tsarchivo y actualice de la siguiente manera:

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}

Esta es una captura de pantalla de nuestra IU angular del santo grial:

Conclusión

En este tutorial, presentamos el diseño CSS Grid a los desarrolladores de Angular y vimos los conceptos fundamentales de cómo crear diseños modernos usándolo. A continuación, hemos creado un diseño del santo grial utilizando CSS Grid y Angular 8.

Publicar un comentario

0 Comentarios