Tutorial

Integrating and Using CSS Frameworks with Vue.js

Updated on October 12, 2020
Default avatar

By Dave Berning

Developer and Author

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.

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

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.

main.js
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:

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

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

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

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

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

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar

Developer and Author

I’m a software engineer from Cincinnati. I work on TypeScript apps with Vue.js. Currently a Senior Front-End Engineer at Enodo, based in Chicago.



Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel