Skip to main content

Getting started

An overview of kimsQ RC, including how to download and use it, some basic templates and examples, and more.

Flexbox

Flexbox support has finally come to kimsQ RC. Opt-in to the new CSS layout styles with the flick of a variable or the swap of a stylesheet.

Contents

What’s included

Flexbox support is available for a number of kimsQ RC’s components:

  • The entire grid system (mixins and predefined classes), which switch from floats to display: flex;.
  • Input groups, which move from display: table; to display: flex;.
  • The media component moves from display: table; and a number of hacky styles to a simple display: flex;.

Vendor prefixes are provided in our compiled CSS with Autoprefixer via Grunt. Some bugs in IE10-11’s Flexbox implementation are worked around via postcss-flexbugs-fixes.

Why flexbox?

In a nutshell, flexbox provides simpler and more flexible layout options in CSS. More specifically, it provides:

  • Easy vertical alignment of content within a parent element.
  • Easy reordering of content across devices and screen resolutions with the help of media queries.
  • Easy CSS-only equal height columns for your grid-based layouts.

All these things are possible outside flexbox, but typically require extra hacks and workarounds to do right.

How it works

If you’re familiar with modifying variables in Sass—or any other CSS preprocessor—you’ll be right at home to move into flexbox mode.

  1. Open the _variables.scss file and find the $enable-flex variable.
  2. Change it from false to true.
  3. Recompile, and done!

Alternatively, if you don’t need the source Sass files, you may swap the default kimsQ RC compiled CSS with the compiled flexbox variation. Head to the download page for more information.

Browser support

Enabling flexbox means reduced browser and device support:

  • Internet Explorer 9 and below do not support flexbox.
  • Internet Explorer 10 has a few known quirks (see the “Known issues” tab in Can I use…), requires using a prefix, and only supports the syntax from the old 2012 version of the spec.

Please be extra conscious of your user base when enabling flexbox in your project. Visit Can I use… for details on browser support of flexbox.