Ink's layout classes are truly fluid and extremely easy to implement.
Tip Before diving into the documentation, download the Ink package available on our homepage so you can try as you go along.
We believe that no website/webapp is created equal—specially in this day and age. That's why we want you to be able to easily control how your layout behaves on different screen sizes.
You can use special class names to specify how wide your columns should be (see section columns for details). But what happens when you need a layout switch and you need a breakpoint? We don't want you to be forced to fallback to a one-size-fits-all kind of solution.
With Ink, you are given three layouts you can use to your hearts content.
By default these correspond to the following screen size intervals (we'll show how you can customize these in just a second):
These thresholds are specified as regular media-queries inside ink.css and can be customized (see next section).
/* INK: LARGE SCREENS */ @media screen and (min-width: 961px) { (...) /* INK: MEDIUM SCREENS */ @media screen and (min-width: 651px) and (max-width: 960px) { (...) /* INK: SMALL SCREENS */ @media screen and (max-width: 650px) { (...)
Warning 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 usualy advise you to keep your changes in a separate file, but in this case, you can't do that.
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 " SCREENS" will get you there).
Coming soon, we'll add breakpoint customization to your fantastic Ink Customizer.
/* 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. ;)
However useful it is to have control, if you want to simplify your markup and use the exact same layout in all sizes you can easily achieve this by simply enabling one of the layouts.
/* 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) { (...)
Boom. Done. Now you only have to use the large classe names (see columns section).
ink-container
This is the main container for your layout. Just wrap everything with a block-level element, such as a div
, with the ink-container
class and you're set. This container unit will carry the width of your layout, which can be a fixed value, such as 960px, a relative value, such as 95% or a relative value with a limit, ie, a maximum width.
Although, typically, you'll wrap entire layouts in an ink-container
, you can close and re-open the container to mix different width elements in your pages. Imagine you have a 960 px webpage, on which you want a 100% width footer. Just close the ink-container
before your <footer>
element, and then use a 100% width class for it.
ink-row
(optional)If you need a set of side-by-side blocks, aka, columns with gutters, you'll need to wrap them in an ink-row
block-level element. These will keep your columns together and work a little negative margin magic to make the gutters work as intended.
If, for some reason, you don't need space between your columns, then the ink-row
is unnecessary and should not be used. A good example is if you need a single 100% column.
So, basically, if you're starting a layout, create a <div class="ink-container">
, followed by a <div class="ink-row">
and then proceed to lay out your columns (see below for layout and spacer elements), close up your blocks and you're done. Need more sections? Go ahead and create another block-level element with the ink-row
class to hold it in place. You can even use <section>
and the ink-section
utility class gives you a separation line.
Let's say you need your page container to always be 80% of your viewport (on large screens).
<div class="ink-container"> <div class="ink-l80"> <p>Content</p> </div> </div>
Layout elements in Ink is where we mix things up a bit from what you may be used to in other frameworks you may have tried before. Instead of defining a grid with a certain number of columns and having you then declare how many columns you need your layout blocks to span, you simply use percentages.
If you need 3 columns, you use three 33% elements; if you need four, then use four 25% elements; it couldn't be simpler. But it's also extremely flexible and the built-in media-queries make building one layout for multiple screens a snap.
You can setup 10, 20, 25, 30, 33, 40, 50, 66, 70, 75, 80, 90 and 100% width units and combinations therein and think in a simple, percentage-oriented, manner, leaving the calculations for each browser box model up to Ink.
100%
50%
50%
66.66%
33.33%
25%
20%
10%
20%
25%
<div class="ink-l100 ink-m100 ink-s100"> <div class="ink-l50 ink-m50 ink-s50"></div> <div class="ink-l50 ink-m50 ink-s50"></div> <div class="ink-l66 ink-m66 ink-s66"></div> <div class="ink-l33 ink-m33 ink-s33"></div> <div class="ink-l25 ink-m25 ink-s25"></div> <div class="ink-l20 ink-m20 ink-s20"></div> <div class="ink-l10 ink-m10 ink-s10"></div> <div class="ink-l20 ink-m20 ink-s20"></div> <div class="ink-l25 ink-m25 ink-s25"></div> </div>
Note: To simplify the example, we're maintaining proportions across the multiple layouts.
50%
50%
100%
50%
50%
100%
50%
50%
25%
25%
25%
25%
<div class="ink-l100"> <div class="ink-l50"></div> <div class="ink-l50"></div> <div class="ink-l50"> <div class="ink-l100"></div> <div class="ink-l50"></div> <div class="ink-l50"></div> </div> <div class="ink-l50"> <div class="ink-l100"></div> <div class="ink-l50"></div> <div class="ink-l50"></div> </div> <div class="ink-l25"></div> <div class="ink-l25"></div> <div class="ink-l25"></div> <div class="ink-l25"></div> </div>
100%
50%
50%
100%
50%
50%
50%
50%
50%
50%
<div class="ink-m100"> <div class="ink-m100"> <div class="ink-m100"></div> <div class="ink-m50"></div> <div class="ink-m50"></div> </div> <div class="ink-m100"> <div class="ink-m100"></div> <div class="ink-m50"></div> <div class="ink-m50"></div> </div> <div class="ink-m50"></div> <div class="ink-m50"></div> <div class="ink-m50"></div> <div class="ink-m50"></div> </div>
100%
100%
100%
100%
100%
100%
100%
100%
100%
100%
<div class="ink-s100"> <div class="ink-s100"> <div class="ink-s100"></div> <div class="ink-s100"></div> <div class="ink-s100"></div> </div> <div class="ink-s100"> <div class="ink-s100"></div> <div class="ink-s100"></div> <div class="ink-s100"></div> </div> <div class="ink-s100"></div> <div class="ink-s100"></div> <div class="ink-s100"></div> <div class="ink-s100"></div> </div>
You should use the ink-lxx
, ink-mxx
and ink-sxx
class names only to specify the container width in the various screen sizes (large, medium or small), as shown in the examples above.
The purpose of these classes should be layout only.
For further customization add an additional semantic class.
To create gutters on you Ink based pages you need to wrap the elements that define column width in a div
element with an ink-row
class, and add anoter div
element inside the columns wrapping all of its content with an ink-gutter
class.
If you need to add vertical space between the layout rows, simply add the .ink-vspace
class to the ink-row
wrapper.
Gutter size changes proportionaly to the screen size, so there's no waste of space!
100%
50%
50%
33%
33%
33%
25%
25%
25%
25%
Note: The example below shows the markup necessary to produce the structure in the example.
<div class="ink-container"> <div class="ink-l100"> <p>100%</p> </div> <div class="ink-row ink-vspace"> <!-- div.ink-row is used to group several "columns" together. --> <div class="ink-l50 ink-m50"> <div class="ink-gutter"> <!-- div.ink-gutter is used to add the gutter to the column --> <p>50%</p> </div> </div> <div class="ink-l50 ink-m50"> <div class="ink-gutter"> <p>50%</p> </div> </div> </div> <div class="ink-row ink-vspace"> <div class="ink-l33"> <div class="ink-gutter"> <p>33%</p> </div> </div> <div class="ink-l33"> <div class="ink-gutter"> <p>33%</p> </div> </div> <div class="ink-l33"> <div class="ink-gutter"> <p>33%</p> </div> </div> </div> <div class="ink-row ink-vspace"> <div class="ink-l25 ink-m50"> <div class="ink-gutter"> <p>25%</p> </div> </div> <div class="ink-l25 ink-m50"> <div class="ink-gutter"> <p>25%</p> </div> </div> <div class="ink-l25 ink-m50"> <div class="ink-gutter"> <p>25%</p> </div> </div> <div class="ink-l25 ink-m50"> <div class="ink-gutter"> <p>25%</p> </div> </div> </div> </div>
Sometimes, re-arranging layouts is not enough. You'll need to make some elements appear or disappear. Feel free to use these class names to help you do just that.
.ink-for-s
only appears when Layout Small is active.ink-for-m
only appears when Layout Medium is active.ink-for-l
only appears when Layout Large is active<p class="ink-for-s ink-for-m">I love mexican food.</p> <p class="ink-for-l">I love mexican food, such as pico de gallo.</p>
By using any of these classes, hides the element on all other layouts.
Note: content hidden via these classes won't be read out loud by screenreaders.
Since Ink's approach to layout is not grid-based, but space division based, we needed to keep things simple spacing wise. Despite meaning the need for extra markup elements, we feel the gained simplicity means you can build stuff faster and easier.
Ink uses seven kinds of spacer unit: a vertical spacer, an horizontal spacer, and all-around spacer and one for each side of your box (top, right, bottom, left). To use them, put a block-level element within your layout element with the corresponding spacer class.
.ink-vspace
<!--Sets width to 33%--> <div class="ink-l33"> <!--Adds vertical margins--> <div class="ink-vspace"> ... </div> </div>
.ink-hspace
<!--Sets width to 33%--> <div class="ink-l33"> <!--Adds horizontal margins--> <div class="ink-hspace"> ... </div> </div>
.ink-space
<!--Sets width to 33%--> <div class="ink-l33"> <!--Adds margins--> <div class="ink-space"> ... </div> </div>