Lightweight & Expressive  

Use only the CSS threads you need to start building. Built with semantic and expressive classnames for clarity and ease of use.

No JS requirements, no huge settings files to manage, and no major css overrides to get in the way. ThimbleCSS uses a built in version of sanitize.css to let the browser do the work.

   Install ThimbleCSS  

Install with npm, yarn, or download and compile on your own to get started.

Install with npm

$ npm install thimblecss

// Import the main thimble file in your SCSS
@use 'thimblecss/scss/thimble' as *;

Install with Yarn

$ yarn add thimblecss

// Import the main thimble file in your SCSS
@use 'thimblecss/scss/thimble' as *;

   Customization  

Override variables or create your own custom overrides file. View the override reference file.

:root {
  --primary-font: 'Your Custom Font', sans-serif;
  --green: #your-color;
  --blue: #your-color;
  // Override any CSS custom properties
}

Breakpoints

ThimbleCSS uses these standard responsive breakpoints by default:

// Default breakpoints
Small: 480px
Medium: 768px  
Large: 1024px
X-Large: 1280px

To customize breakpoints, use the @use...with configuration syntax when importing ThimbleCSS:

@use 'thimblecss/scss/thimble' with (
  $small-break:  600px,
  $medium-break: 900px,
  $large-break:  1200px,
  $xlarge-break: 1400px
);

Light & Dark Mode

ThimbleCSS ships with light and dark mode out of the box by using the light-dark() color function.

:root {
  color-scheme: light !important;
  // OR
  color-scheme: dark !important;

  // If left to default, you should define colors with the light-dark function:
  --header-color:light-dark(var(--jet), white);
}

Optional Modules

By default Thimble will include buttons, forms, and a small utility set of classes. You can choose to remove them in the same way you can set breakpoints when initializing Thimble:

@use 'thimblecss/scss/thimble' with (
  $include-forms: false,
  $include-buttons: false,
  $include-utilities: false
);

 Grid System   

A simple and clean 12 column XY grid with cell-level padding and margin control. Grids have full flexbox alignment and spacing capabilities.

.grid Wrap all your grids this class, regardless of direction and orientation.

.cell This is the basic column and grid block.

Basics

<div class="grid">
  <div class="cell six">six</div>
  <div class="cell six">six</div>

  <div class="cell four">four</div>
  <div class="cell four">four</div>
  <div class="cell four">four</div>

  <div class="cell three">three</div>
  <div class="cell three">three</div>
  <div class="cell three">three</div>
  <div class="cell three">three</div>
</div>
etc...

You don't have to divide grids into rows unless you need to, just keep stacking internal cells.

The .fifth class creates 20% width columns, perfect for 5-column layouts or dividing content into fifths.

Sizing

Cells are controlled with a simple [break point size]-[column-size] pattern. A cell with a class of .twelve.small-six will be a full twelve columns on mobile and six columns at the small breakpoint. If you need a cell to fill the space or shrink to content, use .fill and .fit respectively. You can also collapse an individual cell's margin(.collapse) and padding(.collapse-padding).

<div class="grid">
  <div class="cell fit">I will fit my content.</div>
  <div class="cell fill">I'll Fill what's left!</div>
</div>

Grid Direction

Grids can be made vertical, or have their direction reversed with two simple classes:

<div class="grid grid-row collapse-padding vertical">
  <div class="cell four">three - first item</div>
  <div class="cell six">six - second item</div>
</div>

To reverse the grid flow on either a horizontal or vertical grid, just add the class .reverse:

<div class="grid grid-row collapse-padding vertical reverse">
  <div class="cell four">three - first item</div>
  <div class="cell six">six - second item</div>
</div>

Advanced Grid Features

ThimbleCSS includes additional grid modifiers for enhanced control:

<div class="grid nowrap">
  <div class="cell four">Won't wrap</div>
  <div class="cell four">to next line</div>
  <div class="cell four">even if too wide</div>
  <div class="cell four">for container</div>
</div>

Edge Grid Classes

