or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

base.mdcomponents.mdcustomization.mdelements.mdform.mdgrid.mdhelpers.mdindex.mdlayout.md
tile.json

base.mddocs/

Base Styles and Reset

Foundation styles that provide CSS reset, animations, and base HTML element styling for consistent cross-browser appearance and behavior.

Capabilities

CSS Reset

Minimal CSS reset that normalizes default browser styles while preserving useful defaults.

/**
 * Import the Bulma CSS reset
 */
@use 'bulma/sass/base/minireset';

Key Reset Features:

  • Box-sizing set to border-box for all elements
  • Margin and padding reset on common elements
  • Font inheritance normalized
  • Form elements standardized
  • Image responsiveness defaults

Generic HTML Styling

Base styling for HTML elements providing consistent typography and element appearance.

/**
 * Import generic HTML element styles
 */
@use 'bulma/sass/base/generic';

Styled Elements:

  • Typography: html, body, h1-h6, p, strong, em
  • Lists: ul, ol, li with proper spacing
  • Links: a with hover states
  • Code: code, pre with monospace fonts
  • Tables: Basic table styling
  • Forms: Input and button normalization

Animations

CSS animations and transitions for loading states and interactive elements.

/**
 * Import Bulma animations
 */
@use 'bulma/sass/base/animations';

Available Animations:

/* Spinner animation for loading states */
@keyframes spinAround {
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }
}

/* Fade in animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Pulse animation for emphasis */
@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

Skeleton Loading

Loading skeleton styles for placeholder content while data loads, with pulsating animation effects.

/**
 * Import skeleton loading styles
 */
@use 'bulma/sass/base/skeleton';
<!-- Individual skeleton elements -->
<div class="is-skeleton">Loading content...</div>
<input class="input is-skeleton" type="text" placeholder="Loading...">
<textarea class="textarea is-skeleton" placeholder="Loading..."></textarea>

<!-- Skeleton block -->
<div class="skeleton-block"></div>

<!-- Skeleton lines -->
<div class="skeleton-lines">
  <div></div>
  <div></div>
  <div></div>
</div>

<!-- Has skeleton (overlays content) -->
<div class="has-skeleton">
  Content being loaded...
</div>

Skeleton Classes:

/* Individual element skeleton */
.is-skeleton {
  /* Makes any element a pulsating skeleton placeholder */
  animation: pulsate 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
  background-color: var(--bulma-skeleton-background);
  border-radius: var(--bulma-skeleton-radius);
  color: transparent !important;
  pointer-events: none;
}

/* Skeleton block */
.skeleton-block {
  /* Full block skeleton with minimum height */
  min-height: var(--bulma-skeleton-block-min-height); /* 4.5em */
  animation: pulsate 2s infinite;
}

/* Skeleton lines */
.skeleton-lines {
  /* Container for multiple skeleton lines */
  display: flex;
  flex-direction: column;
  gap: var(--bulma-skeleton-lines-gap); /* 0.75em */
}

.skeleton-lines > div {
  /* Individual skeleton line */
  height: var(--bulma-skeleton-line-height); /* 0.75em */
  animation: pulsate 2s infinite;
}

.skeleton-lines > div:last-child {
  /* Last line is shorter */
  width: 30%;
  min-width: 4em;
}

/* Has skeleton overlay */
.has-skeleton {
  /* Overlays skeleton on existing content */
  position: relative;
  color: transparent !important;
}

.has-skeleton::after {
  /* Skeleton overlay */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 7em;
  height: 100%;
  max-width: 100%;
  min-width: 10%;
  animation: pulsate 2s infinite;
  background-color: var(--bulma-skeleton-background);
}

@keyframes pulsate {
  /* Skeleton pulsation animation */
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

Complete Base Import

Import all base styles together.

/**
 * Import all base styles
 */
@use 'bulma/sass/base';

Usage Example:

// Custom project with Bulma base
@use 'bulma/sass/utilities';
@use 'bulma/sass/base';

// Your custom styles build on the foundation
.my-component {
  // Base styles are already applied
  font-family: inherit; // Uses Bulma's font stack
  box-sizing: border-box; // Already set by reset
}

CSS Classes

Base styles primarily affect HTML elements directly rather than providing classes, but some utility classes are available:

<!-- Animation utilities -->
<div class="is-loading">Content with loading animation</div>
<div class="has-fade-in">Content with fade-in effect</div>

<!-- Skeleton placeholders during loading -->
<div class="content">
  <div class="is-skeleton">Loading text...</div>
  <div class="skeleton-lines">
    <div></div>
    <div></div>
  </div>
  <div class="skeleton-block"></div>
</div>