ThimbleCSS

A mini CSS Framework

v2.2.1
Get Started

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

six
six
four
four
four
three
three
three
three
fifth
fifth
fifth
fifth
fifth
two
two
two
two
two
two
one
one
one
one
one
one
one
one
one
one
one
one

<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

  I will fit my content.  
I'll Fill what's left!

<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

three - first item
six - second item

<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

three - first item
six - second item

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

Text


Text



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

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

Justify End

.justify-end
four
four

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

Justify Center

.justify-center
four
four

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

Justify Space

.justify-space
four
four

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

Justify Around

.justify-around
four
four

<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

The quick brown fox

The quick brown fox

The quick brown fox

The quick brown fox

The quick brown fox
The quick brown fox


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

Go Big!




Body Alignment

.text-left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend nibh et mauris iaculis id ullamcorper lectus commodo. Vivamus quam justo.

.text-right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend nibh et mauris iaculis id ullamcorper lectus commodo. Vivamus quam justo.

.text-center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend nibh et mauris iaculis id ullamcorper lectus commodo. Vivamus quam justo.

.text-justify

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend nibh et mauris iaculis id ullamcorper lectus commodo. Vivamus quam justo.

Clip & Ellispsis

Manually control single line ellipsis and text clip

.ellipsis

ELLIPSIS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend nibh et mauris iaculis id ullamcorper lectus commodo. Vivamus quam justo.

.text-clip

CLIP Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend nibh et mauris iaculis id ullamcorper lectus commodo. Vivamus quam justo.

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

$blue
#2266a7

$violet
#540D6E

$red
#f15a3b

$orange
#EA9643

$yellow
#FFE066

$green
#57a290

Lists

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

  • Unordered
  • List Item Two
  • List Item Three
  • List Item Four
  • List Item Five
  • Nested List Item
    • List Item One
    • List Item Two
  • Nested List Item
    • List Item One
    • List Item Two
  1. Ordered
  2. List Item Two
  3. List Item Three
  4. List Item Four
  5. List Item Five
Description Term
Description Definition
Description Term
Description Definition
.none
  • No List Styles
  • List Item Two
  • List Item Three
  • List Item Four
  • List Item Five
.lined
  • Lined List
  • List Item Two
  • List Item Three
  • List Item Four
  • List Item Five

Media

Images

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

test-image
test-image
test-image


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