Use edge classes on the grid container to create full-bleed layouts by extending cells to the edges of their container:

<div class="grid edge">
  <div class="cell four">Edge grid</div>
  <div class="cell four">extends cells</div>
  <div class="cell four">to container edge</div>
</div>

<div class="grid half-edge">
  <div class="cell four">Half-edge grid</div>
  <div class="cell four">extends cells</div>
  <div class="cell four">halfway to edge</div>
</div>

The .edge class removes both cell margin and padding from the grid edges, while .half-edge only removes the cell margin, keeping padding intact.

Cell Ordering

Control the visual order of cells without changing HTML structure:

<div class="grid">
  <div class="cell four medium-order-3">First in HTML</div>
  <div class="cell four medium-order-1">Second in HTML</div>
  <div class="cell four medium-order-2">Third in HTML</div>
</div>

   Grid Vertical Alignment   

Alignment classes handle all vertical alignment in a grid:

Align Top

<div class="grid align-top">
  <div class="cell"> </div>
  <div class="cell"> </div>
  <div class="cell"> </div>
</div>

Align Bottom

<div class="grid align-bottom">
  <div class="cell"> </div>
  <div class="cell"> </div>
  <div class="cell"> </div>
</div>

Align Center

<div class="grid align-center">
  <div class="cell"> </div>
  <div class="cell"> </div>
  <div class="cell"> </div>
</div>

Align to Text Baseline

<div class="grid align-baseline">
  <div class="cell">Text</div>
  <div class="cell"><h2>Text</h2></div>
  <div class="cell"><h4>Text</h4></div>
</div>

Align Stretch

<div class="grid align-stretch">
  <div class="cell"> </div>
  <div class="cell"> </div>
  <div class="cell"> </div>
</div>

Individual Cell Alignment

You can also apply alignment classes to individual cells:

<div class="grid">
  <div class="cell three align-top">Top</div>
  <div class="cell three align-center">Center</div>
  <div class="cell three align-bottom">Bottom</div>
  <div class="cell three align-stretch">Stretch</div>
</div>

    Justify Grid Cells  

Horizontal justification controls how grid cells are distributed along the main axis:

Justify Start

<div class="grid justify-start">
  <div class="cell four">four</div>
  <div class="cell four">four</div>
</div>

Justify End

<div class="grid justify-end">
  <div class="cell four">four</div>
  <div class="cell four">four</div>
</div>

Justify Center

<div class="grid justify-center">
  <div class="cell four">four</div>
  <div class="cell four">four</div>
</div>

Justify Space

Space between cells (space-between)

<div class="grid justify-space">
  <div class="cell four">four</div>
  <div class="cell four">four</div>
</div>

Justify Around

Space around each cell (space-around)

<div class="grid justify-around">
  <div class="cell four">four</div>
  <div class="cell four">four</div>
</div>

Combining Justify & Align

Justify and align classes can be combined for complete grid control:

<div class="grid justify-center align-center">
  <div class="cell four">Centered both ways</div>
</div>

 Containers   

A simple way to contain and center your content with predefined max-widths.

Container Sizes

Each container class sets a maximum width and centers the content:

• .container-small - 540px max-width
• .container-medium - 720px max-width
• .container-large - 960px max-width
• .container-xlarge - 1140px max-width
• .container-xxlarge - 1320px max-width

Customizing Container Sizes

Container widths can be customized by overriding CSS custom properties in your :root or override file:

:root {
  --container-small: 540px;
  --container-medium: 720px;
  --container-large: 960px;
  --container-xlarge: 1140px;
  --container-xxlarge: 1320px;
}

The example below is a simplified version of the container for this page. A container class can be combined with grid classes.

<div class="container-large grid">
  <div class="cell medium-two sidebar">
    Sidebar Content
  </div>
  <div class="cell medium-nine page-docs">
    Document Content
  </div>
</div>

Breaking out of Containers

Sometimes you want to break the rigid constraints of a centered container. ThimbleCSS provides two simple classes for pushing content safely and responsively outside of a centered content container.

