Better grids for a responsive world Written by scottkellum, Designer, July 31, 2012 !W""!

#$%&" #$%&"

'or mont(s, even before working at )o* +edia, ,-ve been working away at a pet pro.ect called #ingularity, a grid system for #ass and /ompass0 !(e idea be(ind #ingularity is to create a grid system t(at will work not only wit( uniform grids, but also grids built on modular scales0 %fter numerous pitfalls and refactors, #ingularity is now entering beta, built on a solid codebase wit( more fle*ibility t(an was originally planned0

!(e state of grids for t(e web

%lmost every grid system for t(e web today is built on relatively modern concepts0 !(e book t(at (olds t(e core principles be(ind t(ese is 1rid #ystems in 1rap(ic Design by Josef +uller2Brockmann3 it serves as t(e bible of modern grid construction0 ,n t(is book +uller2Brockmann outlines (ow to divide t(e page into rows and columns wit( e4ual gutters0 $e also illustrates (ow to position content and imagery on t(ese grids to create truly wonderful layouts0 !(ese concepts of page construction (ave become a standard for designers, and for good reason0 5niform grids are easy to create, implement, and use in design as well as providing muc( needed order to t(e wide array of content designers need to deal wit( today0 $owever, t(is type of grid is only t(e current fas(ion in a (istory filled wit( a wonderful variety of incredible grids waiting to be revived0 &eviving t(e cannons of page design

%fter working on a /ompass plugin used to calculate modular scales, , became fascinated wit( classical layout geometry0 1eometry in design is no new t(ing, of course0 !ypograp(er and book designer Jan !sc(ic(old wrote6

7!(oug( largely forgotten today, met(ods and rules upon w(ic( it is impossible to improve (ave been developed for centuries0 !o produce perfect books t(ese rules (ave to be broug(t to life and applied08 9$endel, &ic(ard0 :n Book Design0 ;ew $aven6 <ale 5=, 1>>?0 =rint0@

/lassic grid

!(e golden section is t(e most common proportion used in book design0 !(e 1reeks used it liberally, and it even s(ows up in t(e 1utenberg Bible0 But t(e golden section isn-t t(e only ratio available0 +usical scales (ave been applied to "uropean design for over 1000 years to create r(yt(m and (armony between layout and typograp(y01 !(e layout pictured above is called 7secret canon8 and utiliAes fift( and octave scales0 !(is layout can be found in t(e pages of books and manuscripts t(roug(out medeval times and more recently in t(e pages of =enguin Books0 !(ese relations(ips can also be found in our gadgets6 for e*ample t(e i=ad aspect ratio corresponds to a musical fourt(, and $D!) uses >61B C a minor Dt(02 !(is kind of layout geometry may seem rigid, but it can offer some intriguing possibilities t(at make a design resonate0 +y goal in making #ingularity (as been to bring t(ese mat(ematical layout principles to web design0

+odular scales

+uc( of design is about proportion or t(e relations(ip between different siAed ob.ects on a page0 % ratio of 162, or octave, simply means one element is twice t(e siAe of t(e first0 % modular scale is a list w(ere eac( number up and down t(e scale s(ares t(is same proportional relations(ip0 !(e golden ratio is 1610B1?, and is uni4ue because t(e ne*t two measures down t(e scale can be added to e4ual t(e initial measure0 !(is makes t(e golden ratio resonate wit(in itself in a way no ot(er ratio does0 #tudies (ave even concluded t(at our eyes scan using some of t(ese basic patterns0

'ibonacci grid

Developing a system

:n +arc( B, 2012, , built a proof2of2concept t(at supported bot( modular scales and uniform columns0 $owever, , discovered t(at moving different siAed columns around was nearly impossible, and t(e code was clumsy0 !(at attempt also relied (eavily on silent selector be(avior in an alp(a version of #ass to optimiAe /## output0 !(is was a recipe

for disaster, since c(anges would break t(e way #ingularity generated responsive grids0

+eanw(ile 1ridset, a fantastic tool for building grids, was moving forward integrating t(e same features 9and a w(ole lot more@ into a W<#,W<1 tool0 , (ad all but scrapped my pet pro.ect until , ran across a proposal for asymmetric grids in #usy, t(e de facto grid system for /ompass0 W(ile integrating into #usy seemed difficult, it was e*actly w(at #ingularity needed0 !(e proposal was simply to list t(e various column widt(s0 Because #usy is not aware of t(e current column, it would re4uire some ma.or c(anges to t(e synta* 2 but #ingularity was already aware of t(e location of columns on a grid0 Due to t(is new insig(t, progress on #ingularity became swift, and t(e code more elegant0

#imple, but powerful

"arly iterations of t(e #ingularity grid system were (ig(ly specific in (ow t(ey worked0 ,t allowed for only two types of grids, eac( wit( its own set of logic0 5sing a list for columns c(anged t(is, and allowed for one set of logic for any kind of grid0

'or e*ample, a grid wit( t(ree e4ual columns can be e*pressed as Ecolumns6 33 or Ecolumns6 1, 1, 13 or even Ecolumns6 3303333F, 3303333F, 3303333F30 %ll t(ree of t(ese get parsed in t(e same way wit( t(e same result0 +odular scales can be calculated and plugged into t(e same system easily by simply writing Ecolumns6 ms91@, ms92@, ms93@3 w(ere eac( ms9@ function writes a value going up a defined scale0 %rbitrary values can be written in Ecolumns6 123p*, GD3p*, 300p*30

!(e real power comes w(en plugging into t(is system0 , discovered t(at functions can write lists to manipulate t(e relations(ips between columns, t(ereby creating any kind of grid0 !o test t(is t(eory out, , wrote a grid2compounding function t(at layers two uniform grids toget(er to create a more comple* one0

!(is function t(at multiplies t(e grids to find a common resolution, and includes a loop to identify w(ere breaks fall on t(e grid0 , also added a function to repeat grid patterns0 !(is allows a designer to declare a pattern of values 9like 1, 2, 3@ and repeat t(em on t(e grid infinitely0 %nyone can write a function to plug into t(e framework, allowing #ingularity to accommodate a variety of needs0

/ompound grid

=adding t(ings out

=adding can be .ust as important to layout as columns or gutters0 =articularly in designs w(en sidebars may be a different color, te*t needs room to breat(e, so integrating padding was a must0 5niform padding can easily be added using Epadding6 1em30 But w(y stop t(ereH 5sing #ass list functions it is possible to create and parse multi2 dimensional lists, so t(at non2uniform padding can be added to t(e list of non2uniform columns0 #impleI ,f you want t(e first column of t(ree to (ave 10p* padding instead of t(e default, .ust write Ecolumns6 1 10p*, 1, 13

5sing #ingularity

:ne c(allenge was creating a system t(at can make comple* and diverse layouts easy to use0 #o , decided to develop an array of simple tools to write layouts0 %t t(e core of every measurement in t(e system is a simple function t(at re4uires t(e user to specify (ow many columns to span and its location on t(e grid0 'unctions, in general, are particularly useful w(en building a foundation because t(ey only declare a value and no ot(er /## 2 so t(ey can be used for padding, margins, or anyw(ere else t(at value mig(t be needed0

W(ile t(is is nice to (ave, it re4uires a great deal of work from developers0 #o , identified two common ways people work wit( grid systems and wrote tools to aid eac( of t(ese met(ods0

!(e most common and traditional way to use grid systems in /## is wit( an array of classes0 ,n #ingularity, t(e mi*in Jinclude grid2ob.ects9Eprefi*, Ecolumns, Egutter, Epadding, Eselector@3 will do t(is for you, creating an array of ob.ects you can use and embed at various breakpoints0 5nlike most grid systems, is writes to an array of silent selectors rat(er t(an directly t(e /##0

#ilent selectors are selectors written in #ass, but not written in /## unless t(ey are called upon0 ,f you want to call t(e first to t(ird column for your article, t(ere-s no need to

add classes to $!+K0 Just invoke it in your #ass file wit( Je*tend Fa12330 ,f you prefer classes, simply define Eselector6 L0L3 and t(e classes will be written for you to call in your $!+K like

0 !(is is perfect for larger sites w(ere more pressure is put on t(e grid, since it-s structured in one central place0 !(e ot(er met(od used to write grids (as been pioneered by #usy and t(eir #emantic 1rid #ystem, w(ere style is written directly to selectors instead of to an array0 Wit( t(is approac(, developers can focus on t(e semantics of t(e content 9instead of t(e layout@ w(en building out a website0 ,t can also reduce /## file siAe on smaller sites0 !(e mi*in declares (om many columns an element spans, along wit( its starting location Jinclude grid2span9Ecolumns, Elocation@30 But to make t(ings even simpler, location is counted automatically0 ,f you design using markup order, #ingularity will follow you across your grid0

Delivery

%fter mont(s of researc(, iteration, and discovery, t(e code and capabilities of #ingularity (ave transformed0 !(oug( #ingularity is entering beta, it still (as wrinkles0 Wit( a little ironing, (opefully #ingularity will (elp raise t(e bar for layouts on t(e web and provide a foundation t(at can support t(e designs of t(e future0

<ou can find installation and usage instructions on #ingularity at singularity0gs

'ork on 1it$ub6 git(ub0comMscottkellumM#ingularity

)ideo walkt(roug(

'ootnotes

10 Bring(urst, &obert0 7#(aping t(e =age08 !(e "lements of !ypograp(ic #tyle0 =oint &oberts, W%6 $artley N +arks, 200G0 1GG0 =rint

20 'or more information on t(is , (ig(ly recommend !(e "lements of !ypograp(ic #tyle by &obert Bring(urst, /(apter ?0 5nderstanding t(is conte*t can (elp t(e designer make c(oices t(at will (armoniAe wit( t(ese conte*ts0 ,n Bring(urst-s words, 7!(e mat(ematics are not (ere to impose drudgery on anyone O t(ey are (ere entirely for pleasure08