Vital CSS Framework

A minimally invasive CSS framework for modern web applications

May 04, 2016 | Body Taing

Learn more about Vital
Get started using Vital
Integration with Rails: Ruby Gem


Another Front-End Framework... Why?

With an abundance of well-known options that are backed by years of refinement, why reinvent the wheel?

The answer is simple: The wheel doesn't fit.

The Problem

The allure of quick setup drew us into experimenting with Bootstrap in some applications. Setup was easy, but maintenance was not. We spent more development effort that we would have liked to tackle simple problems.

Customizations to meet business requirements became difficult. Since there was already so much code and structure in the original framework, customization always resulted in excess amounts of code. This made for an unpleasant and unmanageable code base. There were also too many framework options and features that went unused.

While we could have customized the build to decrease the size of the footprint, the complexity and size of individual components was still too great. Massive frameworks like Bootstrap and Foundation were just too bloated for us.

Get Real

The issue became real several years ago when our early stage startup went from having to maintain one application to about ten. We needed a custom solution that could scale as fast as we did. So we decided to continually develop and maintain our in-house framework.

Productivity

Productivity was a key factor in the formalization of Vital. As the need for a multitude of small applications grew, so did our users demand for mobility. The framework needed to encapsulate easy mobile optimizations while still maintaining desktop friendliness.

Some things we wanted out of Vital:

  • Light enough to load and render quickly on slow cellular networks
  • Scalable on all devices and screens
  • Easy to read, write, and maintain
  • Quick to compile and refresh locally
  • Customization friendly
  • Doesn’t require heavy nesting, structures, or classes

Efficiency

Everyone writes code a little differently, and that’s okay. But when working in a team, code should be somewhat consistent. We wanted to allow code style to be flexible enough for individuality in code, but rigid enough to minimize technical oversight. This allows new and existing team members to work efficiently.

Mobility

Our mobile usage exceeds our desktop usage, so we wanted to keep Vital lightweight and optimized. We integrated the ability for each application to generate custom font iconography, keeping HTTP requests to a minimum. In addition to being quick, most form elements render consistently while gracefully degrading on legacy browsers - a huge plus for branding.

At just 22 KB minified, the Vital CSS framework is very small. Vital is also written almost entirely in em values, so scaling is easy and the code remains minimal.

Size Breakdown:

Size Gzipped
CSS Framework 22 KB 6 KB
Icons (.svg) 3 KB 1 KB
Icons (.eot) 2 KB
Icons (.ttf) 2 KB
Icons (.woff) 2 KB
Javascripts 0
Total 31 KB


Did We Make The Right Choice?

Simply, yes. When our business requirements change, we pivot faster than ever. Writing and editing has never been easier. Maintenance across various applications has been minimal. Vital is currently integrated into all of our applications that have a UI. Each application is fully customized to meet user and business needs.


Learn more about Vital
Get started using Vital
Integration with Rails: Ruby Gem