Vital CSS – A Minimally Invasive Web Framework

By Jake Rocheleau. in Toolkit. Updated on April 3, 2018.

Move over Bootstrap cause there’s a new CSS framework in town. It’s called Vital and it strips frontend development down to the bare essentials.

Vital comes with only CSS and has zero JavaScript libraries or dependencies. And the Vital.css stylesheet is only 31KB minified, including icon fonts.

Just Bootstrap’s CSS file alone totals about 118KB. Vital is almost 1/4th the size of Bootstrap! It’s built for developers who just need a fast solution for their next project.

Vital is a completely open source framework with all code available on GitHub to peruse.

Everything is built with Sass for CSS and Slim for HTML. But this is only for development, so if you’re using Vital for production then you can just export the pure CSS directly.

The latest versions are available for download on the releases page and these include the CSS code along with custom icon fonts. You’ll also find plenty of HTML & CSS demos and some basic documentation on the GitHub page.

But the real good stuff can be found on the components page. This lists everything you get with Vital, including grids, typography, buttons, loaders, tables, tabs, form inputs and so much more.

None of these features rely on JavaScript, which is a huge bonus. Granted you can do more with JavaScript but it’s nice to not worry about JS while styling the frontend.

You can recreate any element from the components page just by using a CSS class. These classes can be somewhat automated if you use Slim, so there is a slight advantage for Sass/Slim users.

But Vital can work well for any developer with some HTML/CSS experience. It’s a totally free framework and it’s much lighter than the alternatives.

To learn more, check out the Vital homepage or skim through this article written by the creators of Vital discussing why they created the framework and the problems it’s meant to solve.