DEV Community

Cover image for Some CSS Tools and Frameworks
Eric Hu
Eric Hu

Posted on • Originally published at ericsdevblog.com

Some CSS Tools and Frameworks

#css #html #webdev #beginners

In the previous chapter, we saw the challenges of building a webpage using raw CSS, evident from the 340 lines of code required for a basic YouTube homepage. The complexity of modern web design necessitates more efficient solutions, and this is why various CSS tools and frameworks are created. These resources are designed to enhance code quality and accelerate the development process. In this chapter, we will delve into some popular tools and frameworks and briefly discuss how to use them to optimize your development workflow.

📧 Subscribe to my newsletter: https://ericsdevblog.ck.page/profile

CSS preprocessor

A CSS preprocessor is a program that can generate CSS code from unique scripting languages. The scripting language possesses programming features such as variables, nesting, functions, and so on, hence extending the capabilities of raw CSS.

The most popular CSS preprocessors include Sass and Less. Sass stands for Syntactically Awesome Stylesheets, which is written in Ruby, a popular programming language known for its simplicity and productivity. On the other hand, Less is short for Leaner Style Sheets, a preprocessor written in JavaScript, one of the most popular programming languages, making it compatible with various web development environments.

Both tools offer similar features to improve your development process, and for demonstration purposes, I will use Less as an example because it is the more popular option. At the time this course is finished, Less has 17k stars on GitHub, compared to Sass, which has 14.7k stars.

Less can be installed into your project using npm, a package manager for JavaScript. We will talk more about this in the JavaScript course in the feature. For now, you only need to know that Less can be installed with the following command:

npm install less -g
Enter fullscreen mode Exit fullscreen mode

And to compile a .less file into .css, use this command:

lessc input.less style.css
Enter fullscreen mode Exit fullscreen mode

In this case, input.less file will be compiled into style.css.

Less adds programming features to your CSS code, such as user-defined variables, custom functions, mixins, imports, inheritance, and more. Let's take a look at some examples:

  • Creation of variables

Less allows you to define variables that can be accessed anywhere in the .less file.

  @primary-color: #3498db;

  .button {
    background-color: @primary-color;
  }

  .heading {
    color: @primary-color;
  }
Enter fullscreen mode Exit fullscreen mode

The compiled CSS file looks like this:

  .button {
    background-color: #3498db;
  }
  .heading {
    color: #3498db;
  }
Enter fullscreen mode Exit fullscreen mode

Recall that it is possible to create variables using raw CSS as well.

  :root {
    --primary-color: salmon;
  }

  p {
    color: var(--primary-color);
  }
Enter fullscreen mode Exit fullscreen mode

However, as you can see, you need to retrieve the variable using the var() function. Using a preprocessor makes this process much simpler.

  • Nesting of selectors

