ThimbleCSS

Welcome to ThimbleCSS


It's easy to get started with ThimbleCSS! Simply download our zip, choose the regular, minified, or sass version and include it in your header. That's it! We now include an optional auto generated sass living style guide.



<!-- ThimbleCSS -->
<link rel="stylesheet" href="thimble.min.css" >
              

The Grid


Responsive / Flex Grid

No reason to add extra classes, add any number of cells (the ThimbleCSS flex column) and they will auto size into equal columns. If you need, you can manually control the grid size based on a twelve column layout. All you need to do is add number classes: .one .two .three ... .twelve


<div class="row">
  <div class="cell">halves</div>
  <div class="cell">halves</div>
</div> 
<div class="row">
  <div class="cell">thirds</div>
  <div class="cell">thirds</div>
  <div class="cell">thirds</div>
</div>
<div class="row">
  <div class="cell">fourths</div>
  <div class="cell">fourths</div>
  <div class="cell">fourths</div>
  <div class="cell">fourths</div>
</div>
etc...
              
six
six
four
four
four
three
three
three
three
fifths
fifths
fifths
fifths
fifths
two
two
two
two
two
two
one
one
one
one
one
one
one
one
one
one
one
one
All cells auto collapse to full width


Fixed Grid

Simply add a class of .hold to any row to make keep hold through all viewport sizes.


<div class="row hold">
  <div class="cell">six</div>
  <div class="cell">six</div>
</div> 

<div class="row hold">
  <div class="cell">four</div>
  <div class="cell">four</div>
  <div class="cell">four</div>
</div>
              
six
six
four
four
four


Row Direction

Reverse and column your row by adding .reverse .columns .column-reverse


<div class="row reverse">
  <div class="cell">1</div>
  <div class="cell">2</div>
  etc...
</div>

<div class="row column">
  <div class="cell">1</div>
  <div class="cell">2</div>
  etc...
</div>

<div class="row column-reverse">
  <div class="cell">1</div>
  <div class="cell">2</div>
  etc...
</div>
              

Reverse Order

1
2
3
4
5

Column

1
2
3
4
5

Column Reverse

1
2
3
4
5


Grid Ordering

Order any flex item for large, small, or both screens.


<div class="row hold grid-row">
  <div class="cell o2">1</div>
  <div class="cell o4">2</div>
  <div class="cell o6">3</div>
  <div class="cell o8">4</div>
  <div class="cell o10">5</div>
  <div class="cell o12">6</div>
  <div class="cell o1">7</div>
  <div class="cell o3">8</div>
  <div class="cell o5">9</div>
  <div class="cell o7">10</div>
  <div class="cell o9">11</div>
  <div class="cell o11">12</div>
</div>

<div class="row hold grid-row">
  <div class="cell o2-small">1</div>
  <div class="cell o4-small">2</div>
  <div class="cell o6-small">3</div>
  <div class="cell o8-small">4</div>
  <div class="cell o10-small">5</div>
  <div class="cell o12-small">6</div>
  <div class="cell o1-small">7</div>
  <div class="cell o3-small">8</div>
  <div class="cell o5-small">9</div>
  <div class="cell o7-small">10</div>
  <div class="cell o9-small">11</div>
  <div class="cell o11-small">12</div>
</div>

<div class="row hold grid-row">
  <div class="cell o2-large">1</div>
  <div class="cell o4-large">2</div>
  <div class="cell o6-large">3</div>
  <div class="cell o8-large">4</div>
  <div class="cell o10-large">5</div>
  <div class="cell o12-large">6</div>
  <div class="cell o1-large">7</div>
  <div class="cell o3-large">8</div>
  <div class="cell o5-large">9</div>
  <div class="cell o7-large">10</div>
  <div class="cell o9-large">11</div>
  <div class="cell o11-large">12</div>
</div>
              

Fixed Order

1
2
3
4
5
6
7
8
9
10
11
12

Order for Small Only

1
2
3
4
5
6
7
8
9
10
11
12

Order for Large Only

