- Foundation Tutorial
- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation General
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
Foundation - SASS Variables
Using the sass variables we can modify the default styles of this component. Following are a few sass variables −
| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$grid-row-width Maximum width of row. |
Number | $global-width |
| 2 |
$grid-column-count If the default value of grid is changed then it will affect the grid mixins and the number of CSS classes output. |
Number | 12 |
| 3 |
$grid-column-gutter Space between the columns. |
Number | 30px |
| 4 |
$grid-column-align-edge The column is aligned to the opposite edge of the row when it is set as true. |
Boolean | true |
| 5 |
$block-grid-max When the block grid CSS is used then the .x-up classes highest number is available. |
Number | 8 |
foundation_the_grid.htm
Advertisements