or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

base.md components.md customization.md elements.md form.md grid.md helpers.md index.md layout.md

tile.json

Utility Helpers

CSS utility classes for spacing, typography, colors, flexbox alignment, and other common styling needs that can be applied directly to HTML elements.

Capabilities

Spacing Utilities

Margin and padding classes with consistent spacing scale for precise layout control.

/**
 * Import spacing utilities
 */
@use 'bulma/sass/helpers/spacing';

<!-- Margin utilities -->
<div class="m-0">No margin</div>
<div class="m-1">Small margin</div>
<div class="m-2">Medium margin</div>
<div class="m-4">Large margin</div>
<div class="m-6">Extra large margin</div>

<!-- Directional margins -->
<div class="mt-2">Margin top</div>
<div class="mr-3">Margin right</div>
<div class="mb-4">Margin bottom</div>
<div class="ml-2">Margin left</div>
<div class="mx-4">Margin horizontal (left + right)</div>
<div class="my-3">Margin vertical (top + bottom)</div>

<!-- Padding utilities -->
<div class="p-0">No padding</div>
<div class="p-2">Medium padding</div>
<div class="p-4">Large padding</div>
<div class="p-6">Extra large padding</div>

<!-- Directional padding -->
<div class="pt-2">Padding top</div>
<div class="pr-3">Padding right</div>
<div class="pb-4">Padding bottom</div>
<div class="pl-2">Padding left</div>
<div class="px-4">Padding horizontal</div>
<div class="py-3">Padding vertical</div>

<!-- Negative margins -->
<div class="mt--2">Negative margin top</div>
<div class="ml--3">Negative margin left</div>

Spacing Scale:

/* Spacing values */
.m-0, .p-0     /* 0 */
.m-1, .p-1     /* 0.25rem */
.m-2, .p-2     /* 0.5rem */
.m-3, .p-3     /* 0.75rem */
.m-4, .p-4     /* 1rem */
.m-5, .p-5     /* 1.25rem */
.m-6, .p-6     /* 1.5rem */
.m-auto        /* auto (margin only) */

/* Directional classes */
/* t = top, r = right, b = bottom, l = left */
/* x = horizontal, y = vertical */

Typography Utilities

Text styling, alignment, and sizing utilities for consistent typography.

/**
 * Import typography utilities
 */
@use 'bulma/sass/helpers/typography';

<!-- Text alignment -->
<p class="has-text-left">Left aligned text</p>
<p class="has-text-centered">Centered text</p>
<p class="has-text-right">Right aligned text</p>
<p class="has-text-justified">Justified text</p>

<!-- Text sizes -->
<p class="is-size-1">Size 1 (3rem)</p>
<p class="is-size-2">Size 2 (2.5rem)</p>
<p class="is-size-3">Size 3 (2rem)</p>
<p class="is-size-4">Size 4 (1.5rem)</p>
<p class="is-size-5">Size 5 (1.25rem)</p>
<p class="is-size-6">Size 6 (1rem)</p>
<p class="is-size-7">Size 7 (0.75rem)</p>

<!-- Responsive text sizes -->
<p class="is-size-1-mobile is-size-2-tablet is-size-3-desktop">
  Responsive text sizing
</p>

<!-- Text weight -->
<p class="has-text-weight-light">Light weight</p>
<p class="has-text-weight-normal">Normal weight</p>
<p class="has-text-weight-medium">Medium weight</p>
<p class="has-text-weight-semibold">Semibold weight</p>
<p class="has-text-weight-bold">Bold weight</p>

<!-- Text transform -->
<p class="is-capitalized">Capitalized Text</p>
<p class="is-lowercase">LOWERCASE TEXT</p>
<p class="is-uppercase">uppercase text</p>
<p class="is-italic">Italic text</p>
<p class="is-underlined">Underlined text</p>

<!-- Text family -->
<p class="is-family-sans-serif">Sans serif font</p>
<p class="is-family-serif">Serif font</p>
<p class="is-family-monospace">Monospace font</p>
<p class="is-family-code">Code font</p>

