The problem: doing complex layouts on browsers

Implementing complex layouts in web projects has always been a hassle for developers and designers. To sum up roughly the history of doing layout, we had:

The Jurassic Era: <table> s all the way were used to define rows, columns, sidebars, align elements and whatsoever. At the beginning, not even CSS was available

The Dark Ages: CSS came to the rescue! Many frameworks like Bootstrap and Foundation were based on float elements. While a big jump ahead compared to the Jurassic Era, legends say thousands of developers died while trying to vertically align a span inside a div

The Present: the rise of the CSS flexbox API is a revolution. There’s no reason to not use flexbox nowadays, unless you’re stuck in some huge enterprise project that must support old browsers. If you are, I’m sorry…

(The future? Maybe the CSS grid API, but we’re not here to talk about it)

However, the flexbox API is not perfect. The API is complex and there are still many inconsistencies between browsers that force developers to overuse vendor prefixes and literally do magic tricks to achieve the desired layout.

For these reasons, we asked ourselves: is there a way to simplify the API and handle any browser inconsistency in a single place?

Introducing FlexView: our solution to the problem

Here’s a typical CSS snippet using flexbox:

.flex-view {

// flex

display: flexbox;

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;



// direction

webkit-box-flex-direction: row;

moz-box-flex-direction: row;

ms-flex-direction: row;

webkit-flex-direction: row;

flex-direction: row;



// grow, shrink, basis

webkit-box-flex: 1 1 200px;

moz-box-flex: 1 1 200px;

ms-flex: 1 1 200px;

webkit-flex: 1 1 200px;

flex: 1 1 200px;

}

And this is how you do it with FlexView:

<FlexView grow shrink basis='200' />

Now that I have your attention let’s dig more into FlexView’s API :)

FlexView is first of all a React component, and like any good React component it’s stateless and works exclusively through props: