2022.2

acrossmanybrowsersanddevices,andworksbackasfarasIE9andAndroid2.Seehttp://-
foundation.zurb.com/learn/about.html.
CaptureOnTheGoandJumbotrontemplatewizardsautomaticallyaddtheFoundationfilesv.5.5.1to
theresourcesofthetemplate.InafutureversionofPlanetPressConnect,Foundation6willbe
included.Ifyou'dratherstartusingthenewestFoundationfilesrightaway,youhavetwooptions:
l
DownloadtheFoundationfiles(fromhttp://foundation.zurb.com/sites/download.html/)andadd
themtothetemplatemanually.
l
UseremoteFoundationfilesfromaCDN,suchashttps://cdnjs.com/(searchforFoundation).
See"UsingJavaScript"onpage512and"AddingCSSfiles"onpage674forfurtherinstructions.
OncetheFoundationfileshavebeenaddedtoatemplate,youcanusetheGrid,aswellasmanyother
Foundationcomponents,inyourtemplate.
Tip: TakealookintheSnippetsfolderontheResourcespane.Aftercreatingatemplatewitha
CaptureOnTheGoorJumbotrontemplatewizard,thisfoldercontainsanumberofready-made
elementsthatmakeuseofFoundation.
TheGrid
UsetheGridtoensuretheresponsivenessofaform.UsingtheGridessentiallymeansbuildingaform
orwebpagewithDivelements(aDivisacontainerelement,see"Div"onpage625)thathavethefol-
lowingclasses:
l
row:ThisclassidentifiesaDivasahorizontalblock(arow)thatcancontainupto12columns.
l
columns:ThisclassshouldbeusedforaDivinsideaDivwiththeclassrow.ItidentifiesaDivas
partofarowDiv.
l
small-n,medium-n,large-n:TheseclassesindicatethenumberofcolumnsthatthisDivoccu-
pieswithinintherow,onasmall,mediumorlargescreen,respectively.Replacenwithanum-
ber,forexample:small-2,large-4.Ifthenumbersdeclaredinone'row'foronescreensize,added
together,exceedthemaximumof12,theydon'tfitinonerowonthatscreensize.Inthatcasethe
Divelementswillappearbeloweachotherinsteadofnexttoeachother.
Theseclassescanbecombined,sothatdependingonthescreensize,aDivcantakemoreor
lessspaceinarow.Separatetheclassnameswithaspace.
Tip: Startwiththeclassforsmallscreens.Forexample:<divclass="small-3large-6"columns>.
Largerdeviceswillinheritthosestyles(thankstothemobile-firstapproachofFoundation'sstyle
sheet).Customizeforlargerscreensasnecessary.
Thisverysimplelayouthasonlyonerow:
Page 529