The first thing to check out when considering a framework is the grid system being used by the framework.
This is usually a deal breaker if it doesn’t suit our design, but Gumby has a trick up its sleeve: when it comes to Gumby, we have a standard 12 column responsive grid, however Gumby also enables a hybrid grid; this means we can switch to a different grid whenever we choose to. So for example, to switch from the default 12, to a 16 column grid mid-page, we’d simply use:
Pushing and pulling
We also have the flexibility to move columns around. We can push columns to the right, or pull them to the left.
When we push columns to the right, we create extra space. For example, if you created a grid with two columns, one 6 units wide and one 4 units wide, you could ensure the second column was flush up against the right hand side of the page by pushing the column 2 units with the class push_two.
As well as pushing columns, we can pull them. Pulling a column is used in combination with pushing to rearrange the order of columns.
Let’s imagine that instead of our four-unit column being flush to the right, we want to reverse the order and have it flush to the left. Firstly, we’ll need to push our first column by 6 units, and then pull the second column by 6, leaving a gap of 2:
Of course, a nice UI is always a big plus point when we’re working with a framework, especially at the prototyping stage.
Gumby gives us a good selection of UI components to choose from.
Let’s start off by looking at Gumby’s buttons. To create a simple button we’ll type:
This will generate a medium sized button, blue by default, that uses the flat style most designers will prefer to start with.
If we choose to, we can also add a number of different classes that will create different rounded styles, they are: oval, rounded, pill left, and pill right.
We also have some badges, labels and alerts we can use that come with same set of colors to fit right into our design:
- You missed something
Forms are always a tricky aspect of a site to style. Happily, Gumby really excells at styling forms. For example, to create a Gumby styled input, you wrap the input in a div with the class field:
You can also choose from different sizes of input such as xnarrow, narrow, wide, xwide, and xxwide, to adjust the input accordingly.
Effective navigation is UX 101, and again Gumby comes up trumps with a flexible and responsive solution.
Whilst it’s not the simplest code you’ll ever see, it’s far from the most complex and the added layer of difficulty pays off with the extra functionality.
We can also choose between styles, by adding the pretty class to the navbar div we get a different style with more gradients and effects. We can also pin our navigation to the top with ease by just adding the attribute
to the navbar div.
There are plenty of cases where tooltips are necessary for usability, not everything is understood at first glance so adding these is a major help and Gumby makes adding these tooltips to an element a really simple process:
These tooltips are built using only CSS and by default and they come with the pretty Gumby style instead of the metro one.
Believe or not this is just the beginning of the Gumby framework , this framework is without a doubt a very complete one, in this lesson we talked about the UI Kit and Grid but there is still much more to go around and the really interesting parts haven’t even started , in the next couple of tutorials we’ll take the process further and look at more of what Gumby has to offer.