Post Top Ad

Your Ad Spot

jueves, 8 de octubre de 2020

Tutorial de diseño de cuadrícula CSS: estilo de una plantilla de Django

 A lo largo de este tutorial, aprenderemos sobre CSS Grid Layout . Usaremos una plantilla de Django.

Existen muchas técnicas populares para crear diseños adaptables. En este tutorial, crearemos una aplicación web Django simple con una interfaz de usuario moderna diseñada con diseño CSS Grid.

Al crear la interfaz de usuario con CSS Grid, aprenderá muchas técnicas útiles y sencillas para lograr requisitos populares, como centrar y expandir elementos, cambiar diseños según el tamaño de la pantalla y crear interfaces de usuario receptivas.

Antes, nos sumergimos en los pasos prácticos, primero introduzcamos CSS Grid.

¿Qué es CSS Grid?

CSS Grid es un moderno sistema bidimensional para crear diseños HTML. Ahora es compatible con la mayoría de los navegadores web. ¡Hace que crear diseños profesionales y complejos sea más fácil que nunca!

El diseño de cuadrícula CSS le permite crear diseños de cuadrícula avanzados en CSS en lugar de HTML como el caso de las tablas, por ejemplo.

A diferencia de los flotantes CSS y las tablas HTML, puede crear un diseño de cuadrícula de una manera sencilla. Simplemente necesita usar un elemento HTML con su displaypropiedad establecida en gridinline-gridDe esta manera, cualquier elemento contenido en el elemento principal o el contenedor se convierte en elementos de la cuadrícula. Si no especifica ninguna otra propiedad CSS Grid, los elementos se organizarán automáticamente en una estructura de cuadrícula gracias a un potente algoritmo de cuadrícula.

Si necesita más control sobre los elementos de la cuadrícula, puede usar diferentes propiedades de la cuadrícula CSS para especificar las diferentes opciones para los elementos, incluida la posición.

Prerrequisitos

Si desea seguir este tutorial, paso a paso para crear una interfaz de usuario CSS Grid para su aplicación Django. Necesitará algunos requisitos. Necesitas tener;

  • Un entorno de desarrollo listo con Python 3 y PIP instalados,
  • Conocimientos básicos de Python,
  • Conocimientos prácticos de Django.

Creación de un entorno virtual e instalación de Django

Ahora comencemos por crear un entorno virtual que le permitirá aislar las dependencias de su proyecto de las otras dependencias de Python instaladas en su sistema.

Vaya a su terminal y ejecute el siguiente comando para crear un entorno virtual usando el venvmódulo incluido en Python 3.

$ cd ~
$ python3 -m venv env

A continuación, debe activar este entorno usando:

$ source env/bin/activate

Ahora, puedes instalar Django usando pip:

$ pip install django

Creando un Proyecto Django

Después de instalar Django, ahora necesita crear un proyecto. Regrese a su terminal y ejecute el siguiente comando:

$ django-admin start css
$ django-admin.py startproject cssgriddemo

Este comando generará un proyecto llamado cssgriddemo.

Creando una aplicación Django

Ahora que ha creado un proyecto Django, necesita crear una aplicación Django. Dirígete a tu terminal y ejecuta el siguiente comando para crear la aplicación:

$ python manage.py startapp gridui 

A continuación, agréguelo a la lista de aplicaciones instaladas en el settings.pyarchivo:

INSTALLED_APPS = [
    # [...]
    'gridui'
]

A continuación, necesitamos agregar una plantilla y una función de vista.

Abra el gridui/views.pyarchivo y agregue la siguiente importación:

from django.views.generic.base import TemplateView```

Next add the following view class:

```python
class Home(TempateView):
    template_name = 'gridui/index.html'

A continuación, agregue la gridui/index.htmlplantilla con el siguiente código:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Django UI with CSS Grid Layout</title>
    </head>
<body>
<div class="header">
  <h1>Django UI with CSS Grid Layout</h1>
</div>

<div class="sidebar">
.sidebar
</div>

<div class="main">
<div class="item">
    <span>1</span>
</div>
<div class="item">
    <span>2</span>
</div>
<div class="item">
    <span>...</span>
</div>
<div class="item">
    <span>12</span>
</div>
</div>

<div class="footer">
Copyright 2018
</div>
</body>
</html>

Creamos una plantilla HTML con las secciones de encabezado, barra lateral, principal y pie de página. En la sección principal, incluimos un conjunto de elementos.

