CtrlK
CommunityDocumentationLog inGet started
Tessl Logo

tessl/npm-material--layout-grid

Material Design responsive grid system with flexible SCSS mixins and CSS classes for creating adaptive layouts across desktop, tablet, and phone devices

Overview
Eval results
Files

mixins.mddocs/

SCSS Mixins

Programmatic mixins for generating custom grid layouts with full control over spacing, sizing, and behavior. These mixins allow you to create custom grid implementations without using the pre-built CSS classes.

Capabilities

SCSS Functions

Utility functions for working with breakpoints in custom implementations.

/**
 * Returns the lower grid boundary or null if the smallest grid is selected
 * Used internally but available for custom breakpoint logic
 * @param $size - Device type: 'desktop', 'tablet', or 'phone'
 * @returns Minimum breakpoint value or null for phone
 */
@function breakpoint-min($size);

/**
 * Returns the upper grid boundary or null if the largest grid is selected
 * Used internally but available for custom breakpoint logic
 * @param $size - Device type: 'desktop', 'tablet', or 'phone'
 * @returns Maximum breakpoint value or null for desktop
 */
@function breakpoint-max($size);

Usage Examples:

@use "@material/layout-grid/_mixins.import" as mixins;

// Get breakpoint values for custom media queries
$desktop-min: mixins.breakpoint-min(desktop); // 840px
$tablet-max: mixins.breakpoint-max(tablet);   // 839px
$phone-max: mixins.breakpoint-max(phone);     // 599px

// Custom media query using breakpoint functions
@media (min-width: #{mixins.breakpoint-min(tablet)}) and (max-width: #{mixins.breakpoint-max(tablet)}) {
  .custom-tablet-only {
    background: blue;
  }
}

Core Layout Mixins

Mixins that generate the fundamental grid structure for containers, wrappers, and cells.

/**
 * Generates CSS for a grid container on specified device type
 * Creates the outer grid wrapper with margins and optional max-width
 * @param $size - Device type: 'desktop', 'tablet', or 'phone'
 * @param $margin - Margin size for the grid container
 * @param $max-width - Optional maximum width constraint (default: null)
 */
@mixin layout-grid($size, $margin, $max-width: null);

/**
 * Generates CSS for grid cell wrapper on specified device type  
 * Creates the inner container that holds all grid cells
 * @param $size - Device type: 'desktop', 'tablet', or 'phone'
 * @param $margin - Margin size inherited from parent grid
 * @param $gutter - Gutter size between cells
 */
@mixin inner($size, $margin, $gutter);

/**
 * Generates CSS for grid cell on specified device type
 * Creates individual grid cells with spanning behavior
 * @param $size - Device type: 'desktop', 'tablet', or 'phone'  
 * @param $default-span - Number of columns to span (1-12)
 * @param $gutter - Gutter size between cells
 */
@mixin cell($size, $default-span, $gutter);

Usage Examples:

@use "@material/layout-grid/_mixins.import" as mixins;

// Custom grid container
.my-grid {
  @include mixins.layout-grid(desktop, 32px, 1200px);
  @include mixins.layout-grid(tablet, 24px);
  @include mixins.layout-grid(phone, 16px);
}

// Custom grid inner wrapper
.my-grid__inner {
  @include mixins.inner(desktop, 32px, 24px);
  @include mixins.inner(tablet, 24px, 16px);
  @include mixins.inner(phone, 16px, 12px);
}

// Custom grid cells
.my-grid__cell {
  @include mixins.cell(desktop, 6, 24px);
  @include mixins.cell(tablet, 4, 16px);
  @include mixins.cell(phone, 2, 12px);
}

Cell Behavior Mixins

Mixins that control individual cell ordering and alignment within the grid.

/**
 * Sets the display order of a cell within the grid
 * Lower numbers appear first, higher numbers appear last
 * @param $order - Order index from 1 to 12
 */
@mixin cell-order($order);

/**
 * Sets vertical alignment of a cell within its grid row
 * @param $position - Alignment position: 'top', 'middle', 'bottom', or 'stretch'
 */
@mixin cell-align($position);

Usage Examples:

@use "@material/layout-grid/_mixins.import" as mixins;

// Cell ordering
.priority-cell {
  @include mixins.cell-order(1); // Appears first
}

.secondary-cell {
  @include mixins.cell-order(3); // Appears third
}

// Cell alignment
.header-cell {
  @include mixins.cell-align(top);
}

.content-cell {
  @include mixins.cell-align(stretch); // Default behavior
}

.footer-cell {
  @include mixins.cell-align(bottom);
}

Fixed Width Layout

Mixin for creating grids with fixed column widths instead of fluid columns.

/**
 * Generates CSS for fixed column width container on specified device type
 * Creates a grid where columns have consistent width rather than fluid sizing
 * @param $size - Device type: 'desktop', 'tablet', or 'phone'
 * @param $margin - Grid margin size
 * @param $gutter - Gutter size between cells  
 * @param $column-width - Fixed width for each column
 */
@mixin fixed-column-width($size, $margin, $gutter, $column-width);

Usage Example:

@use "@material/layout-grid/_mixins.import" as mixins;

