Foundation

Unlock the Power of Sass

We're dedicated to maintaining Foundation using Sass (the Scss syntax to be exact) and we want to make it the best it can be. Sass gives us the ability to let you choose what parts to import or how it looks.

Foundation Settings

Work with your own colors, font sizes, radii, etc by adjusting the _settings.scss file in your new project! We include this file with every new compass project, this file contains the default variables used throughout Foundation, which you can uncomment and change to match your needs or add to a settings file of your own and copy them in.

By default, these settings are uncommented which includes all of Foundation. You will always want to keep your settings uncommented, but you can comment the second import when you are customizing.

Expand All

Grid Settings Click to collapse

Variable Name Description and Options Default
$rowWidth Control the width of your grid, set this to a px value or 100% for full-width. 1000px
$columnGutter The space between each column, $/2 = padding for sides of cols. 30px
$totalColumns Set anywhere between 1-24 to control how many columns you've got. 12
$mobileTotalColumns Set how many mobile columns you've got. 4
$blockGridElements Set how many block-grid elements can be set per row, max 24. 12

Color Settings Click to expand

Variable Name Description and Options Default
$mainColor Used for many default UI accent colors and for primary buttons. #2ba6cb
$secondaryColor Used for secondary buttons, alerts, etc. #e9e9e9
$alertColor Used to denote warning or alert across UI elements. #c60f13
$successColor Denotes sucess for buttons and such across the UI. #5da423
$txtColor This is the default text color for typography and such. #222
$highlightColor Control which color is used with .highlight elements. #ffff99
$black Control how black your default black is. #000
$white Control how white your default white is. #fff
$shinyEdge This is the shiny edge we use to add dimension to UI elements. rgba(#fff, .5)
$darkEdge This adds a shadowy edge for things like active button states. rgba(#000, .2)

Typography Settings Click to expand

Variable Name Description and Options Default
$headerFontFamily Font stack used for default headings. "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif
$headerFontWeight Font weight used for default headings. bold
$headerFontColor Font color used for default headings. #222
$bodyFontFamily Font stack used for default body copy. "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif
$bodyFontWeight Font weight used for default body copy. normal
$bodyFontColor Font color used for default body copy. $txtColor

Text Direction Settings Click to expand

Variable Name Description and Options Default
$textDirection Adjust the default text direction to ltr or rtl for all Foundation elements. ltr

Button Settings Click to expand

Variable Name Description and Options Default
$buttonRadius This will set the border radius for .radius buttons 3px
$btnBase Based off top-padding, this value controls the scale relationship for buttons. 10px
$tinyBtnBase Adjust the offset for tiny buttons. $btnBase - 5
$smallBtnBase Adjust the offset for small buttons. $btnBase - 3
$largeBtnBase Adjust the offset for large buttons. $btnBase + 5

Form Settings Click to expand

Variable Name Description and Options Default
$formSpacing Space between forms when they're inline using the grid. 12px
$labelFontWeight Font weight for form labels. 500
$labelTxtColor The text color for form labels. lighten(#000, 30%)
$labelBtmMargin How far you want inputs from labels. 3px
$inputTxtColor Text color for inputs. rgba(0,0,0,0.75)
$inputFontSize Font size for input text. 14px
$inputBgColor Background color for inputs. #fff
$inputFocusBgColor Background color for inputs on focus. darken(#fff, 2%)
$inputBorderColor Border color for inputs. darken(#fff, 20%)
$inputFocusBorderColor Border color of inputs on focus. darken(#fff, 30%)
$inputBorderStyle Border style for inputs. solid
$inputBorderWidth Border width for inputs. 1px
$inputBorderRadius Border radius for inputs. 2px
$fieldsetBorderRadius Border radius for fieldsets. 3px

Custom Form Settings Click to expand

Variable Name Description and Options Default
$custFormBorderColor Border color for custom form elements. #ccc
$custFormBgColor Background color for custom form elements. #fff
$custCheckColor Checkmark color for custom checkboxes. #222
$custSelectCurrentFontColor Font color for currently selected option. #141414
$custSelectBgColor Background color for custom select list element. #fff
$custSelectBorderColor Border color for custom selects. #ddd
$custSelectTriangleColor Triangle background color for custom selects. #aaa
$custSelectTriangleColorOpen Background color for open triangle. #222
$custSelectDropHeight Control the height of your custom select dropdowns. 200px
$custDropdownBgColor Custom dropdown background color for selects. #fff
$custDropdownBorderColor Border color for custom select dropdown element. darken(#fff, 20%)
$custDropdownFontColor Font color for option list on custom selects. #555
$custDropdownSelectedBgColor Highlight color for selected option. lighten(#2ba6cb, 40%)
$custDropdownSelectedFontColor Font color for selected option. #000
$custFormDisabledBgColor Background color for disabled custom forms. #ddd

Tabs Settings Click to expand

Variable Name Description and Options Default
$tabHeight Set the height of your tab elements. 40px
$tabTermFontSize Set the font size for tabs. 12px

Nav Bar Settings Click to expand

Variable Name Description and Options Default
$navBarHeight Set the height of your navigation bars. 40px
$navFlyoutBaseWidth Base width for navigation bar flyouts. 250px

Top Bar Settings Click to expand

Variable Name Description and Options Default
$topBarBgColor Background color for top bar. #222
$topBarHeight Height for the desktop view of the top bar. 45px
$topBarHeightMobile Height for the mobile view of the top bar. 45px
$topBarBtmMargin Bottom margin for top bar when it isn't set to fixed. 30px
$topBarTitleWeight Font weight for the title. bold
$topBarTitleSize Font size for the title. 17px
$topBarLinkColor Link color for the top bar. #fff
$topBarLinkWeight Font weight for links in the top bar. bold
$topBarLinkSize Font size for links in the top bar. 13px
$topBarDropBgColor Background color for dropdown element. #222
$topBarDropLinkColor Link color inside the dropdown element. #fff
$topBarDropToggleSize Triangle size for the top bar. 5px
$topBarDropToggleColor Triangle color for the top bar. #fff
$topBarDropToggleAlpha Opacity for the triangles in the top bar. 0.5
$topBarSearchWidth Width for the search field elements in the top bar. 200px
$topBarBreakPoint Set your own custom breakpoint for the top bar. 940px
$topBarNavToggleSize Triangle size for mobile navigation toggle. 8px
$topBarNavToggleColor Triangle color for mobile navigation toggle. #fff

UI Element Settings Click to expand

Variable Name Description and Options Default
$thumbRadius Border radius for thumbnail elements. 3px
$linkListBottomMargin Bottom margin for inline link lists. 17px -22px
$tableBorderRadius Border radius for tables. 3px
$alertBorderRadius Border radius for alerts. 3px
Progress Bar Settings
$progBarHeight Height of progress bar elements. 25px
$progBarBorderColor Border color for progress bar elements. darken(#fff, 20%)
$progBarBorderSize Border size for progress bar elements. 1px
$progBarPad Inside padding for progress bar element. 2px
Tooltip Settings
$hasTipBorderBottom Bottom border settings for items with a tooltip. dotted 1px #ccc
$hasTipFontWeight Font weight for items with a tooltip. bold
$hasTipFontColor Font color for items with a tooltip. #333
$hasTipBorderBottomHover Bottom border settings for items with a tooltip on hover. dotted 1px darken($mainColor, 20%)
$hasTipFontColorHover Font color of item with tooltips on hover. $mainColor
$tooltipBackgroundColor Background for tooltips. #000
$tooltipBackgroundOpacity Background Opacity for Tooltips. 0.85
$tooltipFontSize Font size for text inside tooltips. 12
$tooltipFontWeight Font weight for text inside tooltips. bold
$tooltipFontColor Font color for text inside tooltips. #fff
$tapToCloseFontSize "Tap to close" font size. 10
$tapToCloseFontWeight "Tap to close" Font weight. normal
$tapToCloseFontColor "Tap to close" Font color. #888
$tooltipFontSizeScreenSm Font size for tooltips on small devices. 14
$tooltipBgOpacityScreenSm Background opacity for tooltips on small devices. 0.85
$tooltipBorderRadius Border radius for rounded tooltips. 4px
Pricing Table Settings
$priceTableBorder Border color for pricing table. solid 1px #ddd
$priceTitleBgColor Background color for pricing table. #ddd
$priceTitlePadding Padding around pricing table title. 15px 20px
$priceTitleAlign Text alignment for pricing table title. center
$priceTitleColor Font color for pricing table title. #333
$priceTitleWeight Font weight for pricing table title. bold
$priceTitleSize Font size for pricing table title. 16px
$priceMoneyBgColor Background color for price section. #eee
$priceMoneyPadding Padding around pricing table price. 15px 20px
$priceMoneyAlign Text alignment for pricing table price cell. center
$priceMoneyColor Font color for pricing table price text. #333
$priceMoneyWeight Font weight for pricing table price text. normal
$priceMoneySize Font size for pricing table price text. 20px
$priceBgColor Background color for pricing table price cell. #fff
$priceDescColor Font color for pricing table description. #777
$priceDescPadding Padding inside pricing table description cell. 15px
$priceDescAlign Text alignment for pricing table description. center
$priceDescFontSize Font size for pricing table description. 12px
$priceDescWeight Font weight for pricing table description. normal
$priceDescLineHeight Line height for pricing table description. 1.4
$priceDescBtmBorder Bottom border styles for pricing table description. dotted 1px #ddd
$priceItemColor Font color for bulleted items in pricing table. #333
$priceItemPadding padding for bulleted items in pricing table. 15px
$priceItemAlign Text alignment for bulleted items in pricing table. center
$priceItemFontSize Font size for bulleted items in pricing table. 14px
$priceItemWeight Font weight for bulleted items in pricing table. normal
$priceItemBtmBorder Bottom border styles for bulleted items in pricing table. dotted 1px #ddd
$priceCtaBgColor Background color for CTA cell in pricing tables. #f5f5f5
$priceCtaAlign Text alignment color for CTA cell in pricing tables. center
$priceCtaPadding Padding inside CTA cell for pricing tables. 20px

Orbit Settings Click to expand

Variable Name Description and Options Default
$orbitCaptionBgColorOldBrowser Background color for captions in browsers that don't support rgba. #000
$orbitCaptionBgColor Background color for Orbit captions. rgba(0,0,0,.6)
$orbitCaptionFontColor Font size for Orbit captions. #fff
$orbitBulletNavColor Color of Orbit bullet navigation. #999
$orbitBulletNavColorActive Active color of Orbit bullet navigation. #222
$orbitHasThumbBorderColor Border color for Orbit thumbnails. #000
$orbitHasThumbBorderWidth Border width for Orbit thumbnails. 2px
$orbitHasThumbBorderStyle Border style for Orbit thumbnails. solid
$orbitSlideNumBgColor Background color for slide numbers. rgba(0,0,0,0.7)
$orbitSlideNumFontColor Font color for slide numbers. #fff
$orbitSlideNumPadding Padding around slide numbers. 5px
$orbitImageArrowLeft URL for left arrow. image-url("foundation/orbit/left-arrow.png")
$orbitImageArrowRight URL for right arrow. image-url("foundation/orbit/right-arrow.png")
$orbitImageArrowSmallLeft URL for left small arrow. image-url("foundation/orbit/left-arrow-small.png")
$orbitImageArrowSmallRight URL for right small arrow. image-url("foundation/orbit/right-arrow-small.png")
$orbitImageBullets URL for image of bullets. image-url("foundation/orbit/bullets.jpg")
$orbitImagePause URL for pauge icon. image-url("foundation/orbit/pause-black.png")
$orbitImagePauseActive Variable for orbitImagePauseActive. $orbitImagePause
$orbitImageRotator URL for image rotator. image-url("foundation/orbit/rotator-black.png")
$orbitImageTimer URL for timer image. image-url("foundation/orbit/timer-black.png")

Clearing Settings Click to expand

Variable Name Description and Options Default
$clearingBg Background color for clearing blackout rgba(0,0,0,0.8)
$clearingOldBrowserBg Old browser blackout background color rgb(0,0,0)
$clearingCaptionBg Caption background color rgba(0,0,0,0.7)
$clearingCaptionOldBrowserBg Old browser captions background color rgb(0,0,0)
$clearingCaptionFontColor Caption font color #fff
$clearingCloseColor Close button font color #fff
$clearingArrowColor Arrow colors #fff
$clearingArrowSize Arrow size 16px
$clearingCarouselBg Carousel Background Color rgba(0,0,0,0.75)
$clearingCarouselOldBrowserBg Old Browser Carousel Background Color rgb(0,0,0)
$clearingCarouselHeight Height of clearing carousel 150px
$clearingCarouselThumbWidth Width of thumbnails 175px
$clearingActiveImgHeight Height of image area 75%
$clearingCarouselThumbActiveBorder Active indicator border for thumbnails 4px solid rgb(255,255,255)
$clearingImgBg Image Background #rgba(0,0,0,0.75)
$clearingImgOldBrowserBg Old browser Image Background rgb(0,0,0)

Joyride Settings Click to expand

Variable Name Description and Options Default
$tipBg Background color for tip container rgba(0,0,0,0.8)
$tipBgIE8 IE8 Fallback for non rgba background #000
$tipFontColor Font color for tip paragraphs #fff
$tipHeaderWeight Font weight for tip headers bold
$tipDefaultWidth Default width for tip container 300px
$tipBorderRadius Border radius for tip container 4px
$tipPadding Padding around tip content 18px 20px 24px
$tipNubSize Triangle nub size for tip container 14px
$tipFontSize Font size for tip paragraphs 14px
$tipTimerWidth Width of the tip timer 50px
$tipTimerHeight Height of the tip timer 3px
$tipTimerBorder Border styles for timer solid 1px #555
$tipTimerColor Fill color for timer #666
$tipCloseColor Font color for close link #777
$tipCloseSize Font size for close link 20px
$tipCloseWeight Font weight for close link normal
$tipScreenFill Background color for screen fill on modal tips rgba(0,0,0,0.5)

Modular Scale Settings Click to expand

Variable Name Description and Options Default
$ratio The ratio used to calculate our modular scale. golden()
$baseFontSize Base font size for modular scale, used for paragraphs. 14px
$importantModNum Based on recommended tap area size, augments scale. 44px

Learn About Mixins

Another great feature of Sass is its ability to create mixins. We've included a hand full of handy mixins that will make your life a lot easier!
Learn about our Mixins »

Grab the copy of Foundation best for you, whether that's Scss or CSS, everything or just bits and pieces.

Install Foundation

Awesome product jobs:
via ZURBjobs