Integrating and Using CSS Frameworks with Vue.js

Dave Berning

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.

main.js

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

If you haven’t heard of Bulma, you should look into it. It’s 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’s no jQuery or JavaScript dependencies.

$ npm install bulma

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

main.js

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

No extra steps. Bulma is ready to use in your Vue.js application! The Bulma Docs are a great resources 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.

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

$ npm install foundation-sites --save

main.js

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

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.

As stated before, the examples below are using Bootstrap 4. However, these best practices with row-column based frameworks apply to all.

It’s considered best practice to utilize the framework’s classes whenever possible. Each of these frameworks have 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.

App.vue

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

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

styles.css

/* 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;
}

Keep 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

Navigation.vue

<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/>

App.vue

<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 it’s parent/base component.

A Better Example

Navigation.vue

<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/>

App.vue

<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.

  Tweet It

🕵 Search Results

🔎 Searching...