Flexbox: The future of CSS and the demise of frameworks?

Flexbox: The future of CSS and the demise of frameworks?

Facebooktwittergoogle_plusredditpinterestlinkedinmail

 Flexbox: A useful CSS tool or a fad?

world wide web consortium
world wide web consortium W3C sets the standards for developers of the WWW

For a number of web developers Flexbox is a word they ignore and continue with their framework or something they put off learning.  It is only recently that I put in the time to explore it and get a grasp of what it is capable of. Understanding the ambivalence the web design community has towards this part of CSS3 requires a little history.

A brief history of web and graphic design

In the 1990’s graphic design and web design sheared a common attribute. They were both pixel perfect.  The resolution issue with computers such as 640 x 480(early 90’s), 800 x 600(mid 90’s) and 1024 x 768(late 90’s) pixels. The web designer would design for one of these target resolutions depending what the current standard was. The print designer also would choose a static resolution and the dimensions would  be set for print – usually 300 dpi – but nonetheless the were a fixed size. 

The split of print design and web design

Graphic and Print design did not change change is this respect. However, internet did. Websites were now in demand on different mediums such as: big screen TV’s, Tablets and smart phones. A website designed for a computer would look ridiculous on a cell phone where the user would continuously scroll horizontally to view all of the content. On a large monitor, an website would look like a small box in the center of the screen.

Web designs had to adapt to this new phenomenon. The answer was “responsive design”

The birth of Responsive Design

Earlier versions of CSS up to and including 2.1 were concerned with a fixed-size layout. Mobile phones and later smart phones were everywhere. For the first decade of the new millennium no two browsers were able to agree on standards and finally CSS3 was officially released in 2011

From 2011 till today internet traffic has seen an increase to over 50% of all websites viewed on a medium other then a computer.  CSS3’s answer is called media queries. basically new style rules are created depending on the size of the width of the screen. These are placed within the @media screen and(max-size/min-size x number of pixels){.some-class{ properties: value;}#some-id{properties: value;} …ad nausium}

Unfortunately, many designers find it tedious using media queries. Rewriting rules for many screen types, especially for  large websites, can be quite time consuming.

Frameworks

Front-end frameworks (also called grid systems) have been and continue to be very popular. Twitter’s Bootstrap and Foundation have the largest user base.  Frameworks have pre-written: HTML CSS and JavaScript code.

Frameworks have a very low learning curve. A complicated layout can be done as simpily be done by placing different classes in the HTML tags. Usually one for a cell phone, tablet and a computer. CSS and Flexbox does not provide that level of simplicity. In fact, Frameworks are written in HTML, CSS and JavaScript. However, frameworks have one major problem. It is called overhead. Huge style sheets and JavaScript libraries get loaded along with a website. Load-time is critical for any website as if a user can’t get information within seconds, they will just go to the next link.

Internet Explorer. Friend or foe of the internet?

Internet Explorer is a hurdle that web designers have to cross when considering browser comparability. It has lagged behind Chrome, Firefox, Opera and Safari even before the need for responsive design.

Unlike other browsers that use open source rendering engines(Chrome – Webkit, Firefox – Mozilla, etc) Explorer uses a proprietary engine, relies extensively on the archaic active-x control and comes with the operating system. Useful updates are few and far between and Microsoft does not care about the W3C standards. Why should they? IE comes with the windows operating systems, so many newcomers to the internet think that IE is the web.

Also, since Internet Explorer comes pre-installed across all Windows operating systems. It is frowned upon by many office managers to download other web browser software due to security issues and the predominance of viruses. CEO’s want to keep things simple and Explorer is the perfect marriage between Microsoft and the rest of the corporate world.

Internet Explorer and Flexbox

Flexbox is new. Unfortunately, the web design community awaits Internet Explorer 8 – 11 to lie in the virtual casket before web designers can use Flexbox with confidence.

Nevertheless, Flexbox is extremely important to learn and use. However, until the dirges start playing for the archaic IE and Microsoft has to conform to the necessary W3C standards we may just need to use a lot of browser prefixes in our code to tell our style sheets when Explorer is watching.

Leave a Reply