Color Utilities

Text and background color classes with full color palette support.

/**
 * Import color utilities
 */
@use 'bulma/sass/helpers/color';

<!-- Text colors -->
<p class="has-text-primary">Primary text</p>
<p class="has-text-info">Info text</p>
<p class="has-text-success">Success text</p>
<p class="has-text-warning">Warning text</p>
<p class="has-text-danger">Danger text</p>
<p class="has-text-dark">Dark text</p>
<p class="has-text-light">Light text</p>

<!-- Text shades -->
<p class="has-text-black">Black text</p>
<p class="has-text-black-bis">Black bis text</p>
<p class="has-text-black-ter">Black ter text</p>
<p class="has-text-grey-darker">Grey darker text</p>
<p class="has-text-grey-dark">Grey dark text</p>
<p class="has-text-grey">Grey text</p>
<p class="has-text-grey-light">Grey light text</p>
<p class="has-text-grey-lighter">Grey lighter text</p>
<p class="has-text-white-ter">White ter text</p>
<p class="has-text-white-bis">White bis text</p>
<p class="has-text-white">White text</p>

<!-- Background colors -->
<div class="has-background-primary">Primary background</div>
<div class="has-background-info">Info background</div>
<div class="has-background-success">Success background</div>
<div class="has-background-warning">Warning background</div>
<div class="has-background-danger">Danger background</div>
<div class="has-background-dark">Dark background</div>
<div class="has-background-light">Light background</div>

<!-- Background shades -->
<div class="has-background-black">Black background</div>
<div class="has-background-black-bis">Black bis background</div>
<div class="has-background-white">White background</div>
<div class="has-background-white-bis">White bis background</div>

<!-- Light variants -->
<div class="has-background-primary-light">Light primary background</div>
<div class="has-background-info-light">Light info background</div>
<div class="has-background-success-light">Light success background</div>
<div class="has-background-warning-light">Light warning background</div>
<div class="has-background-danger-light">Light danger background</div>

<!-- Dark variants -->
<div class="has-background-primary-dark">Dark primary background</div>
<div class="has-background-info-dark">Dark info background</div>

Flexbox Utilities

Flexbox alignment, direction, and wrapping utilities for layout control.

/**
 * Import flexbox utilities
 */
@use 'bulma/sass/helpers/flexbox';

<!-- Flex display -->
<div class="is-flex">Flex container</div>
<div class="is-inline-flex">Inline flex container</div>

<!-- Flex direction -->
<div class="is-flex-direction-row">Row direction</div>
<div class="is-flex-direction-row-reverse">Row reverse</div>
<div class="is-flex-direction-column">Column direction</div>
<div class="is-flex-direction-column-reverse">Column reverse</div>

<!-- Flex wrap -->
<div class="is-flex-wrap-nowrap">No wrap</div>
<div class="is-flex-wrap-wrap">Wrap</div>
<div class="is-flex-wrap-wrap-reverse">Wrap reverse</div>

<!-- Justify content -->
<div class="is-justify-content-flex-start">Justify start</div>
<div class="is-justify-content-flex-end">Justify end</div>
<div class="is-justify-content-center">Justify center</div>
<div class="is-justify-content-space-between">Space between</div>
<div class="is-justify-content-space-around">Space around</div>
<div class="is-justify-content-space-evenly">Space evenly</div>

<!-- Align items -->
<div class="is-align-items-stretch">Align stretch</div>
<div class="is-align-items-flex-start">Align start</div>
<div class="is-align-items-flex-end">Align end</div>
<div class="is-align-items-center">Align center</div>
<div class="is-align-items-baseline">Align baseline</div>

<!-- Align content -->
<div class="is-align-content-flex-start">Align content start</div>
<div class="is-align-content-flex-end">Align content end</div>
<div class="is-align-content-center">Align content center</div>
<div class="is-align-content-space-between">Content space between</div>
<div class="is-align-content-space-around">Content space around</div>
<div class="is-align-content-stretch">Content stretch</div>

