Using a Utility CSS Library

When looking to redesign my website, I was looking at using some of the new CSS frameworks that are out there. I'm not a designer, I don't claim to be. I don't have the designer eye, so I need all the help I can get when looking to redesign my website. The obvious solution would have been to use something like Twitter bootstrap to get started with the design. But I've always had a problem with bootstrap I don't like how heavy it is, there is so much to the framework that I tend to not use the majority of the framework. I wanted something a bit more lightweight but still needed help with the design of my website. The next framework I found and really liked was Bulma, it's lightweight and built with CSS flexbox in mind. I love using CSS flexbox it makes the layout so much easier and it's responsive by default. But the problem I had with Bulma and Bootstrap is that to other people it's obvious straight away what framework you're using, if people have used Bulma in the past they will know straight away that you're using it. I want the design to be unique but I also want a nice framework to use to get me started and help with my design.

#Tachyons

I started looking into Utility CSS libraries, one I liked was Tachyons. This is a very lightweight framework it's only 14kb when minified! Next I noticed it allowed me to just design in the browser, like I said I'm not a design, I'm not very good or experienced in something like Photoshop. But I am experienced with the browser and editing the HTML in the browser. Using a utility CSS frameworks allows me to edit the html and see the changes straight away in the browser. I can create a info bar just in HTML by using the following code.

<div class="flex items-center justify-center pa4 bg-lightest-blue navy">
    <svg class="w1" data-icon="info" viewBox="0 0 32 32" style="fill:currentcolor">
        <title>info icon</title>
        <path d="M16 0 A16 16 0 0 1 16 32 A16 16 0 0 1 16 0 M19 15 L13 15 L13 26 L19 26 z M16 6 A3 3 0 0 0 16 12 A3 3 0 0 0 16 6"></path>
    </svg>
    <span class="lh-title ml3">Some info that you want to call attention to.</span>
</div>

You'll notice that at the top level HTML element the classes used to make up the info bar.

<div class="flex items-center justify-center pa4 bg-lightest-blue navy">

Using this approach to CSS I can design everything directly in the browser with all the CSS already built and I don't have to create any new classes I can just use these utilities to get everything done. But then I had the problem of duplicating a lot of the html classes on the page, for example if I had a button on the page I needed to have the html like this.

<a href="" class="f5 no-underline black bg-animate hover-bg-black hover-white inline-flex items-center pa3 ba border-box">Click</a>

Most likely you'll have multiple buttons on the page, in the past using something like Bootstrap I would simply use the .btn class.

<a href="" class="btn">Click</a>

That's much nicer! Cleaner! But the button will look the same as every other bootstrap button on the web. ## Building Components

To get around the problem of duplicate HTML and classes on your page you need a nice way of using the Tachyon library but joining these together to create components. I found this library on Github called tachyons-sass, it's the Tachyon library built in Sass. This is great, now I can include the build file in my Sass file, create a new CSS class and extend the classes I want from Tachyons. To build a button component you can create a new class of button.

.button {

}

Then extend all the classes you want for this button which is easy to do as the classes I need are already in the HTML I just grab f5 no-underline black bg-animate hover-bg-black hover-white inline-flex items-center pa3 ba border-box and use them in the component class.

.button {
   @extend .f5, .no-underline, .black, .bg-animate, .hover-bg-black, .hover-white, .inline-flex, .items-center, .pa3, .ba, .border-box;
}

Now in the HTML I can just use the button class.

<a href="" class="button">Click</a>

This allows me to use utility classes on independent areas of the website and anywhere I want to duplicate the same classes I can just create a new component class. ## Tailwind CSS

While I was redesigning with Tachyons and creating any new components that I needed, Adam Wathan released a new Utility CSS library called Tailwind. This library seemed to solve the problem I had with Tachyons, by allowing you to build the library and components with a pre-processors rather than using just the CSS library. Therefore I didn't need to use the tachyons-sass repository which may or may not have all the new code from Tachyons, I can just use Tailwind and build the components from here. Tailwind is another utility CSS library it has all the default classes and styling as Tachyons but it's built to be customised and expanded on. From the start of development on Tailwind Adam has focus on trying to build a library that makes it easy to create those component classes from the library. The build config of Tailwind is built in a JavaScript file which means we can easily hook into this JavaScript and customise the build however we want. Therefore if you find you're only using 5 colours in your application you can remove all the other colours from your built CSS file and only have the 5 you use. It's highly customisable and easy to use with either PostCSS, LESS or SASS which makes it the utility library that I'm going to use moving forward. Tailwind CSS### Installing Tailwind CSS

To install Tailwind in a Laravel application was very easy, all you have to do is install the package by running the command.

npm install tailwindcss --save-dev

Create the tailwind config file

./node_modules/.bin/tailwind init tailwind.js

Add the default tailwind.css into your main app.scss file.

/**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 *
 * You can see the styles here:
 * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
 */
@tailwind preflight;

/**
 * Here you would add any of your custom component classes; stuff that you'd
 * want loaded *before* the utilities so that the utilities could still
 * override them.
 *
 * Example:
 *
 * .btn { ... }
 * .form-input { ... }
 *
 * Or if using a preprocessor:
 *
 * @import "components/buttons";
 * @import "components/forms";
 */

/**
 * This injects all of Tailwind's utility classes, generated based on your
 * config file.
 */
@tailwind utilities;

/**
 * Here you would add any custom utilities you need that don't come out of the
 * box with Tailwind.
 *
 * Example :
 *
 * .bg-pattern-graph-paper { ... }
 * .skew-45 { ... }
 *
 * Or if using a preprocessor..
 *
 * @import "utilities/background-patterns";
 * @import "utilities/skew-transforms";
 */

Then change your webpack.mix.js file to use the tailwind plugin.

var tailwindcss = require('tailwindcss');

mix.sass('resources/assets/sass/app.scss', 'public/css')
  .options({
    processCssUrls: false,
      postCss: [ tailwindcss('tailwind.js') ],
  });

And that's it, run npm run dev and you'll have a css file in your public folder with tailwind css in it.