Less also allows for the nesting of selectors, providing a more structured and readable way to write styles.

  nav {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    li {
      display: inline;
    }

    a {
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }
Enter fullscreen mode Exit fullscreen mode

The generated CSS:

  nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  nav li {
    display: inline;
  }
  nav a {
    text-decoration: none;
  }
  nav a:hover {
    text-decoration: underline;
  }
Enter fullscreen mode Exit fullscreen mode
  • Import other Sass/Less files

You can also create partial Less files that can be imported into other Less files. This feature promotes modularization and reusability, making it easier for you to manage the project structure.

_variables.less

  @base-font-size: 16px;
  @heading-font-size: 24px;
  @spacing-unit: 10px;
Enter fullscreen mode Exit fullscreen mode

styles.less

  @import "variables.less";
Enter fullscreen mode Exit fullscreen mode
  • Mixins

A mixin is a group of CSS declarations that can be reused in different parts of the file.

  .border-radius(@radius) {
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
  }

  .button {
    width: 100px;
    height: 40px;
    background-color: blue;
    .border-radius(5px);
  }
Enter fullscreen mode Exit fullscreen mode
  • Inheritance

Inheritance is a feature that allows styles from one selector to be inherited by another selector. For example, you are creating different alert messages, which have the same size, font, and border. The only thing different is the text color. You can create a .message selector and let all other .*-message selectors inherit from .message like this:

  .message {
    padding: 10px;
    border: 1px solid #ccc;
  }

  .success-message {
    &:extend(.message);
    background-color: #4caf50;
    color: #fff;
  }

  .error-message {
    &:extend(.message);
    background-color: #f44336;
    color: #fff;
  }
Enter fullscreen mode Exit fullscreen mode

The output looks like this:

  .message,
  .success-message,
  .error-message {
    padding: 10px;
    border: 1px solid #ccc;
  }
  .success-message {
    background-color: #4caf50;
    color: #fff;
  }
  .error-message {
    background-color: #f44336;
    color: #fff;
  }
Enter fullscreen mode Exit fullscreen mode

As you can see, it helps you avoid a lot of unnecessary repetition.

  • Custom functions

This is different from the CSS functions we discussed before, as these functions are defined by you. Let's look at this example:

  double(@value) {
    @result: @value * 2;
    return @result;
  }

  .example {
    width: @width;
    height: double(10px);
  }
Enter fullscreen mode Exit fullscreen mode

The double() function is not a built-in function. It is created within the context of the specific project. The custom functions provide a powerful mechanism for creating dynamic styles.

Comparing Sass and Less, they are similar in many ways, as they both offer powerful features to improve CSS development. The choice between them often comes down to personal preference, project requirements, and the existing toolset and environment of a development team.

PostCSS

Contrary to the preprocessors, PostCSS is a CSS postprocessor that will parse existing CSS code to enhance its functionality, efficiency, and compatibility.

With the right plugin, you can use PostCSS to automatically add the correct vendor prefix, ensuring compatibility with different browsers. For example, some CSS properties require you to have the -webkit- prefix to work on Safari, and -ms- prefix to work on older versions of Microsoft Edge, before Chromium.

Let's say you have this CSS code:

body {
  display: flex;
  align-items: center;
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

To ensure compatibility on all platforms, PostCSS will transform it into:

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

PostCSS can also minimize your CSS file by removing unnecessary white spaces. The result will be difficult for humans to understand, but it won't be a problem for machines.

.button {
  background-color: #3498db;
}
.heading {
  color: #3498db;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline;
}
nav a {
  text-decoration: none;
}
nav a:hover {
  text-decoration: underline;
}
.message,
.success-message,
.error-message {
  padding: 10px;
  border: 1px solid #ccc;
}
.success-message {
  background-color: #4caf50;
  color: #fff;
}
.error-message {
  background-color: #f44336;
  color: #fff;
}
Enter fullscreen mode Exit fullscreen mode

Output:

.button{background-color:#3498db}.heading{color:#3498db}nav ul{margin:0;padding:0;list-style:none}nav li{display:inline}nav a{text-decoration:none}nav a:hover{text-decoration:underline}.message,.success-message,.error-message{padding:10px;border:1px solid #ccc}.success-message{background-color:#4caf50;color:#fff}.error-message{background-color:#f44336;color:#fff}
Enter fullscreen mode Exit fullscreen mode

Besides autoprefixing and minification, PostCSS can also run linters to analyze the code for potential errors, help manage the media queries, inline small images into CSS as data URLs to improve page load times, and so much more. PostCSS can perform a wide range of transformations to enhance the performance, maintainability, and cross-browser compatibility of your CSS files.

Popular CSS frameworks

When we recreated the YouTube homepage together, remember that we started by designing the page layout to see what content needed to be present in the webpage. Then, we moved to the HTML code to ensure all the elements were included, and finally, we wrote the CSS code to make sure the elements were displayed as designed.

The CSS frameworks simplifies this process by removing the final step. A framework is a collection of prebuilt CSS styles with intuitive class names. All you need to do is put the right class name to the right element. Just like when we discussed the legacy layout method. We created the CSS file first:

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media screen and (min-width: 640px) {
  .col-md-1 {width: 8.33%;}
  .col-md-2 {width: 16.66%;}
  .col-md-3 {width: 25%;}
  . . .
}

@media screen and (min-width: 1024px) {
  .col-lg-1 {width: 8.33%;}
  .col-lg-2 {width: 16.66%;}
  .col-lg-3 {width: 25%;}
  . . .
}
Enter fullscreen mode Exit fullscreen mode

And then, in order to create a <div> that takes the full width on small screens, six columns on medium screens, and two columns on large screens, you only need to put the right class names to the <div> element.

<div class="col-12 col-md-6 col-lg-2">Lorem ipsum dolor sit. . .</div>
Enter fullscreen mode Exit fullscreen mode

CSS frameworks are essentially the same, except they cover much more than creating columns.

Some commonly used frameworks include Bootstrap, TailwindCSS, Bulma, Foundation, and so on. TailwindCSS is my personal favorite, as it is a utility-first CSS framework that provides low-level utility classes for any custom designs. It is highly customizable and configurable. You can customize it to suit your own unique design preferences.

For example, here is a basic login form I created using TailwindCSS without having to write a single line of CSS.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>

  <body class="p-4">
    <div class="max-w-md mx-auto bg-white p-6 rounded-md shadow-lg">
      <h2 class="text-xl font-bold mb-4">Login</h2>
      <form>
        <div class="mb-4">
          <label
            for="username"
            class="block text-gray-700 text-sm font-bold mb-2"
            >Username</label
          >
          <input
            type="text"
            id="username"
            name="username"
            class="w-full px-3 py-2 border rounded-md"
            placeholder="Enter your username" />
        </div>
        <div class="mb-6">
          <label
            for="password"
            class="block text-gray-700 text-sm font-bold mb-2"
            >Password</label
          >
          <input
            type="password"
            id="password"
            name="password"
            class="w-full px-3 py-2 border rounded-md"
            placeholder="Enter your password" />
        </div>
        <button
          type="submit"
          class="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-700">
          Login
        </button>
      </form>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

tailwindcss form

Further readings

Top comments (0)

Read next

mince profile image

BEST 👍 TOOLS FOR BEST 👍 PRODUCTIVITY

Mince -

nevodavid profile image

I fine-tuned my model on a new programming language. You can do it too! 🚀

Nevo David -

elizabethsobiya profile image

Let's Dive into the World of Web Sockets: A Beginner's Guide

Elizabeth Sobiya -

zoltanszogyenyi profile image

Customer service pages for e-commerce built with Tailwind CSS

Zoltán Szőgyényi -