Header Ads Widget

Ticker

6/recent/ticker-posts

Bootstrap 5 con Sass y Gulp 4 Tutorial por ejemplo

 El framework Bootstrap CSS y JavaScript más popular para diseñar interfaces de usuario viene con una nueva versión: Bootstrap 5. En este tutorial, aprenderemos cómo usar la última versión de Bootstrap 5 con Gulp 4 y Sass para diseñar y construir un dispositivo móvil receptivo. primera aplicación de ejemplo.

Usaremos JavaScript para obtener datos de un punto final JSON que exporta las últimas publicaciones de Techiediaries.

Bootstrap es el marco de código abierto más popular y ampliamente utilizado entre los desarrolladores de todo el mundo para crear interfaces de usuario receptivas con HTML, CSS y JavaScript. En este momento, Bootstrap 4 es la versión de producción principal de bootstrap, pero pronto tendremos una versión de Bootstrap 5 que traerá muchos cambios importantes y, lo que es más importante, eliminará jQuery como dependencia y dejará de admitir IE 10 y 11.

Los cambios importantes incluyen:

  • Dejar caer jQuery a favor de JavaScript vainilla
  • Reescritura de la cuadrícula para admitir columnas ubicadas fuera de filas y medianiles sensibles
  • Migrar la documentación de Jekyll a Hugo
  • Dejar de admitir IE10 e IE11
  • Traslado de la infraestructura de pruebas de QUnit a Jasmine
  • Agregar un conjunto personalizado de iconos SVG
  • Agregar propiedades personalizadas de CSS
  • API mejorada
  • Sistema de cuadrícula mejorado
  • Documentos de personalización mejorados
  • Formularios actualizados

A lo largo de este tutorial de Bootstrap 5, aprenderá a configurar su entorno de desarrollo con Sass y Gulp 4, y a crear y diseñar una página con Bootstrap 5 y Sass.

  • Configuración de un entorno de desarrollo con Bootstrap 5, Sass, Gulp 4 y BrowserSync
  • Creación de una página de blog Bootsrap 5 y obtención de publicaciones con JavaScript,
  • Obtener publicaciones con JavaScript Fetch y adjuntar al DOM
  • Personalización de los colores del tema Bootstrap 5 con variables Sass
  • Incluyendo Bootstrap 5 Sass File
  • Crear un archivo de configuración de Gulp
  • Instalación de Bootstrap 5, Sass y Gulp 4
  • Cómo usar Bootstrap 5 con Sass, Gulp 4 y BrowserSync

Hay varias maneras de utilizar Bootstrap 5 incluyendo la importación de la hoja de estilo y scripts de una CDN a través <link><scripts>etiquetas, y el uso de Sass para tomar beneficios del marco CSS Bootstrap 5.

Prerrequisitos

Para seguir este tutorial, debe tener Node.js instalado en su máquina. Esto es necesario para nuestras herramientas de desarrollo front-end, como Sass y Gulp, pero no es necesario si incluye Bootstrap 5 con etiquetas <script><link>.

Si no tiene Node.js instalado en su máquina, simplemente diríjase al sitio web oficial y descargue los binarios para su sistema operativo.

También es necesario tener conocimientos básicos de HTML y CSS.

Instalación de Bootstrap 5, Sass y Gulp 4

Después de haber instalado Node en su máquina de desarrollo, diríjase a una nueva terminal y ejecute el siguiente comando para instalar la CLI de Gulp:

$ npm install --global gulp-cli

Gulp CLI se instalará globalmente en su máquina.

A continuación, necesitamos instalar Gulp, BrowserSync, Gulp Sass y Bootstrap 5 usando NPM.

Regrese a su terminal y ejecute el siguiente comando para crear un package.jsonarchivo ejecutando el siguiente comando:

$ mkdir bootstrap5demo && cd bootstrap5demo 
$ npm init 

Se le proporcionará algunos detalles, como el nombre y la descripción de su proyecto. Ingréselos como mejor le parezca.

Después de eso, tendrá un package.jsonarchivo dentro de su carpeta actual:

{
  "name": "bs5demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

A continuación, debe ejecutar el siguiente comando para instalar Gulp 4, BrowserSync, Gulp Sass y Bootstrap 5:

$ npm install browser-sync gulp gulp-sass --save-dev

En el momento de escribir este tutorial, se instalarán estas versiones:

  • gulp-sass@4.1.0
  • gulp@4.0.2
  • browser-sync@2.26.12

A continuación, ejecute el siguiente comando para instalar Bootstrap 5:

$ npm install bootstrap@next
$ npm install popper.js

Esto se instalará bootstrap@5.0.0-alpha1popper.js@1.16.1 en el momento de escribir este tutorial.

Nuestro package.jsonarchivo debería tener el siguiente aspecto:

{
  "name": "bs5demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.12",
    "gulp": "^4.0.2",
    "gulp-sass": "^4.1.0"
  },
  "dependencies": {
    "bootstrap": "^5.0.0-alpha1",
    "popper.js": "^1.16.1"
  }
}

Nota : tenga en cuenta que debe agregar la nextetiqueta para instalar la última versión de Bootstrap 5 en esta fase.

Popper.js es una dependencia de Bootstrap 5.

Crear un archivo de configuración de Gulp

A continuación, cree un gulpfile.jsarchivo en la raíz de la carpeta de su proyecto y agregue el siguiente código:

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

