Cascading Style Sheets, or CSS, is a stylesheet language that describes how HTML elements should look on our screen. With it, we can control the layout, colors, fonts, and more.
Instead of writing your own CSS, you can use prebuilt CSS libraries or frameworks to help you and keep your code organized. Below are some of the most popular options:
Bootstrap
Bootstrap is a popular CSS framework that was developed by Twitter in 2011. It has HTML and CSS design templates for things like typography, forms, buttons, tables, navigation and modals, as well as a number of premade themes built or reviewed by Bootstrap's creators. It also has predefined classes for easy layout options.
Bootstrap has a mobile-first fluid grid system that scales up to 12 columns as the device or viewport size increases, making it easy to build responsive pages that look good on any device.
Bulma
Bulma is another popular framework, mainly because it's easy to learn and use, and also because you only need a CSS file- no JavaScript.
You can use one of Bulma's prebuilt alternative versions, and it even comes with an automatic dark mode feature.
Pure CSS
Pure is a set of small, responsive CSS modules developed by Yahoo, built on top of Normalize CSS, with a focus on being "CSS with a minimal footprint" and keeping the file size as small as possible.
It's similar to Bootstrap, but Pure is better for small projects or one's that emphasize speed. Pure has a very minimalist style and also comes with some simple layouts. Pure was created with mobile in mind, meaning it's a good choice for responsive design.
Animate.css
Animate is a library of "ready-to-use, cross-browser animations for use in your web projects [.]". It comes with easy-to-use utility classes for delay, speed, and repetition.
After you install Animate.css, you just add the class animate__animated
to an element, and then the animation names. Their website even has a fun feature that let's you test them out by clicking on the animation name in the side bar and it will apply that animation to the Animate.css logo on the page.
Tailwind
Tailwind is a modern, utility-first CSS framework designed to give you complete control over how your site looks.
Tailwind doesn't have predefined classes for elements like buttons or tables; instead, it provides low-level utility classes that let you build custom designs without writing any custom CSS.
Material UI
MUI (Material UI) is a React component library that implements Google's Material Design. It comes with premade components (buttons, sliders, etc.) that follow Google's Material Design guidelines.
It even has free Material UI templates, including a marketing page, a checkout flow, sign-in and sign-up pages, and a blog.
Pico CSS
Pico is a minimalist, lightweight CSS library for semantic HTML (<header>
, <footer>
) with a focus on making every HTML responsive and elegant by default.
It's small in size, styling your HTML tags using less than 10 .classes
. It also comes with a classless version.
Sources
Top comments (0)