or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

borders.md color-functions.md index.md layout-positioning.md typography-display.md utilities.md variables-constants.md

tile.json

Layout & Positioning

Mixins for positioning elements, setting dimensions, and managing spacing with support for null values and CSS shorthand. These mixins provide a concise way to set multiple related CSS properties in a single declaration.

Capabilities

Position Mixin

Provides a concise method for setting an element's positioning properties: position, top, right, bottom, and left in one statement.

/**
 * Sets positioning properties in one statement
 * @param $position - A CSS position value (static, relative, absolute, fixed, sticky)
 * @param $box-edge-values - List of lengths accepting CSS shorthand notation
 *                          Supports null values to skip specific edges
 * @requires _is-length function for validation
 * @requires _unpack-shorthand function for processing shorthand values
 */
@mixin position($position, $box-edge-values);

Usage Examples:

// Set position with specific offsets
.element {
  @include position(relative, 0 null null 10em);
  // Result:
  // position: relative;
  // top: 0;
  // left: 10em;
}

// Shorthand for all edges
.modal {
  @include position(absolute, 0);
  // Result:
  // position: absolute;
  // top: 0;
  // right: 0;
  // bottom: 0;
  // left: 0;
}

// Partial positioning
.tooltip {
  @include position(absolute, 100% null null 50%);
  // Result:
  // position: absolute;
  // top: 100%;
  // left: 50%;
}

Size Mixin

Sets the width and height of an element in one statement with optional different values.

/**
 * Sets width and height in one statement
 * @param $width - Width value (number with unit or string like 'auto')
 * @param $height - Height value (optional, defaults to $width for square elements)
 * @throws Error if values are not valid sizes
 * @requires _is-size function for validation
 */
@mixin size($width, $height: $width);

Usage Examples:

// Square element
.icon {
  @include size(2em);
  // Result:
  // width: 2em;
  // height: 2em;
}

// Rectangle element
.banner {
  @include size(auto, 10em);
  // Result:
  // width: auto;
  // height: 10em;
}

// Responsive sizing
.card {
  @include size(100%, 200px);
  // Result:
  // width: 100%;
  // height: 200px;
}

Margin Mixin

Sets margin on specific edges with support for null values and CSS shorthand notation.

/**
 * Sets margin on specific edges, supports null values
 * @param $values - List of margin values accepting CSS shorthand
 *                 Supports null to skip specific edges
 * @requires _directional-property function for processing
 * @requires _is-length function for validation
 */
@mixin margin($values);

Usage Examples:

// Center horizontally, no vertical margin
.centered {
  @include margin(null auto);
  // Result:
  // margin-left: auto;
  // margin-right: auto;
}

// Complex margin with mixed units
.content {
  @include margin(10px 3em 20vh null);
  // Result:
  // margin-top: 10px;
  // margin-right: 3em;
  // margin-bottom: 20vh;
}

// All edges
.spaced {
  @include margin(1rem);
  // Result:
  // margin: 1rem;
}

Padding Mixin

Sets padding on specific sides with support for null values and CSS shorthand notation.

/**
 * Sets padding on specific sides, supports null values
 * @param $values - List of padding values accepting CSS shorthand
 *                 Supports null to skip specific edges
 * @requires _directional-property function for processing
 * @requires _is-length function for validation
 */
@mixin padding($values);

Usage Examples:

// Horizontal padding only
.button {
  @include padding(null 1rem);
  // Result:
  // padding-left: 1rem;
  // padding-right: 1rem;
}

// Asymmetric padding
.card {
  @include padding(10vh null 10px 5%);
  // Result:
  // padding-top: 10vh;
  // padding-bottom: 10px;
  // padding-left: 5%;
}

// Uniform padding
.container {
  @include padding(2rem);
  // Result:
  // padding: 2rem;
}

Shorthand Value Processing

All layout mixins support CSS shorthand notation:

One value: Applied to all edges (1rem → 1rem 1rem 1rem 1rem)
Two values: Vertical and horizontal (1rem 2rem → 1rem 2rem 1rem 2rem)
Three values: Top, horizontal, bottom (1rem 2rem 3rem → 1rem 2rem 3rem 2rem)
Four values: Top, right, bottom, left (1rem 2rem 3rem 4rem)

Null Value Behavior

Using null in shorthand values:

Skips that edge entirely (no CSS property generated)
Useful for partial styling (e.g., horizontal-only margins)
Maintains CSS cascade behavior

// Only set horizontal margins
.example {
  @include margin(null 1rem);
  // Generates: margin-left: 1rem; margin-right: 1rem;
  // Does NOT generate: margin-top or margin-bottom
}

Error Handling

Layout mixins validate their arguments and throw compilation errors for invalid inputs:

// Invalid size values
.invalid {
  @include size("not-a-size");
  // Error: "not-a-size" is not a valid length for the $width argument
}

// Invalid position values
.also-invalid {
  @include position(relative, "invalid-length");
  // Error: Invalid length value in shorthand
}

Common Patterns

// Centering pattern
.centered-modal {
  @include position(fixed, 50% null null 50%);
  @include size(400px, 300px);
  @include margin(-150px null null -200px); // Negative margins for centering
}

// Full viewport overlay
.overlay {
  @include position(fixed, 0);
  @include size(100vw, 100vh);
}

// Card layout
.card {
  @include padding(1.5rem);
  @include margin(null null 2rem);
  @include size(100%, auto);
}

Version

Tile

Files