gulp.task('sass', ()  => {
    return gulp.src("./sass/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("dist/"))
        .pipe(browserSync.stream());
});

gulp.task('start', gulp.series('sass', function() {

    browserSync.init({
        server: "./"
    });

    gulp.watch("sass/*.scss", gulp.series('sass'));
    gulp.watch("./*.html").on('change', browserSync.reload);
}));

gulp.task('default', gulp.series('start'));

Comenzamos importando las dependencias gulpgulp-sassbrowser-syncusando el require()método Node , luego creamos una primera tarea Gulp llamada sass que compila cualquier archivo Sass dentro de la sasscarpeta en un archivo CSS que luego se incluirá en nuestro archivo HTML para proporcionar estilos para nuestra interfaz de usuario.

A continuación, creamos una segunda tarea de Gulp llamada start que simplemente inicia un servidor de desarrollo local y observa cualquier cambio en la carpeta de nuestro proyecto. Si se realiza un cambio, la tarea sass se ejecuta nuevamente.

Finalmente, usamos le gulp.task('default', ['start'])permite hacer el inicio , la tarea en ejecución predeterminada que iniciará el servidor de desarrollo local y compilará archivos Sass cuando se realicen cambios.

Incluyendo Bootstrap 5 Sass File

A continuación, regrese a su terminal y agregue una sass/carpeta en la carpeta de su proyecto, luego cree un archivo llamado styles.scss:

$ mkdir sass && cd sass
$ touch styles.scss

A continuación, abra el sass/styles.scssarchivo y agregue la siguiente línea para importar los archivos Sass de Bootstrap 5 desde la node_modules/carpeta:

@import '../node_modules/bootstrap/scss/bootstrap.scss';

Esto le permitirá personalizar la apariencia predeterminada de Bootstrap 5 estableciendo sus propios valores para los colores, tamaños, espaciados, etc.

A continuación, agregue un index.htmlarchivo dentro de la carpeta de su proyecto y agregue el siguiente código HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Bootstrap 5 with Sass Tutorial</title>
        <link rel="stylesheet" href="dist/styles.css">
    </head>
    <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Bootstrap 5 tutorial</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Blog</a>
                    </li>
                </ul>
                <form class="d-flex">
                    <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row d-flex justify-content-center">
            <div class="col-12 col-lg-6" id="postsDiv">

            </div>
            <div class="col-12 col-lg-4">
                <div class="card">
                    <div class="card-body">
                        <h5>Newsletter</h5>
                        <form action="#">
                            <div class="input-group my-3">
                                <span class="input-group-text" id="email-at">@</span>
                                <input type="email" class="form-control" placeholder="Email" aria-label="Email"
                                    aria-describedby="email-at" required>
                            </div>
                            <button type="submit" class="btn btn-block btn-primary">Subscribe</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

    </body>
</html>

Comenzamos agregando una barra de navegación de Bootstrap 5 de los documentos . A continuación, agregamos el área de contenido principal de la página. El primer elemento es un contenedor donde agregamos dos filas principales: el área de publicaciones que contendrá las tarjetas Bootstrap 5 y la barra lateral.

Obtener publicaciones con JavaScript Fetch y adjuntar al DOM

A continuación, necesitamos agregar algo de código JavaScript para buscar publicaciones, envolverlas dentro de una tarjeta Bootstrap 5, luego agregarlas dentro del contenedor <div>con la postsDivID:

   <script>
        let posts;
        document.body.onload = async (e) =>{
            console.log("document loaded!");
            posts = await fetch("https://www.techiediaries.com/api/feed.json").then(function(response) {
                return response.json();
            });
            posts.forEach(element => {
                let child = document.createElement('div');
                child.classList.add('mt-1');
                ['card'].forEach((v)=>{
                    child.classList.add(v);
                })


                child.innerHTML = `
                <div class="card-body">
                    <h2 class="card-title">${element.title}</h2>
                    <p class="card-text">${element.excerpt}</p>
                    <div class="card-footer">
                        <a href="${element.url}" class="card-link">Read</a>
                        <a href="#" class="card-link">Save to read offline</a>
                    </div>

                </div>
                `

                document.getElementById("postsDiv").appendChild(child);
            });

        }


        </script>

Usamos la API Fetch para obtener datos del punto final JSON, luego recorremos las publicaciones, envolvemos cada publicación en una tarjeta Bootstrap 5 y agregamos el elemento a nuestro contenido <div>.

Personalización de los colores del tema Bootstrap 5 con variables Sass

Sass le permite personalizar fácilmente la sensación y el aspecto de su tema a través de las variables Bootstrap 5.

Abra el styles.scssarchivo y actualícelo de la siguiente manera para personalizar los colores predeterminados del tema:

// Changing the theme colors
$primary: #3ec89d;
$secondary: #3ab7ff;
$success: #65ff9f;
$info: #7164ff;
$warning: #ff9f65;
$danger: #ff457b;
$dark: #18181d; 

@import '../node_modules/bootstrap/scss/bootstrap.scss';

Estas son solo algunas variables, pero podemos otras variables que son responsables de la familia de fuentes, el tamaño y los espacios, etc. Simplemente diríjase al _variables.scssarchivo dentro de la node_modules/bootstrapcarpeta y podrá encontrar cualquier variable que pueda personalizar.

Conclusión

Bootstrap es un marco popular de código abierto que proporciona componentes prediseñados y permite a los diseñadores y desarrolladores web de todos los niveles crear rápidamente interfaces de usuario receptivas y móviles. La última versión de Bootstrap: Bootstrap 5 trae muchos cambios nuevos, incluida la eliminación de jQuery como dependencia. En este artículo, hemos visto cómo usar Bootstrap 5 y Gulp 4 para crear una página de blog receptiva y configurar y personalizar el tema usando variables Sass.

Publicar un comentario

0 Comentarios