PureCSS is a powerful library that is your most powerful CSS library for web projects

It makes little sense to start from scratch for every project. That’s why CSS libraries are so popular. According to 2020.stateofcss.com, PureCSS is rising in popularity and also in satisfaction.

So how does PureCSS compare to the most widely used Bootstrap or the rising star TailwindCSS?

I show you the fundamental differences in the styling of buttons. Besides these PureCSS is tiny (3.7kB). It does the essentials and doesn’t impede you from setting your own styles.

PureCSS provides minimal styling so that you can add your own formatting easily.

True to the credo:

“We believe that it’s much easier to add new CSS rules than to overwrite existing rules.” — PureCSS

The Devastating Difference Between PureCSS and Bootstrap

Bootstrap offers a huge number of components. From simple buttons to complex ones. For example, sliders, tooltips, toasts, and modal windows, and many more.

In PureCSS, the number of styled elements is very manageable.

PureCSS offers you basic structure, grid, forms, buttons, tables, and menus you can include separately.

Direct Usage Comparison

Bootstrap

<button type="button" class="btn btn-primary">Primary </button>

PureCSS

PureCSS provides three classes for buttons: pure-button for basic formatting.

<button type="pure button">A Pure Button </button>

A pure-button-primary for a blue button.

<button class="pure-button pure-button-primary">A Primary Button</button>

<div class="pure-button-group" role="group" aria-label="...">

    <button class="pure-button">A Pure Button</button>

    <button class="pure-button">A Pure Button</button>

    <button class="pure-button pure-button-active">A Pure Button</button>

</div>

Bootstrap

Besides btn-primary which colors the button blue, seven other variants (colors) are available, such as btn-secondary or btn-warning.

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-light">Light</button>

<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

PureCSS

Instead of having tons of classes for each variant, you pick up the pure button and group it with your custom style.

This is the part when PureCSS gets interesting.

<div>

    <style scoped="">

        .button-success,

        .button-error,

        .button-warning,

        .button-secondary {

            color: white;

            border-radius: 4px;

            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);

        }

        .button-success {

            background: rgb(28, 184, 65);

            /* this is a green */

        }

        .button-error {

            background: rgb(202, 60, 60);

            /* this is a maroon */

        }

        .button-warning {

            background: rgb(223, 117, 20);

            /* this is an orange */

        }

        .button-secondary {

            background: rgb(66, 184, 221);

            /* this is a light blue */

        }

    </style>

    <button class="button-success pure-button">Success Button</button>

    <button class="button-error pure-button">Error Button</button>

    <button class="button-warning pure-button">Warning Button</button>

    <button class="button-secondary pure-button">Secondary Button</button>

</div>

The Classes Behind the Scenes

The class pure-button does several normalizations and does basic formatting.

The font is set to inherit, so it is the same as in the environment.

The border and the underline are removed besides determining rounded corners and setting font and background color.

The formatting uses the pure-button class, looks like the following.

.pure-button {

    font-family: inherit;

    font-size: 100%;

    padding: .5em 1em;

    color: #000c;

    border: none transparent;

    background-color: #e6e6e6;

    text- decoration: none;

    border-radius: 2px;

}

Besides, a button gets defined as an inline-block element, and the text becomes centered.

The *-user-select specifications ensure that the text cannot be selected by mistake — which would not be desirable for a button and could make it difficult to use:

.pure-button {
    display: inline-block;
    line-height: normal;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; 
}

For hovering and other states, a color gradient is defined that runs from top to bottom. It is transparent at the beginning and then changes to a very light transparent gray.

.pure-button-hover, .pure-button:focus, .pure-button:hover {
    background-image: -webkit-gradient(linear,left top,left                                              bottom,from(transparent),color-stop(40%, rgba(0,0,0,.05)),to(rgba(0,0,0,.1)));
    background-image: linear-gradient (transparent,#0000000d      40%,#0000001a);
}

Hence this formatting is applied when you use the class pure-button.

Much code for a result that looks a bit banal at first glance. A simple light gray button with black font and rounded corners.

Everything has been removed that made the button element look a bit strange.

Also, the appearance of a button is always the same, regardless of whether you use <a> or <button>.

You don’t have to define your own hover colors.

Focus on Specialty Instead on Basics

Bootstrap

For larger or smaller buttons, use the classes btn-sm or btn-large.

<button type="button" class="btn btn-primary btn-lg">Large button</button>

<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>

<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Block- or inline buttons could be realized in Bootstrap 4 by using custom classes. In Bootstrap 5, you take utility classes for this.

PureCSS

With PureCSS, you focus on what should be special about the buttons. Such as colored buttons, larger or smaller buttons.

To do this, you only need to set the font size of the buttons. This also changes the size of the button. It gets a larger inner space (padding) since we define this in em:

.button-xsmall { 
    font-size: 70%;
}

.button-small {
    font-size: 85%;
}

.button-large {
    font-size: 110%;
}

.button-xlarge {
   font-size: 125%;
}

What About TailwindCSS?

To finish the comparison, let’s see how to create a button in TailwindCSS. For example, you can use the following code:

<button class="py-2 px-4 shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"> Button</button>

You won’t find a class button in the CSS files.

Instead, it is straightforward to increase the lateral padding, for example, by changing py-2 to py-3. The class py-* controls the padding to the right and left.

This approach is typical for utility libraries. TailwindCSS is not only providing all CSS formatting as classes. It also offers useful additions, such as a ring effect for the focus state.

The downside is the amount of code in the HTML files if you use the button many times. Then it is important to use a template system that allows you to define the button as a component. For example, inside VueJS or with Blade/Laravel.

TailwindCSS offers a way to extract individual formatting. This becomes cumbersome as soon as you use it for more than minor components.

Installation of PureCSS

You can integrate PureCSS in several ways. For initial testing, it’s best to use a CDN (Content Delivery Network):

<link rel="stylesheet" href="https://unpkg.com/purecss @2.0.5/build/pure-min.css" crossorigin="anonymous">

By the way, you can also link the individual modules (buttons, tables, forms, etc.) individually.

For proper use, I recommended downloading PureCSS and use the local version.

We can do this, for example, with the npm command:

npm install purecss --save

Or you install it via Composer if you have a PHP project:

composer require pure-css/purecss

To extend PureCSS, you can use it inside Grunt.

It would be best if you then had a basic HTML framework with the viewport meta specification and with a link to the downloaded PureCSS file:

<!DOCTYPE html> <html lang="de">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>PureCSS</title>
 <link rel="stylesheet" href="pure-min.css">
</head>
<body></body>
</html>

Now you can use PureCSS.

Conclusion

The State-of- CSS 2020, a survey of developers for popular techniques and tools, shows how well received the PureCSS approach is. That means whether they would use the framework again.

PureCSS achieved a strong 71%. This puts it in second place — directly behind TailwindCSS, which achieves 87% percent.

Sometimes PureCSS seems a bit old-fashioned. For example, the references to the YUI library are irritating. These parts are no longer maintained.

After all, the PureCSS approach is convincing me. It can also serve as a basis for your own templates— if you don’t want to go the Bootstrap or TailwindCSS way.

To wrap it up, from my point of view, PureCSS wins this battle when you want a minimalist approach to start easy and fast, especially when Bootstrap is too elaborate or complex. Even when the utility approach cannot or should not be chosen for other reasons.

Lessons and examples are booooring? Neither remember what you’ve coded in your last video course nor what you’ve learned? Be together with your favorite heroes and characters of your favorite Games, Movies, and TV Shows in my ArnoldCode Academy.