Ink's layout classes are truly fluid, responsive and extremely easy to implement.
Foundation
The way you build layouts in Ink is its prime differentiator from other available web UI frameworks and also one of its strongest suits. You'll find Ink's approach is very intuitive and will have anyone building layouts quickly and consistently.
So, let's get started with the basics, then we will expand upon that so that you can leave this page knowing, not only how to build a layout from scratch, but also how to simultaneously build for three screen sizes.
Tip Before diving into the documentation,
download the Ink package available on our homepage so you can try as you go along.
The container
The block-level element you wrap your entire page with is usually called your container and Ink uses that tried and tested method to get the layout started. This container will define the width of your page, be it a fixed or relative measurement. By default, Ink uses a maximum width of 1200px, but you can change this by customizing the @site-width variable in the __grid.less config file, or, if you prefer, use another customization method, such as described in the Getting Started section.
To start using the main container, create a <div> with the .ink-grid class and you're good to go. Like this:
If you want a single-column page, then you don't need anything else, just use your .ink-grid and pour your content into it. However, if you want a more common column-based layout, then you're going to need to start thinking in rows of side-by-side columns, what we, in Ink, call .column-group, which is again applied to a <div>.
A row is simply a wrapper of columns that keeps them together and helps align spacing between them. You only need a row if you have more than one column side-by-side, otherwise, either just put your content straight in the .ink-grid or use a single, specific-width, column.
Columns in Ink are always fluid, because they're always percentage-based. How much they stretch depends on your page width, as defined in the .ink-grid. This makes column pairing a very simple and intuitive mathematical operation.
If you need two columns taking half of your container each, then make two 50% columns. If you need a 60/40 layout, then just use a 60% and a 40% column. Need three columns, one of which takes up 20% of the space and the other divide the rest between them? Then, use a 20% column and two 40% columns. It's that simple and you'll be surprised how easy it is to make it work across different screens, but more on that in a minute.
Basic columns: the 'large' screen
To get you acquainted with the concept, we'll first explain how this works for large screens, large being an abstract concept used only to make things more intuitive, but which is defined by default to be wider than 960 pixels.
Ink offers all manners of percentage-based widths, from 5 to 100% with various intervals which are combinable to add up to 100 and these are accessible via the large-% classes, in which the 'large-' defines the screen size and '%' is a number from 5 to 100 in the intervals we'll list below (there's no trailing zero for numbers under 100).
Let's continue our previous code and make the two columns into halves of our available space.
Please note This code will not work well without gutters, which come next, but we're going step by step to be absolutely clear and not overwhelm you with information right off the bat.
Available column widths are: 5, 10, 15, 20, 25, 30, 33, 35, 40, 45, 50, 55, 60, 65, 66, 70, 75, 80, 85, 90, 95 and 100%. You can mix and match them to add up to 100, inside a row. You even go over 100, but, obviously, there will be a break in your floats.
Example combinations
100%
95%
5%
90%
10%
85%
15%
80%
20%
75%
25%
70%
30%
65%
35%
60%
40%
55%
45%
50%
50%
66%
33%
33%
33%
33%
The previous grid shows only a few of the possible combinations you can make with the 22 available widths, we'll leave you to imagine the rest, and go on to our last, but not least, basic layout element.
The gutters
In order to create space between your columns, you will need to add gutters. As you might have guessed by the straight-forwardedness of Ink's class names so far, the class to use in this case is .gutters. Just add the class to your .column-group block and you're set.
Keeping up with Ink's flexibility, if you don't like our default wide gutters, then just use .half-gutters or .quarter-gutters, instead, to halve that space.
Also, if don't need the bottom space created by the .gutters class to separate the blocks, you can use .horizontal-gutters, .half-horizontal-gutters or .quarter-horizontal-gutters for horizontal spacing only.
Note The width combination example above uses .half-gutters to make better use of the available space for that particular example.
Now you have all the basic elements to build an Ink layout: a container, a column group, columns and gutters. So we can put it all together, picking up where we left off in our example code.
And that's your basic Ink layout. If you want to follow up with, say, four 25% columns, you just add a .column-group with .gutters, then create each of the .large-25 elements and you're good to go.
Practical Usage
Simple layout
By now, you've realized that Ink's approach is not a grid approach in which blocks fall neatly onto a predetermined
grid of a fixed number of underlying columns,
this really makes it flexible and easy to understand and keep track of code, but it can also mess with your OCD,
if you're the "neatly aligned" kind of person.
However, you can easily bend Ink to your will, by staying within a certain divisor range in your layouts. If you opt for 20 as your base, use 60/40, 20/20/20/20/20 or 80/20 and build layouts that fall on a grid without the constriction of actually having one. If you prefer 25, then use 50 and 75, for example. It's easy and it lets you keep the flexibility of percentage-based layout.
20%-based Layout Example
Welcome to our website
Better
This is our better product line ever, because it's much better than before.
Faster
Our new service is faster than it used to be and that's good because faster is better.
Harder
Our service line is harder and heavier but not in a bad way. It's actually in a good way.
Safer
Instead of huge, horrible security holes, we now offer secure servers and passwords and stuff.
Updated
Have we mentioned this is new? Because it's new, it's better, because studies show that.
Please note for small screens we went with 100% stacked blocks, since there wasn't enough space to keep the 20% grid anymore, but if you check the layout on a medium or large screens you can clearly see how an underlying grid is apparent, even when Ink doesn't have a formal grid system.
Column nesting
Now, obviously, not all layouts are as simple as a content area with a sidebar, a header and a footer. Sometimes, layouts get really intricate and, although we advocate simplicity, Ink allows for all the nesting your project may need.
As a simple example, let's stick with the main column and sidebar layout, but let's make a running sidebar alongside a more complex main area.
We'll start with our main code, which defined a 80% main area and a 20% sidebar, and we'll say the main area has a large picture, followed by two columns with some highlights and then it breaks into four columns with product feature descriptions. All the while, the sidebar will continue.
Simply start adding rows with columns inside the main column and you're done. Remember, percentages are relative units, so when you put a 50% column inside your 80% main area, you're getting half of the 80%, meaning 40% of total space. And that's all you need to keep in mind when nesting columns with Ink.
Should you need to clear floating elements, Ink gives you the .ink-clear, .ink-clear-left and .ink-clear-right utility classes.
If, for whatever reason, you want two columns to be stacked instead of side-by-side, just apply the appropriate clear class, like in the example below.
Please note that this can easily be achieved by wrapping each column in an .ink-row element, which may add extra code, but in the long run is easier to read and maintain.
Adding Space
Ink is carefully crafted to maximize legibility and readability, not only in what comes to typography, but also layout spacing. So, using the basics that you've learned above, you should obtain industry-standard results for presenting your content and not really have to worry much about it, unless if you need deeper customization.
However, sometimes, extra space is essential and so Ink ships with a few simple spacer classes.
Add a .space.vertical-space or .horizontal-space class to any block-level element to obtain an all around space,
a vertical space or an horizontal space, respectively.
More spacing classes are available. To know all about them, check our Glossary.
Tip If you're trying to vertically space layout elements, you should place your .vertical-space in the .column-group element.
Aligning
If you have floating elements that you need to left, right or center align, you can use the three corresponding utility classes .push-left, .push-right and .push-center. You should pair these classes with common width classes, such as .large-50, this is especially important in centering, as Ink uses an auto margin method to achieve that positioning.
Example
This is a 30% wide column, centered, using the .push-center class.
If you need to align content within your blocks, you can use the .content-left, .content-right and .content-center classes.
Example
This is some right-aligned text, using the .content-right class.
Code
<p class="content-right">Your content here</p>
Multiple Screens
As the web becomes more and more device-agnostic, your layouts need to be more flexible and adaptable. That's why there isn't a "normal" and a "responsive" Ink, there's just Ink and it does everything out of the box.
You may have already guessed, from previous examples, how easy it is to build for three screen sizes, but let's dig a little deeper and see how it all works.
Layout for large, medium & small screens
So far, we've talked about the 22 different widths you can divide your layout in, using classes such as .large-50 and .large-25, now let's talk about 'medium' and 'small' layouts.
Using 'large-%', 'medium-%' and 'small-%', together with the 22 widths, you can define how much space each of your containers takes up in each screen; so, imagine you need a column that takes up 25% of a large screen, 50% of a medium screen and 100% of a small one.
Code
<div class="large-25 medium-50 small-100">
This is all you need to do to get your layouts behaving differently in each of three screen sizes. Just make sure you build your large layout first so that you get all the .column-group elements right, because these are crucial to keep stuff together.
So, to keep things simple, Ink defines three breakpoints, with the following widths:
SMALL which catches everything below 650 pixels
MEDIUM which works between 651 and 960 pixels
LARGE which catches everything above 961 pixels
Customizing breakpoints
You can find the media queries for the three breakpoints in the ink.css file.
Caution is advised Customization comes at a price: when we update Ink in the future you'll have to repeat any customization made on the file we provide. We usually advise you to keep your changes in a separate file, but in this case, you can't do that.
Meanwhile, if you do decide to customize the breakpoints provided, you can do this by editing the ink.css by hand and changing the values on those media-queries. (A regular search in the file for "@media" will get you there).
Example Code Using only two layouts (large and small)
/* INK: LARGE SCREENS - ENABLED */
@media screen and (min-width: 767px) {
(...)
/* INK: MEDIUM SCREENS - DISABLED */
@media screen and (min-width: 0px) and (max-width: 0px) {
(...)
/* INK: SMALL SCREENS - ENABLED */
@media screen and (max-width: 766px) {
(...)
Note You can just customize the values. In this example we show how robust and extensible this approach allows you to be. Just don't remove the entire media-query because you may change your mind later in the project.
If you want to simplify your code, for a matter of speed, for example, you may opt to use only large class names, such as .large-80. In this case, everything below the medium breakpoint will revert to 100% width stacked blocks.
If you don't want this default behavior to happen, then disable all breakpoints safe for large. Here's the code to do it:
Code
/* INK: LARGE SCREENS - ENABLED */
@media screen and (min-width: 0px) {
(...)
/* INK: MEDIUM SCREENS - DISABLED */
@media screen and (min-width: 0px) and (max-width: 0px) {
(...)
/* INK: SMALL SCREENS - DISABLED */
@media screen and (max-width: 0px) {
(...)
Showing & Hiding
Building a truly flexible and responsive layout isn't just about offering different layouts or sizes for your blocks, sometimes you need to make decisions that involve only showing certain things in certain screens or even, duplicating blocks to show one version on large screens and a different one on smaller screens. All that is not only possible, but really simple with Ink.
You can either choose to declare what you want to hide or what you need to show. To do this we have several ways:
.hide-all - hides the element, regardless of media queries
.show-all - shows the element, regardless of media queries
To control visibility in a media query context we have:
.show-large - shows previously hidden (display: none) elements in large layouts
.show-medium - shows previously hidden (display: none) elements in medium layouts
.show-small - shows previously hidden (display: none) elements in small layouts
.hide-large - hides (display: none) elements in large layouts
.hide-medium - hides (display: none) elements in medium layouts
.hide-small - hides (display: none) elements in small layouts
So, Ink's philosophy is that you should have the flexibility to either hide everything and then show what you need or do the reverse. This makes it easy to use less code and be clearer.
Here's how you should think about this whole hiding and showing thing: if you have an element that you want to only be visible in small screens, then add the .hide class to begin by hiding it from everyone, then, add the .show-small class to show the element in that screen size.
Now, say you need to show something in both small and medium screens, in that case, you're better off simply hiding it from the large view, by using the .hide-large class.
Since visible is the default state of elements, in the second example, you don't really need to add the .show class to make sure the element is visible in all other screen sizes. However, you do have that class available, in case it may be useful.
Note Content hidden via these classes won't be read out loud by screenreaders.
Here's a simple helper bar to let you know which screen size you're operating in, it uses the .hide class to hide the words "small", "medium" and "large" by default and then the correct .show-% classes to show each word in the corresponding screen size. You can see the code below.
Example The bar below will display different values and colors depending on whether you view it on a large, medium or small screen.