Setup / Installation

---

Quickest (Compiled)

Import into stylesheet or as a stylesheet link tag:

https://cdn.rawgit.com/doximity/vital/v2.2.1/dist/css/vital.min.css

Note: Vital v2.x is not backwards compatible with v1.x. Some things may break. You may need to do some refactoring.

---

Recommended (Source)

Vital works best when manipulated directly so download the latest package release from GitHub and extract its contents into your one of your project's sources directory. This installation method is preferred if you want to develop your own unique branding while keeping code output to a minimum. One possible caveat to this method is you sacrifice future upgradability as you may encounter breaking changes.

The released tarballs include different flavors of the framework that you can use depending on your needs. Its structure looks as the following:

dist/
├── css
│   └── ... precompiled CSS files ...
├── sass
│   └── ... framework sources as SASS files ...
└── scss
    └── ... framework sources as SCSS files ...

Depending on your project needs, copy the appropriate version of the stylesheets (CSS, SASSor SCSS) directory over to a directory within your project's sources that can be accessed from a browser.

Read the documentation for information on the basics of setting up a common application layout.

---

Rails

Add the gem to your project's Gemfile:

gem 'vital'

And add the following at the top of your project's app/assets/stylesheets/application.sass.css:

@import vital/all

vital/all includes everything. You can also import individual partials depending on your needs:

// Vendor
@import vital/normalize

// Components
@import vital/variables
@import vital/mixins
@import vital/icons
@import vital/grid
@import vital/base
@import vital/buttons
@import vital/footer
@import vital/forms
@import vital/header
@import vital/heroes
@import vital/loaders
@import vital/notice
@import vital/pagination
@import vital/tables
@import vital/tabs
@import vital/syntax
@import vital/helpers

// Layouts
@import vital/layouts/background_cards
@import vital/layouts/bordered_lists
@import vital/layouts/photo_collages
@import vital/layouts/feed_cards

// Your customizations
@import custom

Most partials are optional.

Small reusable classes should be placed in _helpers.sass and larger, more unique code should live in _custom.sass.

Application layout

Your typical application layout HTML would look something like this:

doctype html
html
  head
    meta content='IE=edge' http-equiv='X-UA-Compatible'
    meta charset='UTF-8'
    meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' name='viewport'
    title Vital
    = favicon_tag 'images/favicon.ico'
    = stylesheet_link_tag :vital
  body
    = partial 'layouts/header'
    .contents
      = yield
    = partial 'layouts/footer'

---

Bower / NPM

bower install --save vital
npm install --save vital-css

And reference the assets from within your project's bower_components/vitalor node_modules/vital-cssdirectory

Webpack

Install vital-css and dependencies:

npm install --save css-loader sass-loader node-sass extract-text-webpack-plugin vital-css

Add the vital-cssmodule in your webpack.config.jsin order to easily import it in any Sass file:

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './src',
  output: {
    path: __dirname + '/build',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.sass/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',

          use: [
            { loader: 'css-loader' },
            {
              loader: 'sass-loader',
              options: {
                includePaths: [require('vital-css').includePaths]
              }
            }
          ]
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css")
  ]
};

And then you can just reference all of Vital with a single import within your .sass files:

@import "vital"

Or include only the components you need:

@import "vital/base"
@import "vital/variables"
@import "vital/forms"