<div class="container-medium">
  <div class="align-wide">
    Content push just outside the bounds of centered container.
  </div>
  <div class="align-full">
    Content will push page width from inside centered container.
  </div>
</div>

  Visibility

Show or hide elements at different screen sizes with the [break point size]-[show/hide] pattern.

<div class="small-hide medium-show">Hidden on mobile</div>
<div class="medium-hide">Hidden on medium and up</div>

 Buttons   

Button styles are optional and can be disabled by setting $include-forms to false when calling Thimble in your main CSS file.

@use 'styles/thimblecss/thimble' with (
  $include-buttons: false
);

Buttons

<a href="#" class="button">Default Button</a>

<a href="#" class="button secondary">Secondary Button</a>

<a href="#" class="button ghost">Ghost Button</a>

<a href="#" class="button full">Full-Width Button</a>

   Forms  

Form styles are optional and can be disabled by setting $include-forms to false when calling Thimble in your main CSS file.

@use 'styles/thimblecss/thimble' with (
  $include-forms: false
);

Inputs

Radio & Checkboxes

Select

Textarea

    Typography  

Headings

ThimbleCSS's basic heading typographic hierarchy is based on the major third scale (1.25). Create out of the box responsive headers by adding the class vw to any header.

Sometimes you need a hero-heading to go with a hero image and H1 just isn't big enough. We've included a class .super-heading for just such an occasion:

Responsive Typography

Use viewport-width based sizing for truly responsive headlines:

<h1 class="vw">Scales from 6vw to 3.5vw</h1>
<h2 class="vw">Scales from 5vw to 3vw</h2>

Body Alignment

Control text alignment at different breakpoints using the [break point size]-[text alignment] pattern.

Responsive Text Alignment

Text alignment can change at different breakpoints. This example is centered on mobile but left-aligned on medium screens and larger:

<p class="text-center medium-text-left">
  This text changes alignment based on screen size.
</p>

Clip & Ellispsis

Formatting

Sometimes you need to format text on the fly in order to bold, italicize, etc. without adding another tag.

.em   Italicize without an em tag

.small   Small text without small tag

.strong   Bold text without strong tag

.sup   Superscript text without sup tag

.sub   Subscript text without sub tag

.sub   Subscript text without sub tag

.uppercase   Uppercase Text

.lowercase   LOWERCASE ANY TEXT

.underline   Underline any text

   Default Colors   

Color Variants

Each base color automatically generates light and dark variants using CSS color-mix():

// Base color
--green: #6F8D6A;

// Auto-generated variants
--green-l1: 24% lighter
--green-l2: 46% lighter
--green-d1: 20% darker
--green-d2: 40% darker
    

Using Color Variants

// In your CSS
.my-element {
  background-color: var(--blue-l1);
  border: 2px solid var(--blue-d1);
}

// Or with color-mix directly
.custom {
  color: color-mix(in oklch, var(--green), white 30%);
}

    Lists  

You get a list, and you get a list, everyone gets a list!

   Media  

Images

By default images will have a max-width of its container. No additional classes needed.

You can combine images with border radius helpers:

.rounded-small

.rounded-medium

.rounded-large

Video Embeds & Aspect Ratios

ThimbleCSS includes aspect ratio utilities for responsive media embeds. These work with any media element including videos, iframes, and images.

16:9 Aspect Ratio (Widescreen)

Perfect for YouTube, Vimeo, and modern video content:

   Accessibility  

ThimbleCSS automatically respects user accessibility preferences:

// Respects prefers-reduced-motion
@media (prefers-reduced-motion: reduce) {
  /* All animations disabled */
}

// Respects prefers-reduced-transparency
@media (prefers-reduced-transparency: reduce) {
  /* Backdrop filters disabled */
}

  Utility Classes 

Utilities are optional and can be disabled by setting $include-utilities to false when calling Thimble in your main CSS file.

@use 'styles/thimblecss/thimble' with (
  $include-utilities: false
);

Display

Position

Overflow

Border Radius

Shadows

Text Colors