Super GiGi Flexbox grid system

Flexbox has been getting lots of attention lately, and rightly so, as it makes it possible to solve problems in unique and responsive ways.
You might want to take into consideration Flexbox-based layouts in case you are building a truly responsive web application and you want to take advantage of cool Flexbox properties like ordering, direction, wrapping, growing, etc.

In this post I’m going to explain how to get started with Super GiGi, a Flexbox based grid system created by the people at Objectway and by Davide Di Pumpo in particular.

But first, here’s what Davide himself has to say about SuperGigi:

“When you design a website, usually you will use some kind of grid system. There are a lot of frameworks on the old wide web that will help you accomplish this. Sometimes they use float, sometimes they use tables, but there are a few that are using Flexbox.
And if you know Flexbox you know two things about it: 1, It’s awesome and 2, it can be a pain to do general layout with.

Yeah I know, Flexbox isn’t meant to be used to develop grid systems. For this you should use CSS Grid. But you know, nobody (but Internet Explorer °_°) supports this feature yet…

So Super GiGi does exactly this. It will help you set up your own Flexbox grid system, carrying in all the tricks to achieve cross browser support (yes, even IE), solutions for the known Flexbug, optimisation for performances, and a lot of helpers to build a “row -> columns” structure that will be easier to manage and to maintain.

Super GiGi’s main purpose is to be compliant to the separation of concerns; the first impact can weird you out if you are used to a framework like Bootstrap or Foundation, but after a while (especially if you are used to Susy or similar) you will see the benefits of this choice.”

Now we’re ready to start getting acquainted with Super GiGi!

Learning more about Flexbox

In case you want to know more about Flexbox in general, I recommend checking out the following resources:

Getting Started

First things first, download the repository, or even better use bower or npm to install it.

In my case, I installed it with bower, like so:

bower install super-gigi -S

Then be sure to import the main.scss file at the start of your manifest style.scss (the one you use to import all other scss files), like:

@import [path to super-gigi]/dist/main

Let’s get rolling

As you might have noticed, the documentation contains quite a bit of available configuration, but don’t let that scare you.
This is how you can get started real quick to get a feeling of how this works.

First of all, detect your outer container (aka a row) and the inner columns, then style them like:

.Container {
  @include grid-row(false); // set it to true if this is nested inside another container
}

.Container__header {
  @include grid-column(4);
}

.Container__main {
  @include grid-column(8);
}

You will see that now your layout has got the familiar columns layout.

It is worth noting that the grid-row() mixin uses “flex-direction: row” property by default. In case you need boxes to stack vertically, you will need to use:

grid-row(false, true)

where the first attribute is to determine if the container is nested (in this example it is not), and the second is used to determine the flex-direction.

Also worth mentioning is the fact that the grid-column(), which is the most important mixin in the whole library, takes a number of parameters which will speed up development time considerably. Here is an example taken straight from the docs:

.foo {
  @include grid-column(
      $width: (xxsmall:6, large: 6),
      $push: (xxsmall:6, large: 12),
      $pull: 1,
      $order: 0,
      $collapse: false,
      $global: true,
      $eq-grid: false
    );
};

And an everyday use case:

.Column {
  @include grid-column($width: (small: 6, medium: 4, large: 3));
};

Changing basic settings

There is a wide number of settings that you might want to change to have Super GiGi work just like you need it, but before checking them out, let’s see how to overwrite the defaults.

First of all, if you wish (you know you do) to use Super GiGi’s utility functions, you should import Super GiGi’s _functions.scss file before anything else.

So your manifest style.scss (where you keep all your imports) will look like this:

@import '../bower_components/super-gigi/dist/helpers/functions';
@import '[path-to-your-variable-file]/variables';
@import '../bower_components/super-gigi/dist/main';

Now, to change the basic settings, you just need to write new variable values in your variables file. Something like:

$column-gutter: rem-calc(100);
$rem-base: 21px !default;

One special mention for breakpoints. Those values are arranged in a $breakpoints variable, which you can change if you wish, to something like the following.

$breakpoints: (
  xxsmall: 0em,
  small: em-calc(768),
  medium: em-calc(1024),
  large: em-calc(1400),
  xlarge: em-calc(1800)
);

Hint: you can see all the default variables in the file:

@import [path to super-gigi]/dist/helpers/_variables.scss

Remember that this grid is mobile first by default, but in case you need it to be “desktop first”, you can set this variable in your _variables.scss file:

$query-direction: (max-width, min-width);

Functions

Super GiGi includes a number of useful functions as well, for example the media-query function. Just pass a breakpoint name to make it work.

@include media-query(medium) {
  // some rules
}

We also have things like rem-calc() to calculate rem values starting from pixels, dry-it() to clean up your code, hide-from() and show-from() to hide or show starting from a certain breakpoint, and much more. You can find them all documented in the repository.

Conclusions

Lots of work and thinking went into Super Gigi, and you can tell. This is a powerful Sass library, and an absolute must if you need to deal with ultra-responsive Flexbox layouts.

You can follow Davide Di Pumpo on Twitter. Davide is also the author of the Super GiGi logo!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s