Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/sneikki/tidgrid/llms.txt

Use this file to discover all available pages before exploring further.

All of Tidgrid’s configurable options are exposed as SCSS variables with sensible defaults. Overriding them requires a SCSS build pipeline — pass your values through the @use ... with () syntax when importing the library and the output CSS will reflect your settings. This approach means configuration happens at compile time, producing only the classes your project needs.
SCSS variable overrides only work when you import Tidgrid from source (e.g. @use 'tidgrid/src/index'). They have no effect on the pre-built CDN stylesheet. If you are using the CDN, you cannot customize Tidgrid’s output.

​
How to apply overrides

Pass variable overrides in the with () block of your @use declaration: 
@use 'tidgrid/src/index' with (
  $syntax: dashes,
  $use-namespace: false,
  $default-breakpoints: (
    sm: 48em,
    lg: 75em,
  ),
);
All variables are optional. Any variable you omit keeps its default value.

​
Namespace and syntax

These variables are defined in src/namespace.scss and control the fundamental shape of every generated class name.

​
$syntax

Controls the format used for modifier class names.
ValueDefaultDescription
parentheses✅Values are wrapped in parentheses: tg-mode(auto)
dashes—Values are separated by dashes: tg-mode-auto
@use 'tidgrid/src/index'; // $syntax defaults to parentheses
Generated class names:
<div class="tg-row tg-mode(auto) tg-gap(md)">
  <div class="tg-cell tg-frac(1/2)">...</div>
</div>

​
$use-namespace

Controls whether the tg- prefix is applied to all generated class names.
ValueDefaultDescription
true✅All classes are prefixed: tg-row, tg-cell, tg-mode(auto)
false—No prefix: row, cell, mode(auto)
// Remove the tg- prefix entirely
@use 'tidgrid/src/index' with (
  $use-namespace: false
);

<!-- Without namespace -->
<div class="row mode(auto) gap(md)">
  <div class="cell">...</div>
</div>
Disabling the namespace risks class name collisions with your own CSS or third-party libraries. Only disable it if you’re certain there are no conflicts.

​
Breakpoints

Defined in src/variant.scss, the $default-breakpoints map controls the responsive breakpoint scale. Every modifier class is generated once for each breakpoint in this map, so reducing the number of breakpoints also reduces the size of the compiled CSS. 
// Default breakpoints
$default-breakpoints: (
  xs: 36em,   // ≈ 576px
  sm: 48em,   // ≈ 768px
  md: 64em,   // ≈ 1024px
  lg: 75em,   // ≈ 1200px
  xl: 90em,   // ≈ 1440px
) !default;
To override the breakpoints, supply a replacement map: 
@use 'tidgrid/src/index' with (
  $default-breakpoints: (
    sm: 48em,
    md: 64em,
    lg: 80em,
  )
);
Breakpoint prefix syntax in your HTML follows the map keys you define: 
<!-- Uses sm, md, lg prefixes matching the custom map above -->
<div class="tg-row tg-mode(stacked) md:tg-mode(auto)">
  <div class="tg-cell">...</div>
</div>
Reducing the breakpoint map to only the breakpoints your design actually uses is one of the most effective ways to shrink Tidgrid’s output — fewer breakpoints mean fewer media query blocks across all utility classes.

​
Row sizes

Defined in src/grid/row.scss, the $row-sizes list controls which column-count grid systems are generated for tg-span() classes. 
$row-sizes: (12, 16);
The default generates both a 12-column and a 16-column grid. To generate only a 12-column grid: 
@use 'tidgrid/src/index' with (
  $row-sizes: (12,)
);
Each value in the list generates a full set of tg-span(n) utilities for use inside a tg-size(N) wrapper: 
<!-- 12-column grid: wrap the row in tg-size(12) -->
<div class="tg-size(12)">
  <div class="tg-row">
    <div class="tg-cell tg-span(4)">4 of 12</div>
    <div class="tg-cell tg-span(8)">8 of 12</div>
  </div>
</div>

​
Fractional cell widths

