“
Since their first introduction in the 50s, grid systems allowed
designers to speed up their process by creating a simple base
structure where to freely develop their own ideas. In the last
few years of web design, lots of grid systems were created to port
this tool to the digital age. However, most of them, due to rapid
aging of technology, are now outdated, while others simply can’t
be called grids since they don’t allow to keep vertical rhythm.
The need for a definitive solution to web grid systems is the main
concept behind this new digital iteration of the famous Unigrid,
one of the best works by italian graphic designer Massimo Vignelli.
Even if you’ll find a download button, this grid system is not only a
file to be added during development, but a strong concept that can
be used on any device, thus being a timeless idea, not subject to
technological aging. ”
Calculating the grid
All the elements of the grid are based on
a unit we’ll call U. U is obtained by splitting all
the space available in the viewport in a
defined amount of subdivisions. U is then
equal to the gutter, the space between
modules of the grid.
Modules are always square and obtained
by multiplying U for a set amount of times.
These squares can be easily stacked and
grouped, allowing "modularity".
As a result, setting text with a line height
based on U will fall perfectly on the grid.
Finally, just like the original Unigrid, outer
margins have a fixed proportion of 2xU.
Other elements such as the header and
inner black stripes should be also
calculated from U to mantain coherence
(like the ones in this page).
Rhythm
Just like music, Uniweb has a sort of tempo you can sync to. The 1x1 module is the click sound: simple or complex layouts can be built upon it, but they will always stick to the base “beat”.
Responsiveness
Unlike the original brochures, viewports aren’t fixed on the web, so grid systems must support lots of different screen resolutions. Uniweb calculates U from the maximum space available, scaling the number of columns so that each module will always have an appropriate size, on desktop or on mobile phones.
There are 5 layouts: 12 columns (desktop, covering more than 1600 pixel screens), 8 columns (laptops from 1300 to 1599 px), 6 columns (tablets from 1024 to 1299 px), 4 columns (phablets up to 1023 px) and 3 columns (for phones, landscape or portrait modes, up to 639 px). Media queries can be fine tuned to better adapt the switches to the design of the page.
Unlinke many other grid systems, Uniweb covers the whole space available in the viewport. However, single column websites can be made as well by leaving empy modules on the sides.
Lightweight
Uniweb consists of few lines of CSS code, no extra plugin or file is needed. It’s a single file that weights around 10KB, but you can get a minified version to save an extra 4KB.
Support
Uniweb uses viewport-percentage lenghts (vw and vh units) as it’s the only way to get a true responsive layout with squares as modules. All of the modern browsers are supported, but you can check caniuse.com for further details about vw and vh support.
A javascript polyfill may be required if you need to support older browsers, which is not included in this release.
Container and elements
First you need to specify a container, it’s a
simple <div> with “main” as id. This will
create a sandbox with font-size: 0, so you
can place all the modules you want without
worrying about line breaks.
Each module is yet another <div>. First you
must declare “element” as class, so that it
will be treated as a module. Then you need
to specify height and width of the module,
for each layout of columns.
As shown in the following table, a 1x1
module is written as h1_w1. An element 3x6
will be h3_w6 and so no. Some of the most
common sizes are provided in the CSS, but
you can create more of them by multiplying
(1x1 module + gutter).
You must specify the size of the element for
each step, using the right prefix: l for laptop,
t for tablet, p for phablet, m for mobile and
no prefix for desktop.
You should get something like
class=”element h1_w12 lh1_w8 th1_w6
ph1_w4 mh1_w3”.
Some additional classes are provided, like
“desktophdn” (laptophdn and so on) to hide
an element at a particular step; “autoheight”
(l_autoheight and so on) to fit the container
to the height of the content and “nomargin”
(l_nomargin and so on) to remove the right
gutter in case of nested layouts.
Uniweb in use
This website is of course made using this
grid system, you can view the underlying
Uniweb using the switch on the right.
Another website I suggest checking out is
Archivio Grafica Italiana
where you can see the Uniweb in action.
show grid
Downloads
Development and production (minified)
versions are available. Include the css at the
top of the page just like any other stylesheet.
A PDF template is available for your next
web design project. It contains all the
layouts of the Uniweb with the right
proportions.
The Unigrid by Massimo Vignelli
In 1977 Vignelli Associates designed the
basic format and prototypes for all
publications of the United States National
Park Service. Unigrid was the name given
to the flexible grid with its iconic
identification black band at the top, which
was used for brochures, bulletins and
books. Check out Vignelli Associates’
website, this article
and this Flickr album for
more information.
Copyright ©2015 Alberto Arlandi
back to the home page
