Vital CSS Framework

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.