or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

css-components.md form-validation.md grid-systems.md index.md javascript-components.md scss-mixins.md utility-functions.md

tile.json

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 */ }