1
2
3
4
5
6
7
8
9
10
11
12

Align & Justify


Align Cells

Align your grid and flex content anyway you want with a few semantic classes:

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


<!-- Align Top -->
<div class="row align-top">
  <div class="cell">
    The quick brown fox..
  </div>
  <div class="cell">
    The beige hue..
  </div>
  <div class="cell">
    Grumpy wizards make...
  </div>
</div>
          
<!-- Align Center -->
<div class="row align-center">
  <div class="cell">
    The quick brown fox..
  </div>
  <div class="cell">
    The beige hue..
  </div>
  <div class="cell">
    Grumpy wizards make...
  </div>
</div>
          
<!-- Align Bottom -->
<div class="row align-bottom">
  <div class="cell">
    The quick brown fox..
  </div>
  <div class="cell">
    The beige hue..
  </div>
  <div class="cell">
    Grumpy wizards make...
  </div>
</div>
          
<!-- Varied Alignment -->
<div class="row">
  <div class="cel align-bottom">
    The quick brown fox..
  </div>
  <div class="cell align-center">
    The beige hue..
  </div>
  <div class="cell align-top">
    Grumpy wizards make...
  </div>
</div>
          
<!-- Align Text Baseline -->
<div class="row align-baseline">
  <div class="cell">
    The quick brown fox..
  </div>
  <div class="cell">
    The beige hue..
  </div>
  <div class="cell">
    Grumpy wizards make...
  </div>
</div>

<!-- Align Stretch -->
<div class="row align-stretch">
  <div class="cell">
    The quick brown fox..
  </div>
  <div class="cell">
    The beige hue..
  </div>
  <div class="cell">
    Grumpy wizards make...
  </div>
</div>
              

Align Top

The quick brown fox jumped over the lazy dog.
The beige hue on the waters of the loch impressed all, including the French queen, before she heard that symphony again, just as young Arthur wanted.
Grumpy wizards make toxic brew for the evil queen and Jack.

Align Center

The quick brown fox jumped over the lazy dog.
The beige hue on the waters of the loch impressed all, including the French queen, before she heard that symphony again, just as young Arthur wanted.
Grumpy wizards make toxic brew for the evil queen and Jack.

Align Bottom

The quick brown fox jumped over the lazy dog.
The beige hue on the waters of the loch impressed all, including the French queen, before she heard that symphony again, just as young Arthur wanted.
Grumpy wizards make toxic brew for the evil queen and Jack.

Varied Alignment

The quick brown fox jumped over the lazy dog.
The beige hue on the waters of the loch impressed all, including the French queen, before she heard that symphony again, just as young Arthur wanted.
Grumpy wizards make toxic brew for the evil queen and Jack.
Big fjords vex quick waltz nymph.

Align to Text Baseline

The quick brown fox jumped over the lazy dog.
The beige hue on the waters of the loch impressed all, including the French queen, before she heard that symphony again, just as young Arthur wanted.

Grumpy wizards make toxic brew for the evil queen and Jack.

Align Stretch

The quick brown fox jumped over the lazy dog.
The beige hue on the waters of the loch impressed all, including the French queen, before she heard that symphony again, just as young Arthur wanted.
Grumpy wizards make toxic brew for the evil queen and Jack.


Justify Cells

Justify your grid and flex content anyway you want with a few semantic classes:

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


<div class="row justify-start">
  <div class="cell two">One</div>
  etc...
</div>

<div class="row justify-end">
  <div class="cell two">One</div>
  etc...
</div>

<div class="row justify-center">
  <div class="cell two">One</div>
  etc...
</div>

<div class="row justify-space">
  <div class="cell two">One</div>
  etc...
</div>

<div class="row justify-around">
  <div class="cell two">One</div>
  etc...
</div>         
              

Justify Start

One
Two
Three
Four

Justify End

One
Two
Three
Four

Justify Center

One
Two
Three
Four

Justify Space Between

One
Two
Three
Four

Justify Space Around

One
Two
Three
Four

Typography


Headers

