Foundation CSS Float Grid Sass Reference
Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.
Foundation CSS Float Grid Advanced classes:
Combined Column or Row: When you need just one column in a row. You can save yourself from a little hard work by combining the column and row classes together and that will generate only one column in one row.
- row: This class is used to contain all the content/columns that will be in a row.
- column: This class is used to signify the individual columns inside a row.
Variable Used:
| Variable-Name | Description | Type | Default-Value |
|---|---|---|---|
| $grid-row-width | This variable is used to define the maximum width of a row. | Number | $global-width |
| $grid-column-count | This variable is used to define the default column count of a grid. | Number | 12 |
| $grid-column-gutter | This variable is used to define the amount of space between columns at different screen sizes. | Map or Length | small: 20px medium: 30px |
| $grid-column-align-edge | This variable is used to define that the last column in a row will align to the opposite edge of the row. | Boolean | true |
| $grid-column-alias | This variable is used to define the selector used for an alias of column (with @extend). | String | ‘columns’ |
| $block-grid-max | This variable is used to define the highest number of .x-up classes available when using the block grid CSS. | Number | 8 |
Example 1: In the below code, we will make use of the above variable to demonstrate the float grid.
HTML
<!DOCTYPE html><html><head> <!--Foundation CSS CDN--> <link rel="stylesheet" href= <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes --> <link rel="stylesheet" href= <link rel="stylesheet" href= <!-- Compressed JavaScript --> <script src= </script> <script src= </script> <link rel="stylesheet" href="style.css"> <style> body { margin-left:20px; margin-right:20px; } .row { border:darkgreen 5px solid; background-color:green; } p { color:azure; } </style></head><body> <h1 style="text-align:center; color:green">GeeksforGeeks</h1> <h3 style="text-align:center;"> A computer science portal for geeks </h3> <div class="row"> <p>GfG</p> </div> <script> $(document).foundation(); </script></body></html> |
SCSS Code:
$grid-row-width:250px;
.row {
width: $grid-row-width;
}Compiled CSS Code:
.row {
width: 250px;
}Output:
Example 2: In the below code, we will make use of the above variable to demonstrate the float grid.
HTML
<!DOCTYPE html><html><head> <!--Foundation CSS CDN--> <link rel="stylesheet" href= <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes --> <link rel="stylesheet" href= <link rel="stylesheet" href= <!-- Compressed JavaScript --> <script src= </script> <script src= </script> <link rel="stylesheet" href="style.css"> <style> body { margin-left:20px; margin-right:20px; } div { border:2px solid green; } </style></head><body> <h1 style="text-align:center; color:green"> GeeksforGeeks</h1> <h3 style="text-align:center;"> A computer science portal for geeks</h3> <div class="row"> <div class="column1">GfG</div> <div class="column large-9 ">GfG</div> <div class="column large-1">GfG</div> </div> <script> $(document).foundation(); </script></body></html> |
SCSS Code:
$grid-column-count:100%;
.column1 {
max-width:$grid-column-count;
}Compiled CSS Code:
.column1 {
max-width: 100%;
}Output:
Reference: https://get.foundation/sites/docs/grid.html#sass-reference
Please Login to comment...