Finalmente, agreguemos una URL a nuestro urls.pyarchivo.

from django.urls import path
from gridui import views

urlpatterns = [
    # [...]
    path('', views.Home.as_view())
]

Ahora puede migrar su base de datos y ejecutar el servidor Django:

$ python manage.py migrate
$ python manage.py runserver

Su aplicación se ejecutará desde localhost:8000.

Esta es una captura de pantalla de nuestra interfaz en este punto:

Cuadrícula CSS

A continuación, agreguemos un estilo CSS básico. Agregue una <style>etiqueta y agregue los siguientes estilos:

<style>

body {
    background: #478dee;
    margin: 5px;
    padding: 0px;

    font-family: -apple-system, BlinkMacSystemFont,

“Segoe UI”, “Roboto”, “Oxygen”, “Ubuntu”, “Cantarell”,

“Fira Sans”, “Droid Sans”, “Helvetica Neue”,
sans-serif;
}

div.header {
    text-transform: uppercase;
}
</style>

Esta es una captura de pantalla de la interfaz:

Cuadrícula CSS

Añadiendo CSS Grid

Ahora que hemos creado una estructura HTML simple, podemos continuar diseñando la interfaz de usuario usando CSS Grid.

Primero necesitamos hacer del <body>elemento un contenedor de cuadrícula y definir las columnas , filas y áreas de la cuadrícula :

body{
  // [...]  
  display: grid;
  grid-gap: 0.2vw;
  height: 100vh;
  grid-template-columns: 150px 1fr;
  grid-template-rows: 120px 1fr 61px;
  grid-template-areas: "header   header"
                       "sidebar content"
                       "footer footer";  
}

Usamos display:gridpar para hacer <body>un contenedor de rejilla. También establecimos una brecha de red de _0.2vw.

Usamos grid-template-columnspara definir dos columnas, la primera columna tiene un ancho fijo de 150px y la segunda columna tiene el ancho restante.

fres una unidad fraccionaria y 1fr significa que el elemento debe ocupar 1 parte del espacio disponible.

A continuación, usamos grid-template-rowspara definir tres filas:

  • La primera fila tiene una altura fija de 120 px,
  • La tercera fila tiene una altura fija de 61 px,
  • La segunda fila tiene el espacio restante ( 1fr ).

Finalmente usamos grid-template-areaspara asignar las celdas virtuales, resultantes de la intersección de columnas y filas, a áreas.

Ahora necesitamos definir aquellas áreas especificadas en la plantilla de áreas usando grid-area:

div.header {
    grid-area: header;
}
div.sidebar {
    grid-area: sidebar;
    background: #0769f3;
}
div.footer {
    grid-area: footer;
    background: #3581eb;
}
div.main {
    grid-area: content;
}

Esta es la captura de pantalla del resultado ahora:

Cuadrícula CSS

Agregar una cuadrícula CSS anidada

Ahora que hemos creado el diseño principal de la página, usemos CSS Grid para crear una cuadrícula anidada en el área de contenido.

Los niños Grid también pueden ser contenedores Grid.

Definamos el área de contenido como un contenedor de cuadrícula. En la <style>etiqueta, agregue el siguiente CSS:

div.main {
    display: grid;  
    grid-gap: 0.2vw;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-template-rows: repeat(auto-fill, minmax(150px, 1fr));
}

Aquí usamos repeatauto-fillminmaxpara definir columnas y filas.

También agregue el siguiente estilo para usar un fondo de imagen para los elementos:

div.item{
    background-image: url('https://source.unsplash.com/daily');
}

Esta es la captura de pantalla del resultado después de agregar más <div class="item">elementos:

Cuadrícula CSS

CSS cuadrícula grid-columngrid-rowyspan

CSS Grid le permite controlar la posición de los elementos de la cuadrícula usando grid-columngrid-row.

También puede usar spanpara definir cuántas columnas o filas toma un elemento específico.

Ahora volvamos a nuestro proyecto. Distribuyamos el segundo elemento del área de contenido en cinco columnas y dos filas y colóquelo desde la línea de la columna 2 y la línea de la fila 1 (ubicación predeterminada).

div.main > div.item:nth-child(2)  { 
  grid-column: 2/span 5;
  grid-row: 1/span 2;
}

Esta es una captura de pantalla del resultado:

Cuadrícula CSS

Conclusión

En este tutorial, has visto cómo crear una hermosa interfaz de usuario para una aplicación Django usando CSS Grid Layout.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas