A Simple & Responsive CSS Framework

Use only the CSS threads you need to start building.

Only what you need to start building. No JS requirements, huge settings files to manage, or css overrides that 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

// For Ruby on Rails, add the core thimble file to your application.scss
@import 'thimblecss/scss/thimble';

Install with Yarn

$ yarn add thimblecss

// For Ruby on Rails, add the core thimble file to your application.scss
@import 'thimblecss/scss/thimble';

Manually Compile with sass

$ sass --watch thimble.scss:style.css

The Grid

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.

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).

.fill .fit .collapse .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:

.vertical

<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:

.vertical .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>

Grid Vertical Alignment

Alignment classes handle all vertical alignment in a grid:

.align-top .align-bottom .align-center .align-baseline .align-stretch

Align Top

.align-top

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

Align Bottom

.align-bottom

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

Align Center

.align-center

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

Align to Text Baseline

.align-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

.align-stretch

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

Justify Grid Cells

All horizontal justification of grid cells are handled with a few simple classes:

.justify-start .justify-end .justify-center .justify-space .justify-around

Justify Start

.justify-start

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

Justify End

.justify-end

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

Justify Center

.justify-center

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

Justify Space

.justify-space

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

Justify Around

.justify-around

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

Containers

A simple way to contain and center your content.

.container .small-container .large-container

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

<div class="container 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.

.align-wide .align-full

<div class="container">
  <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>

Typography

Headings

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

.sub-heading .vw

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:

.super-header

Body Alignment

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

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!

Videos

Wrap any video embed in .video-container to make it fill your container like images

.video-container

<div class="video-container">
  <iframe src="https://player.vimeo.com/video/5904993" width="500" height="275" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

SASS Overrides & Media Queries

ThimbleCSS includes a simple Override file that can be adjusted and added to for all SASS variables. This file looks like this out of the box:

// Colors
$blue: #2266a7;
$violet: #540D6E;
$yellow: #FFE066;
$orange: #EA9643;
$red: #f15a3b;
$green: #57a290;

$gray:#6e7e85;
$black:#181818;

// Typography
$body-font: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif;
$header-font: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif;

$line-height:1.5;

$header-color:$black;
$font-color:#3d3d3d;
$subfont-color: rgba($font-color,.6);

$link-color:$blue;
$link-hover:$red;

// Transitions
$fast-speed:all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
$normal-speed:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
$slow-speed:all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
$slowest-speed:all 0.75s cubic-bezier(0.4, 0, 0.2, 1);

// Shadows
$base-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.14);
$hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.25), 0 4px 20px rgba(0, 0, 0, 0.18);
$selected-shadow: 0 12px 16px rgba(0, 0, 0, 0.25), 0 18px 40px rgba(0, 0, 0, 0.19);
$solid-shadow: 3px 3px 0px rgba(0,0,0,0.2);

// Metrics
$site-width:960px;
$small-site-width:760px;
$large-site-width:1024px;

$cell-margin:.5rem;
$cell-padding:.5rem;

// Media Break Adjustments
$small-break:  480px;
$medium-break: 768px;
$large-break:  1024px;
$xlarge-break: 1280px;

Media Queries

Media queries are housed in the the _mixins.scss file:

  
$small:  'only screen and (min-width: #{$small-break})';
$medium: 'only screen and (min-width: #{$medium-break})';
$large:  'only screen and (min-width: #{$large-break})';
$xlarge: 'only screen and (min-width: #{$xlarge-break})';

$small-down:  'only screen and (max-width: #{$small-break - 1px})';
$medium-down: 'only screen and (max-width: #{$medium-break - 1px})';
$large-down:  'only screen and (mmax-width: #{$large-break - 1px})';
$xlarge-down: 'only screen and (max-width: #{$xlarge-break - 1px})';

By default they are mobile first, meaning they start at a min-width and move up. Included is a [size]-down option if moving from desktop size downward is required. These can all be used in your sass file with a simple variable include:

  
@media #{$small} {
  CSS Content for $small size and up
  ...
}

@media #{$medium} {
  CSS Content for $medium size and up
  ...
}

etc.

↑ Top