Technical case study: CSS Flexbox for BEKB Flash

The Berner Kantonalbank here in Switzerland asked my employer !frappant to assist in migrating their customer newsletter from a print edition to an online “microsite”. The team developed the multilingual site late last year, based on a visual and content concept from a third-party designer, and we launched the initial version in time for the first of the new digital issues.

The newsletter is published four times each year and we’ve released a technical update alongside the second issue. During the development phase, my role has been to lead the development and to take care of the “front end” of the site, which runs using the TYPO3 CMS. A personal focus for me has been to continue developing my knowledge and practical experience of working with CSS Flexbox and Sass: a killer combination for creating modern, future-friendly and modular code. This project also sees my third foray using a few of the Sass mixins from Zurb’s Foundation framework.

CSS Flexbox is one of two ultra-modern technologies for front end layout development, yet it’s been around in two forms since 2009. (The other ultra-modern technology – CSS Grids – isn’t publicly available yet. Soon, soon…!)

A first attempt to implement a system of creating better grid layouts during the development phase of Flexbox v1 fell a bit flat, but the technology has been massively overhauled to reach its current status in most modern web browsers. Where front end developers used to have to work with “floats” and “clearfixes” to get a grid layout working, Flexbox allows a much more logical and semantic implementation. By semantic, I mean that the order of content elements can in some cases be defined to best cater for non-visual screen readers, then sorted visually to create a layout which is appropriate to each visual device. (A true separation of page structure and page style. Although we didn’t go that far in this project.)

A further example which calls for Flexbox is the classic requirement for rows of containers (boxes), each of equal height. A pain in the neck with older float-based code, made simple in Flexbox. For a more full set of examples, check out this page at CSS Tricks.

Browser support!”, I hear you cry. Well, not bad actually: this project was defined to cater for visitors with modern browsers, including Internet Explorer back to version 10. (Which is itself now four years old, no longer maintained by Microsoft, and superseded by IE11 and three full releases of Microsoft Edge.) Flexbox is a little wobbly in IE10, but by compiling the Sass code in Codekit using Autoprefixer, to take care of older syntax, no special workarounds were needed.

Once again, for the sixth project in a row, I didn’t use a single browser-specific workaround to ensure that the layout looks pretty much the same in all browsers at a comparable resolution. (Aside from the necessary vendor prefixes, added automatically by Autoprefixer.) I’m quite proud of that, and aim to continue to build front end code in this way in future projects.