<!-- Flex grow/shrink -->
<div class="is-flex-grow-0">No grow</div>
<div class="is-flex-grow-1">Grow 1</div>
<div class="is-flex-grow-2">Grow 2</div>
<div class="is-flex-grow-3">Grow 3</div>
<div class="is-flex-grow-4">Grow 4</div>
<div class="is-flex-grow-5">Grow 5</div>

<div class="is-flex-shrink-0">No shrink</div>
<div class="is-flex-shrink-1">Shrink 1</div>
<div class="is-flex-shrink-2">Shrink 2</div>
<div class="is-flex-shrink-3">Shrink 3</div>
<div class="is-flex-shrink-4">Shrink 4</div>
<div class="is-flex-shrink-5">Shrink 5</div>

<!-- Align self -->
<div class="is-align-self-auto">Align self auto</div>
<div class="is-align-self-flex-start">Align self start</div>
<div class="is-align-self-flex-end">Align self end</div>
<div class="is-align-self-center">Align self center</div>
<div class="is-align-self-baseline">Align self baseline</div>
<div class="is-align-self-stretch">Align self stretch</div>

Gap Utilities

Spacing between elements using CSS gap property.

/**
 * Import gap utilities
 */
@use 'bulma/sass/helpers/gap';

<!-- Gap utilities -->
<div class="is-flex gap-0">No gap</div>
<div class="is-flex gap-1">Small gap</div>
<div class="is-flex gap-2">Medium gap</div>
<div class="is-flex gap-4">Large gap</div>
<div class="is-flex gap-6">Extra large gap</div>

<!-- Column and row gaps -->
<div class="is-flex column-gap-2">Column gap only</div>
<div class="is-flex row-gap-3">Row gap only</div>

<!-- Grid with gaps -->
<div class="is-grid gap-4">
  <div>Grid item 1</div>
  <div>Grid item 2</div>
  <div>Grid item 3</div>
  <div>Grid item 4</div>
</div>

Position Utilities

Positioning helpers for absolute, relative, fixed, and sticky positioning.

/**
 * Import position utilities
 */
@use 'bulma/sass/helpers/position';

<!-- Position types -->
<div class="is-relative">Relative position</div>
<div class="is-absolute">Absolute position</div>
<div class="is-fixed">Fixed position</div>
<div class="is-sticky">Sticky position</div>

<!-- Position coordinates -->
<div class="is-absolute top-0">Top 0</div>
<div class="is-absolute right-0">Right 0</div>
<div class="is-absolute bottom-0">Bottom 0</div>
<div class="is-absolute left-0">Left 0</div>

<!-- Position combinations -->
<div class="is-absolute top-0 right-0">Top right corner</div>
<div class="is-absolute bottom-0 left-0">Bottom left corner</div>

<!-- Overlay -->
<div class="is-overlay">Full overlay position</div>

Visibility Utilities

Show/hide elements and screen reader utilities.

/**
 * Import visibility utilities
 */
@use 'bulma/sass/helpers/visibility';

<!-- Basic visibility -->
<div class="is-hidden">Hidden element</div>
<div class="is-visible">Visible element</div>

<!-- Responsive visibility -->
<div class="is-hidden-mobile">Hidden on mobile</div>
<div class="is-hidden-tablet-only">Hidden on tablet only</div>
<div class="is-hidden-desktop">Hidden on desktop</div>
<div class="is-hidden-widescreen">Hidden on widescreen</div>
<div class="is-hidden-fullhd">Hidden on fullhd</div>

<!-- Screen reader utilities -->
<div class="is-sr-only">Screen reader only text</div>
<div class="is-invisible">Invisible but takes space</div>

<!-- Display utilities -->
<div class="is-block">Block display</div>
<div class="is-inline">Inline display</div>
<div class="is-inline-block">Inline block display</div>
<div class="is-flex">Flex display</div>
<div class="is-inline-flex">Inline flex display</div>

Float Utilities

Float and clearfix utilities for layout control.

/**
 * Import float utilities
 */
@use 'bulma/sass/helpers/float';

