Personalizar Bootstrap 4 en Laravel con Sass y npm

Banner Personalizar Bootstrap

Continuando con la personalización de Bootstrap dentro de Laravel quisiera mostrarles una segunda forma de hacerlo, la cual requiere tener conocimientos en el manejo de Sass ya que Bootstrap 4 lo utiliza como preprocesador CSS. Existen numerosas ventajas al utilizar esta herramienta como por ejemplo la re-utilización de código y la mejor organización de las hojas de estilo lo que permite que nuestro proyecto escale de mejor forma. Veamos cómo trabajar de esta manera:

Ver post

Browsersync, una herramienta para mejorar el flujo del desarrollo frontend

Mix + BrowserSync

A través del tiempo hemos usado diferentes herramientas para ser más productivos en nuestro desarrollo web o de aplicaciones, un ejemplo de estas herramientas es npm con sus opciones para compilar y generar assets al momento de hacer un cambio en nuestros archivos (el famoso npm run watch), útil ya que de otra forma tendríamos que tipear el comando npm run cada vez que realicemos un cambio en nuestro código.

Hoy vengo a compartir una herramienta maravillosa llamada Browsersync que nos permitirá ahorrar bastante tiempo cuando estemos desarrollando.

Ver post

Uso de selectores en JavaScript

Javascript selectors

El uso de “selectores” en JavaScript permite encontrar y seleccionar elementos del DOM bien sea para extraer información de cada nodo o para manipularlos de ser necesario.

Estos selectores funcionan de forma  muy similar a los selectores que se usan en CSS, como veremos a continuación:

Ver post

Acceder a las rutas de Laravel desde Javascript con tightenco/ziggy

Rutas desde Javascript con tightenco/ziggy en LaravelZiggy es un paquete para Laravel que permite acceder a las rutas de la aplicación desde Javascript. La ventaja que ofrece este paquete, es que no necesitas cambiar el código de Javascript cada vez que requieras cambiar el nombre de tus rutas, ya que estás se generarían de forma dinámica en Javascript tal como ocurre cuando usamos el helper route() de Laravel.

Ver post

Escribe HTML y CSS más rápido con Emmet

Emet - Herramienta para acelerar la escritura de HTML y CSS

Para los que trabajamos en la web de forma profesional, escribir código es a veces divertido, a veces complicado, y muchas veces es algo tedioso, sobre todo cuando tenemos que escribir cosas largas y repetitivas. Es por esto que siempre debemos tener los ojos abiertos a nuevos procesos o técnicas que nos puedan ayudar a escribir nuestro código de manera más eficiente.

Hoy quiero hablarles acerca de Emmet.io.

Ver post

Organizando el proyecto en Sass

Logo
09

Organizando nuestro proyecto

Buenas prácticas al trabajar con Sass Parte 1

En esta lección adicional del Curso de Sass comentamos un poco sobre cómo organizar proyectos de Sass y como manejar la estructura de archivos para proyectos más grandes. Unificando variables en un solo archivo, aprovechando los comentarios de Sass para documentar nuestras variables, mixins y funciones, y organizando los archivos de manera lógica.

Regístrate para ver ésta y cientos de lecciones exclusivas.

Directivas adicionales en Sass

Logo
09

Directivas adicionales de Sass

Aprende a lidiar con errores en el código Parte 1

Durante las últimas semanas hemos aprendido sobre el funcionamiento de Sass y sobre todo cómo hacer uso de sus características para generar CSS, con este video llegamos al final del curso, y hablaremos de algunas cosas que nos ayudan a hacer nuestro código más sólido y seguro, como son las directivas @debug y @warn y además la directiva @error.

Regístrate para ver ésta y cientos de lecciones exclusivas.

Suscríbete a nuestro boletín

Te enviaremos publicaciones con consejos útiles y múltiples recursos para que sigas aprendiendo.