Integrating and Using CSS Frameworks with Vue.js

Introduction

CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step and more part of the development process. Generally speaking, integrating each framework is generally the same, so the installation process will work with either Bootstrap, Bulma, or Foundation.

Code examples in this post will be written using Bootstrap 4 as it’s the most widely used. However, best practices apply to all. This is intended to be a general overview and not as a robust guide.

Adding a Framework to Vue.js

Before you begin downloading a CSS framework, be sure to install and create a new project with the Vue CLI and follow the prompts:

npm install vue-cli
vue init webpack project-name

Installing Bootstrap 4

After you initialize a new Vue project, download Bootstrap 4 with npm. Since Bootstrap 4’s JavaScript is dependent on jQuery, you will also need to install jQuery.

npm install bootstrap jquery --save

You’ll want to add the Bootstrap dependencies in your main.js file below your Vue imports so it’s available globally to the entire application.

import './../node_modules/jquery/dist/jquery.min.js';
import './../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './../node_modules/bootstrap/dist/js/bootstrap.min.js';

If your application fails to build, just install the popper.js dependency. After that, it should build properly.

npm install --save popper.js

Congrats, Bootstrap 4 is installed! Bootstrap’s Docs are a great resource to get you started with the basics like using columns, rows, buttons, and more.

Installing Bulma

Bulma is a lightweight and flexible CSS framework that’s based on Flexbox. It’s created by Jeremy Thomas and has over 25k stars on GitHub at the time of this writing.

Unlike Bootstrap, Bulma only contains CSS, so there are no jQuery or JavaScript dependencies.

Install Bulma:

npm install bulma

After Bulma is downloaded, open up your main.js and import it.

import './../node_modules/bulma/css/bulma.css';

Bulma is now ready to use in your Vue.js application. The Bulma Docs is a great resource to get you started.

Installing Foundation

Foundation is a framework created by the fine folks at Zurb. Foundation has two frameworks; one for email and one for websites. We want the Foundation Sites framework since we’re only concerned with using Foundation in our web app.

Install Foundation Sites and import it into your main.js file:

$ npm install foundation-sites --save

Import it into your main.js file:

import './../node_modules/foundation-sites/dist/css/foundation.min.css';
import './../node_modules/foundation-sites/dist/js/foundation.min.js';

The Foundation Docs are an excellent resource for learning the ins-and-outs of Zurb’s Foundation framework.

Implementing Best Practices With Vue

Down to their core, these three frameworks are very similar: they all work with rows and columns. These rows and columns create a “grid” that you can leverage to create your user interfaces. This grid lets you easily change the width of your columns by device-width, just by adding or changing the classes that are appended to an element.

It’s considered best practice to use the framework’s classes whenever possible. Each of these frameworks has been carefully crafted for ease-of-use, scalability, and customization. Instead of creating your own button with its own classes, just create a button using Bootstrap, Bulma, or Foundation.

<!-- Bootstrap -->
<button class="btn btn-primary btn-lg">I'm a large Bootstrap button</button>

<!-- Bulma -->
<button class="button is-primary is-large">I'm a large Bulma button</button>

You can configure each of these so that btn-primary (Bootstrap) or is-primary (Bulma) references your brand’s colors instead of the default blue/green color that gets shipped with Bootstrap and Bulma, respectively.

If you need to create your own theme with your own brand, you can create a global stylesheet that overrides the framework’s global styles; you do not want to modify the framework directly.

Creating Your Own Theme

To create your own ‘theme’, create a new CSS file and place it in the assets directory and import it into your App.vue file. It’s important not to scope your App.vue file.

import '@/assets/styles.css';
...

Try mapping some default styles that match your brand to some Bootstrap components:

/* Buttons
--------------------------- */
.btn-primary   { background: #00462e; color: #fff; } /* dark green */
.btn-secondary { background: #a1b11a; color: #fff; } /* light green */
.btn-tertiary  { background: #00b2e2; color: #fff; } /* blue */
.btn-cta       { background: #f7931d; color: #fff; } /* orange */

/* Forms
--------------------------- */
.form-control {
  border-radius: 2px;
  border: 1px solid #ccc;
}

.form-control:focus,
.form-control:active {
  outline: none;
  box-shadow: none;
  background: #ccc;
  border: 1px solid #000;
}

Keeping the Reusability of Components in Mind

When working with any CSS framework and Vue.js, it’s important to keep the reusability of the component in mind. What do I mean by that? Well, you don’t want to mix layout CSS with the component itself. You’ll want to reuse the component at some point, and for that other instance, another layout may be needed.

A Bad Example

<template>
  <div class="row">
    <div class="col">
      <nav>
        <ul>
          <li><a href="#">Navigation Item #1</a></li>
          <li><a href="#">Navigation Item #2</a></li>
          <li><a href="#">Navigation Item #3</a></li>
        </ul>
      </nav>
    </div>
  </div>
</template/>

<template>
  <div>
    ...
    <Navigation/>
  </div>
</template/>

This navigation may be intended to be used in both the header and the footer. Both of which should look very different but contain the same information. Let’s strip out the layout HTML and move that to its parent/base component.

A Better Example

<template>
  <nav>
    <ul>
      <li><a href="#">Navigation Item #1</a></li>
      <li><a href="#">Navigation Item #2</a></li>
      <li><a href="#">Navigation Item #3</a></li>
    </ul>
  </nav>
</template/>

<template>
  ...
  <div class="row">
    <div class="col">
      <Navigation/>
    </div>
  </div>
</template/>

Conclusion

CSS Frameworks make your life as a developer much easier. They make your application’s template code universally understood, consistent, easier to maintain, and easier to write. You can focus more on the app’s functionality and overall design rather than focusing on common tasks, like creating a button from scratch.

Bootstrap, Bulma, and Foundation are just the three widely used frameworks right now. However, you aren’t limited to just those. There are plenty of other frameworks to out there, ready for you to explore including, Semantic UI and UI Kit.