Defined in src/grid/row.scss, the $fractions map controls which fraction-based width classes are generated for tg-frac() cells. 
$fractions: (
  "1/2": 50%,
  "1/3": 33.333%,
  "1/4": 25%,
  "2/3": 66.667%,
) !default;
The default set covers the most common halves, thirds, and quarters. To add or replace fractions, supply a custom map using SCSS math.div for precise values: 
@use 'sass:math';
@use 'tidgrid/src/index' with (
  $fractions: (
    "1/2": math.div(1, 2),
    "1/3": math.div(1, 3),
    "1/6": math.div(1, 6),
  )
);
Each key in the map becomes the value token used in the class name: 
<!-- Uses the "1/3" and "2/3" fraction classes -->
<div class="tg-row">
  <div class="tg-cell tg-frac(1/3)">One third</div>
  <div class="tg-cell tg-frac(2/3)">Two thirds</div>
</div>

​
Gap sizes

Defined in src/grid/gap.scss, the $gaps map sets the named spacing scale used by tg-gap(), tg-x-gap(), and tg-y-gap(). 
$gaps: (
  none: 0,
  xs:   0.25rem,
  sm:   0.5rem,
  md:   0.75rem,
  lg:   1rem,
  xl:   2rem,
) !default;
Override the map to add, remove, or resize gap tokens: 
@use 'tidgrid/src/index' with (
  $gaps: (
    none:  0,
    sm:    0.5rem,
    md:    1rem,
    lg:    2rem,
    xl:    4rem,
  )
);
Gap classes apply negative margin to the row and compensating padding to each cell: 
<div class="tg-row tg-gap(lg)">...</div>         <!-- all sides -->
<div class="tg-row tg-x-gap(md) tg-y-gap(sm)">...</div>  <!-- axes separately -->
<div class="tg-row md:tg-gap(xl)">...</div>      <!-- responsive -->

​
Container margins

Defined in src/layout/container.scss, the $margin map controls the horizontal margins applied by tg-container and its breakpoint-scoped variants. 
$margin: (left: 2rem, right: 2rem) !default;

@use 'tidgrid/src/index' with (
  $margin: (left: 1.5rem, right: 1.5rem)
);
The container uses max() and min() to center itself within the viewport while enforcing these minimum side margins at every breakpoint.

​
Section padding

Defined in src/layout/section.scss, two maps control the vertical padding applied by the tg-section and tg-footer layout helpers. 
$section-padding: (top: 3rem, bottom: 3rem) !default;
$footer-padding:  (top: 3rem, bottom: 5rem) !default;

@use 'tidgrid/src/index' with (
  $section-padding: (top: 4rem, bottom: 4rem),
  $footer-padding:  (top: 4rem, bottom: 8rem)
);
These map directly to the padding applied to .tg-section and .tg-footer elements, as well as to the responsive tg-section-padding(default) utility class.

​
Full override example

The following shows all configurable variables in a single @use block: 
@use 'tidgrid/src/index' with (
  // Namespace & syntax (src/namespace.scss)
  $syntax:        dashes,
  $use-namespace: true,

  // Breakpoints (src/variant.scss)
  $default-breakpoints: (
    sm: 48em,
    md: 64em,
    lg: 75em,
  ),

  // Row column sizes & fractions (src/grid/row.scss)
  $row-sizes: (12,),
  $fractions: (
    "1/2": math.div(1, 2),
    "1/3": math.div(1, 3),
    "1/6": math.div(1, 6),
  ),

  // Gap scale (src/grid/gap.scss)
  $gaps: (
    none: 0,
    sm:   0.5rem,
    md:   1rem,
    lg:   2rem,
  ),

  // Container margins (src/layout/container.scss)
  $margin: (left: 1.5rem, right: 1.5rem),

  // Section padding (src/layout/section.scss)
  $section-padding: (top: 4rem, bottom: 4rem),
  $footer-padding:  (top: 4rem, bottom: 8rem),
);
Remember: these overrides require a SCSS compilation step. They do not apply to the pre-built CDN stylesheet. See Installation for setup options that support SCSS configuration.

Build docs developers (and LLMs) love

Get started for freeTalk to us