tessl/npm-foundation-sites
The most advanced responsive front-end framework in the world with CSS components, JavaScript plugins, and Sass utilities.
—
Pending
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Securityby
Pending
The risk profile of this skill
grid-systems.mddocs/
Grid Systems
Foundation provides two powerful grid systems for creating responsive layouts: the XY Grid (modern flexbox-based) and the Float Grid (legacy float-based). Both systems are mobile-first and provide extensive responsive capabilities.
Capabilities
XY Grid System
The modern flexbox-based grid system that provides more flexible and powerful layout options.
/**
* XY Grid container - constrains grid width and centers content
*/
.grid-container {
max-width: 75rem;
margin-left: auto;
margin-right: auto;
}
/**
* XY Grid wrapper for horizontal layouts
*/
.grid-x {
display: flex;
flex-flow: row wrap;
}
/**
* XY Grid wrapper for vertical layouts
*/
.grid-y {
display: flex;
flex-flow: column nowrap;
}
/**
* XY Grid cell - flexible container for content
*/
.cell {
flex: 0 0 auto;
min-height: 0px;
min-width: 0px;
}
/**
* Auto-sizing cell that grows to fill available space
*/
.cell.auto {
flex: 1 1 0px;
}
/**
* Shrink cell that only takes up as much space as its content
*/
.cell.shrink {
flex: 0 0 auto;
}Responsive Sizing Classes:
/* Small breakpoint (default, mobile-first) */
.cell.small-1 { flex: 0 0 8.33333%; }
.cell.small-2 { flex: 0 0 16.66667%; }
.cell.small-3 { flex: 0 0 25%; }
.cell.small-4 { flex: 0 0 33.33333%; }
.cell.small-6 { flex: 0 0 50%; }
.cell.small-12 { flex: 0 0 100%; }
/* Medium breakpoint (640px+) */
.cell.medium-1 { flex: 0 0 8.33333%; }
.cell.medium-6 { flex: 0 0 50%; }
.cell.medium-12 { flex: 0 0 100%; }
/* Large breakpoint (1024px+) */
.cell.large-1 { flex: 0 0 8.33333%; }
.cell.large-4 { flex: 0 0 33.33333%; }
.cell.large-8 { flex: 0 0 66.66667%; }
.cell.large-12 { flex: 0 0 100%; }Usage Examples:
<!-- Basic XY Grid -->
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell small-6 medium-4 large-3">
Content
</div>
<div class="cell small-6 medium-8 large-9">
Content
</div>
</div>
</div>
<!-- Auto and shrink cells -->
<div class="grid-x">
<div class="cell shrink">
Fixed width content
</div>
<div class="cell auto">
Flexible content
</div>
</div>Float Grid System
Legacy grid system using float-based layout, maintained for backwards compatibility.
/**
* Float grid row - clears floats and contains columns
*/
.row {
max-width: 75rem;
margin-left: auto;
margin-right: auto;
}
/**
* Float grid columns
*/
.column, .columns {
float: left;
padding-left: 0.9375rem;
padding-right: 0.9375rem;
}
/* Column sizing classes */
.small-1 { width: 8.33333%; }
.small-2 { width: 16.66667%; }
.small-6 { width: 50%; }
.small-12 { width: 100%; }
.medium-1 { width: 8.33333%; }
.medium-4 { width: 33.33333%; }
.medium-8 { width: 66.66667%; }
.large-3 { width: 25%; }
.large-9 { width: 75%; }Grid Utilities
Additional classes for fine-tuning grid behavior.
/**
* Grid padding utilities
*/
.grid-padding-x { /* Adds horizontal padding to all cells */ }
.grid-padding-y { /* Adds vertical padding to all cells */ }
.grid-margin-x { /* Adds horizontal margins to grid */ }
.grid-margin-y { /* Adds vertical margins to grid */ }
/**
* Alignment utilities
*/
.align-left { justify-content: flex-start; }
.align-center { justify-content: center; }
.align-right { justify-content: flex-end; }
.align-justify { justify-content: space-between; }
.align-spaced { justify-content: space-around; }
.align-top { align-items: flex-start; }
.align-middle { align-items: center; }
.align-bottom { align-items: flex-end; }
.align-stretch { align-items: stretch; }
/**
* Individual cell alignment
*/
.align-self-top { align-self: flex-start; }
.align-self-middle { align-self: center; }
.align-self-bottom { align-self: flex-end; }
.align-self-stretch { align-self: stretch; }SCSS Grid Mixins
Mixins for creating custom grid implementations.
/**
* Include XY Grid system
*/
@mixin foundation-xy-grid-classes;
/**
* Include Float Grid system
*/
@mixin foundation-grid;
/**
* Create custom grid container
*/
@mixin grid-container($width: $grid-container-max, $padding: $grid-container-padding);
/**
* Create grid row with optional behavior
*/
@mixin grid-row($behavior: null, $width: $grid-row-width, $columns: $grid-column-count, $base: true, $gutter: $grid-column-gutter);
/**
* Create grid column with sizing
*/
@mixin grid-column($columns: null, $last-column: false, $center: false, $offset: null, $push: null, $pull: null, $collapse: null, $float: left, $gutter: $grid-column-gutter);
/**
* Size a column to a specific number of columns
*/
@mixin grid-column-size($columns);
/**
* Offset a column by a specific number of columns
*/
@mixin grid-column-offset($columns);Responsive Breakpoints
Foundation uses a mobile-first responsive approach with the following default breakpoints:
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
// Breakpoint classes are generated for each size
.small-* { /* 0px and up */ }
.medium-* { /* 640px and up */ }
.large-* { /* 1024px and up */ }
.xlarge-* { /* 1200px and up */ }
.xxlarge-* { /* 1440px and up */ }Usage Examples:
<!-- Responsive grid example -->
<div class="grid-container">
<div class="grid-x grid-padding-x">
<!-- Full width on mobile, half on tablet, third on desktop -->
<div class="cell small-12 medium-6 large-4">
Column 1
</div>
<div class="cell small-12 medium-6 large-4">
Column 2
</div>
<div class="cell small-12 medium-12 large-4">
Column 3
</div>
</div>
</div>
<!-- Centered content with max width -->
<div class="grid-container">
<div class="grid-x grid-padding-x align-center">
<div class="cell small-12 large-8">
Centered content
</div>
</div>
</div>