<!-- Float utilities -->
<div class="is-pulled-left">Floated left</div>
<div class="is-pulled-right">Floated right</div>

<!-- Clearfix -->
<div class="is-clearfix">
  <div class="is-pulled-left">Floated content</div>
  <div class="is-pulled-right">More floated content</div>
</div>

Border Utilities

Border styling utilities for adding borders to elements.

/**
 * Import border utilities
 */
@use 'bulma/sass/helpers/border';

<!-- Border utilities -->
<div class="has-border">Basic border</div>
<div class="has-border-top">Top border only</div>
<div class="has-border-right">Right border only</div>
<div class="has-border-bottom">Bottom border only</div>
<div class="has-border-left">Left border only</div>

<!-- Border radius -->
<div class="is-rounded">Rounded corners</div>
<div class="has-radius-normal">Normal radius</div>
<div class="has-radius-small">Small radius</div>
<div class="has-radius-large">Large radius</div>

Overflow Utilities

Overflow control for managing content that exceeds container bounds.

/**
 * Import overflow utilities  
 */
@use 'bulma/sass/helpers/overflow';

<!-- Overflow utilities -->
<div class="is-clipped">Clipped overflow</div>
<div class="has-overflow-auto">Auto overflow</div>
<div class="has-overflow-hidden">Hidden overflow</div>
<div class="has-overflow-scroll">Scroll overflow</div>
<div class="has-overflow-visible">Visible overflow</div>

<!-- Directional overflow -->
<div class="has-overflow-x-auto">Horizontal auto overflow</div>
<div class="has-overflow-y-scroll">Vertical scroll overflow</div>

Other Utilities

Miscellaneous utility classes for common styling needs.

/**
 * Import other utilities
 */
@use 'bulma/sass/helpers/other';

<!-- Cursor utilities -->
<div class="has-cursor-pointer">Pointer cursor</div>
<div class="has-cursor-help">Help cursor</div>
<div class="has-cursor-wait">Wait cursor</div>
<div class="has-cursor-not-allowed">Not allowed cursor</div>

<!-- User select -->
<div class="is-unselectable">Unselectable text</div>
<div class="has-user-select-all">Select all text</div>
<div class="has-user-select-none">No text selection</div>

<!-- Shadows -->
<div class="has-shadow">Basic shadow</div>
<div class="has-shadow-small">Small shadow</div>
<div class="has-shadow-medium">Medium shadow</div>
<div class="has-shadow-large">Large shadow</div>

<!-- Aspect ratio -->
<div class="has-aspect-ratio-square">Square aspect ratio</div>
<div class="has-aspect-ratio-16x9">16:9 aspect ratio</div>
<div class="has-aspect-ratio-4x3">4:3 aspect ratio</div>

Usage Examples

<!-- Combining utilities -->
<div class="is-flex is-justify-content-center is-align-items-center p-6 has-background-primary has-text-white">
  <h1 class="title has-text-white is-size-2 has-text-centered">
    Centered Content
  </h1>
</div>

<!-- Responsive utilities -->
<div class="columns">
  <div class="column is-half-tablet is-one-third-desktop p-4 m-2">
    <div class="box has-text-centered">
      <h3 class="title is-size-4-desktop is-size-5-mobile">
        Responsive Card
      </h3>
      <p class="is-hidden-mobile">
        This text is hidden on mobile devices.
      </p>
    </div>
  </div>
</div>

<!-- Complex layout with utilities -->
<section class="section has-background-light">
  <div class="container">
    <div class="is-flex is-justify-content-space-between is-align-items-center mb-6">
      <h2 class="title is-3 mb-0">Section Title</h2>
      <div class="buttons">
        <button class="button is-primary">Action 1</button>
        <button class="button is-outlined">Action 2</button>
      </div>
    </div>
    
    <div class="columns is-multiline">
      <div class="column is-6-tablet is-4-desktop">
        <div class="card">
          <div class="card-content p-5">
            <h3 class="title is-5 has-text-primary mb-3">Card Title</h3>
            <p class="has-text-grey-dark">Card content with utility classes.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>