.fixed-width-grid {
  @include mixins.fixed-column-width(desktop, 24px, 24px, 80px);
  @include mixins.fixed-column-width(tablet, 16px, 16px, 72px);
  @include mixins.fixed-column-width(phone, 16px, 16px, 64px);
}

Advanced Usage Patterns

Responsive Grid System

Create a complete responsive grid system using mixins with media queries:

@use "sass:map";
@use "@material/layout-grid/variables";
@use "@material/layout-grid/_mixins.import" as mixins;

.custom-grid {
  // Generate responsive styles for all device types
  @each $size in map.keys(variables.$columns) {
    @include mixins.media-query_($size) {
      $margin: map.get(variables.$default-margin, $size);
      @include mixins.layout-grid($size, $margin, 1200px);
    }
  }
}

.custom-grid__inner {
  @each $size in map.keys(variables.$columns) {
    @include mixins.media-query_($size) {
      $margin: map.get(variables.$default-margin, $size);
      $gutter: map.get(variables.$default-gutter, $size);
      @include mixins.inner($size, $margin, $gutter);
    }
  }
}

.custom-grid__cell {
  @each $size in map.keys(variables.$columns) {
    @include mixins.media-query_($size) {
      $gutter: map.get(variables.$default-gutter, $size);
      @include mixins.cell($size, 4, $gutter);
    }
  }
}

Specialized Grid Components

Create specialized grid components for specific use cases:

@use "@material/layout-grid/_mixins.import" as mixins;

// Article grid with custom spacing
.article-grid {
  @include mixins.layout-grid(desktop, 48px, 1024px);
  @include mixins.layout-grid(tablet, 32px);
  @include mixins.layout-grid(phone, 24px);
  
  &__inner {
    @include mixins.inner(desktop, 48px, 32px);
    @include mixins.inner(tablet, 32px, 24px);
    @include mixins.inner(phone, 24px, 16px);
  }
  
  &__article {
    @include mixins.cell(desktop, 8, 32px);
    @include mixins.cell(tablet, 6, 24px);
    @include mixins.cell(phone, 4, 16px);
  }
  
  &__sidebar {
    @include mixins.cell(desktop, 4, 32px);
    @include mixins.cell(tablet, 2, 24px);
    @include mixins.cell(phone, 4, 16px);
    @include mixins.cell-order(2); // Sidebar appears after content on mobile
  }
}

// Card grid with fixed widths
.card-grid {
  @include mixins.fixed-column-width(desktop, 24px, 24px, 200px);
  @include mixins.fixed-column-width(tablet, 16px, 16px, 150px);
  @include mixins.fixed-column-width(phone, 16px, 16px, 120px);
  
  &__card {
    @include mixins.cell(desktop, 1, 24px);
    @include mixins.cell(tablet, 1, 16px);
    @include mixins.cell(phone, 1, 16px);
    @include mixins.cell-align(top);
  }
}

Custom Alignment Utilities

Create utility classes using alignment mixins:

@use "@material/layout-grid/_mixins.import" as mixins;

.align-top { @include mixins.cell-align(top); }
.align-middle { @include mixins.cell-align(middle); }
.align-bottom { @include mixins.cell-align(bottom); }

.order-first { @include mixins.cell-order(1); }
.order-last { @include mixins.cell-order(12); }

// Responsive ordering
@media (max-width: 599px) {
  .order-first-mobile { @include mixins.cell-order(1); }
  .order-last-mobile { @include mixins.cell-order(12); }
}

Dynamic Grid Generation

Generate grids programmatically with custom configurations:

@use "sass:map";
@use "@material/layout-grid/_mixins.import" as mixins;

// Generate multiple grid variants
$grid-configs: (
  compact: (
    margin: (desktop: 16px, tablet: 12px, phone: 8px),
    gutter: (desktop: 16px, tablet: 12px, phone: 8px),
  ),
  standard: (
    margin: (desktop: 24px, tablet: 16px, phone: 16px),
    gutter: (desktop: 24px, tablet: 16px, phone: 16px),
  ),
  spacious: (
    margin: (desktop: 48px, tablet: 32px, phone: 24px),
    gutter: (desktop: 32px, tablet: 24px, phone: 16px),
  ),
);

@each $name, $config in $grid-configs {
  .grid--#{$name} {
    @each $device in (desktop, tablet, phone) {
      $margin: map.get(map.get($config, margin), $device);
      $gutter: map.get(map.get($config, gutter), $device);
      
      @include mixins.layout-grid($device, $margin);
      
      &__inner {
        @include mixins.inner($device, $margin, $gutter);
      }
      
      &__cell {
        @include mixins.cell($device, 4, $gutter);
      }
    }
  }
}

Mixin Dependencies

When using mixins, ensure proper dependencies:

  • Use layout-grid() for outer containers
  • Use inner() for cell wrappers inside containers
  • Use cell() for individual cells inside wrappers
  • Cell behavior mixins (cell-order, cell-align) apply to individual cells
  • fixed-column-width() replaces layout-grid() for fixed-width layouts
tessl i tessl/npm-material--layout-grid@13.0.0

docs

css-classes.md

index.md

mixins.md

variables.md

tile.json