Actualmente, el mundo del desarrollo web va más allá de los lenguajes de programación y los editores de código. Ahora existen muchísimas herramientas que nos facilitan la ejecución de diversas acciones, desde estilizar proyectos hasta hacer llamadas HTTP. En este post, te enseñaremos 2 utilidades de CSS externas ideales para estilizar tus proyectos de manera fácil y sencilla.
¿Qué son las utilidades de CSS externas?
Cuando hablamos de utilidades de CSS externas nos referimos a algunas herramientas que facilitan el desarrollo frontend de la web. Es decir, facilitan los procesos de diseño y maquetación que normalmente vienen después de ejecutar la estructuración HTML y la lógica JavaScript. A continuación, te enseñamos 2 utilidades de CSS externas ideales para este proceso en el desarrollo de un proyecto.
¿Cuáles son algunas utilidades de CSS externas?
Ahora que sabemos qué son las utilidades de CSS, te hablaremos un poco sobre 2 de las utilidades más populares, así como su instalación y funcionamiento general.
Tailwind
La primera en nuestra lista de utilidades de CSS externas es Tailwind, un framework especializado en CSS que nos permite diseñar nuestros proyectos con clases y estilos directamente desde nuestro código HTML.
Además de facilitar la creación y diseño de elementos desde cero, esta utilidad cuenta con una variedad de plantillas de componentes ya creados y fáciles de personalizar. En este sentido, podría entrar en la lista de nuestro post sobre librerías para plantillas de componentes.
Para implementar Tailwind, basta con dirigirnos a la documentación oficial de esta utilidad en tailwindui.com y revisar las distintas formas en las que podemos instalar esta herramienta. La forma base es un código npm; sin embargo, este varía según la herramienta que estemos utilizando para crear nuestro código (React, Vue o HTML).
Bootstrap
La segunda en nuestra lista de utilidades de CSS externas es Bootstrap, una herramienta muy poderosa que nos permite crear y personalizar elementos utilizando Sass, una extensión relevante del lenguaje CSS. Sin embargo, esta utilidad también nos permite utilizar variables CSS, como puedes revisar en su documentación.
Si no conoces este lenguaje, te invitamos a consultar y explorar la página sass-lang.com. Allí encontrarás artículos sobre esta extensión y una documentación muy completa.
Para implementar Bootstrap puedes dirigirte a la página oficial getbootstrap.com y leer la documentación de instalación. Allí, el equipo de Bootstrap te proporciona un código CDN y un npm, ambos modos comunes de instalar paquetes o librerías de código.
Si quieres instalar Bootstrap utilizando el CDN, basta con copiar el enlace que obtenemos y pintarlo en el index.html de nuestro proyecto ¿Exactamente dónde? Pues en la sección de cabecera definida por la etiqueta HTML head. Una vez hecho esto, tendrás acceso a todos los estilos y clases de esta utilidad CSS.
¿Qué sigue?
Ahora que conoces estas 2 utilidades de CSS externas, ¡anímate a usarlas para estilizar tus propios proyectos! Si quieres conocer más sobre este tipo de procesos, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás a dominar lenguajes de programación como JavaScript, HTML y CSS. ¡No te lo pierdas y pide más información!
