2022.2

<div class="row">
<div class="small-2 large-4 columns">Content goes here</div>
<div class="small-4 large-4 columns">Content goes here</div>
<div class="small-6 large-4 columns">Content goes here</div>
</div>
TheDivelementsinsidetherowtakeup2,4and6partsofthetotalamountofscreensize(dividedin
12parts)onasmallscreen.Onalargescreentheyeachtakeonethirdoftheavailablespace.Ifthe
classlarge-4wouldhavebeenleftout,theDivswouldtakeup2,4and6partsoftheavailablespace,
regardlessofthescreensize.
There'smorethatyoucandowiththeGrid,forexample,youcouldcentercolumns,orswitchcolumns
dependingonthescreensizetheyareviewedon.Forinformationaboutallthesepossibilities,seethis
website:http://foundation.zurb.com/sites/docs/v/5.5.3/components/grid.html.
Adding Divs and classes to a Connect Form template
ToinsertaDiv,selectInsert > Structural Elements > Divonthemenu.ToaddaclasstotheDiv,
selecttheDiv(see"Selectinganelement"onpage570)andtypetheclassintheClassfieldonthe
Attributespane.
ToaddGridrowsandcolumnsquickly,youcouldalsousetheGridsnippetsorRowsnippets,foundin
theSnippetsfolderontheResourcespaneafterusingawizardtocreateaFoundationwebpageora
CaptureOnTheGotemplate.FormoreinformationaboutSnippets,see"Snippets"onpage661.For
moreinformationabouttemplatewizards,see"CreatingaWebtemplatewithaWizard"onpage493
and"CaptureOnTheGotemplatewizards"onpage525.
Alternatively,IfyouarefamiliarwithHTML,youcanopentheSourcetaboftheWorkspaceandsimply
typetheHTMLtoaddtheDivelementsandclasses.
Tip: UseEmmettocreateaGridlayoutonthesourcetabreallyfast.See"Emmet"onpage473.
OtherFoundationcomponents
FoundationcomeswithmanyothercomponentstoimproveandembellishWebformsandpages.A
fewexamples:
l
AnAccordioncanbeusedtoexpandandcollapsecontentthatisbrokenintologicalsections,
muchliketabs.Itcanbeveryusefulonlongforms.
l
AnOff-Canvas menuletstheusernavigatebetweenlevel4headings(<h4>)inaWebpageor
form.CaptureOnTheGoTemplatewizardsoffertheoptiontoaddthismenuautomatically.
l
SwitchesaretoggleelementsthatswitchbetweenanOffandOnstateontaporclick.They
makeuseofcheckboxinputs(orradiobuttons)andrequirenojavascript.Theirsizecanbeadap-
ted,tomakethemeasytouseonatouchscreen.
Page 530