Be default, all headers will inherit the size of the surrounding text. You'll end up changing sizes based on context, so in order to have a properly used h1 tag that is smaller than your h2, add the classes .h1 .h2 .h3 etc... to any header. Want to make them responsive or a sub-header? Add .sub-header and .vw respectively.

h1: Oversized Header

h1: The quick brown fox jumped

h2: The quick brown fox jumped

h3: The quick brown fox jumped

h4: The quick brown fox jumped

h5: The quick brown fox jumped

h1: sub-header

h2: sub-header

h3: sub-header

h4: sub-header

h5: sub-header


Responsive Headers

h1: Oversized Header

h1: The quick brown fox jumped

h2: The quick brown fox jumped

h3: The quick brown fox jumped

h4: The quick brown fox jumped

h5: The quick brown fox jumped


Text 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-block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend nibh et mauris iaculis id ullamcorper lectus commodo. Vivamus quam justo.



Clip and Ellipsis

Manually control single line ellipsis and text clip with .ellipsis .text-clip

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

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

Lists


Unordered List

.unordered

  • List Item One
  • List Item Two
  • List Item Three
  • List Item Four
  • List Item Five
  • List Item Six

Nested List

 

  • Nested List Item
    • List Item One
    • List Item Two
  • Nested List Item
    • List Item One
    • List Item Two

Ordered List

 

  1. List Item One
  2. List Item Two
  3. List Item Three
  4. List Item Four
  5. List Item Five
  6. List Item Six

Unstyled List

.none

  • List Item One
  • List Item Two
  • List Item Three
  • List Item Four
  • List Item Five
  • List Item Six

Lined List

.lined

  • List Item One
  • List Item Two
  • List Item Three
  • List Item Four
  • List Item Five
  • List Item Six

Buttons


To make any item a button, just add a class of .button


<a href="#" class="button">Main Button</a>
<a href="#" class="button green">Green Button</a>
<a href="#" class="button red">Red Button</a>
<a href="#" class="button yellow">Yellow Button</a>
              

Main Button Green Button Red Button Yellow Button




<a href="#" class="button ghost">Ghost Button</a>
<a href="#" class="button disabled">Disabled Button</a>
<a href="#" class="button flat">Flat Button</a>
<a href="#" class="button raised">Raised Button</a>
<a href="#" class="button round">Round Button</a>
              

Ghost Button Disabled Button Flat Button Raised Button Round Button




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

Full Width Button

Cards



<div class="card">
  <div class="card-content">
    <span class="card-title">Base Card</span>
    <p>This is my card, there are many like it but this one is mine. 
    My card is my best friend. It is my life.</p>
  </div>
</div>

<div class="card">
  <div class="card-content">
    <span class="card-title">Card With Actions</span>
    <p>This is my card, there are many like it but this one is mine. 
    My card is my best friend. It is my life.</p>
  </div>
  <div class="card-actions">
    <a href="#">Action 1</a> &nbsp; <a href="#">Action 2</a>
  </div>
</div>

<div class="card">
  <div class="card-image">
    <img src="/images/henry.jpg" alt="card image" />
  </div>
  <div class="card-content">
    <span class="card-title">Image Card</span>
    <p>This is my card, there are many like it but this one is mine.</p>
  </div>
  <div class="card-actions text-right">
    <a href="#">Action 1</a>
  </div>
</div>
              
Base Card

This is my card, there are many like it but this one is mine. My card is my best friend. It is my life.

Card With Actions

This is my card, there are many like it but this one is mine. My card is my best friend. It is my life.

card image
Image Card

This is my card, there are many like it but this one is mine.

Horizontal Rules


By default <hr /> will fill the available space, want more control? Simply add the same classes that control built in 12 column grid:


<hr />
<hr class="eleven" />
<hr class="ten" />
<hr class="nine" />
<hr class="eight" />
<hr class="seven" />
<hr class="six" />
<hr class="five" />
<hr class="four" />
<hr class="three" />
<hr class="two" />
<hr class="one" />
              












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


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