Petite.css

A lightweight and customizable CSS framework



Quick to set up



Insanely responsive



Tiny and light




  What's Petite.css?

Petite.css is a lightweight and customizable css framework, built to look good on any device. Forget wielding a huge framework and use Petite.css. Get right to the point. Get there in style.

Here are some ways you can get started:

  Download petite.css
Great if you know what you're doing and just want the raw styles.


  quickstart.zip
Great for when you're starting a project from scratch and need some guidance.


  View examples
Great for viewing Petite.css in action, great for learning.





  Table of Contents





  ColorsBack to top  

Every project has a different feel.
Change text colors: .tx-color
Change border colors: .bd-color
Change background colors: .bg-color

Code:

<div class="bd-blue bg-yellow tx-red">
  Hello World
</div>

Output:

Hello World

Text:

.tx-red
.tx-orange
.tx-yellow
.tx-green
.tx-blue
.tx-white
.tx-grey
.tx-black

Background:

.bg-red
.bg-orange
.bg-yellow
.bg-green
.bg-blue
.bg-white
.bg-grey
.bg-black

Border:

.bd-red
.bd-orange
.bd-yellow
.bd-green
.bd-blue
.bd-white
.bd-grey
.bd-black





  The GridBack to top  

The grid is 12 columns, all which resize to 100% on smaller screens (less than 550px).
Every row must be contained by it's own .row element.
Column sizes are .one through .twelve and must be used with a .col class.

Code:

<div class="row">
  <div class="six col">Hello</div>
  <div class="six col">World</div>
</div>

Output:

Hello
World

All columns:

.six
.six

.five
.seven

.four
.eight

.three
.nine

.two
.ten

.one
.eleven

.twelve





  ButtonsBack to top  

Buttons work for buttons or links. Just add a .btn class.
Use .btn-sm and .btn-lg to change your button size.
Use .btn-rd to round your button's edges.
Use .btn-color to change your button color.
Use a combo of borders: .bd-color, backgrounds: .bg-color, or colors: .tx-color

Code:

<button type="button">Hello<button>
<a href="#" class="btn">World<a>

Output:

World

.btn-color:



.tx-color, .bg-color, and .bd-color:



.btn-sm and .btn-lg:



.btn-rd:






  TablesBack to top  

Add the class .striped to stripe your tables.
Add the class .hover to make your table rows hoverable.
Use .tx-center, .tx-left, .tx-right to align your cells.

Code:

<table class="hover striped">
  <thead>
    <tr>
      <th>Hello</th>
      <th class="tx-right">World</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Hola</td>
      <td class="tx-right">Mundo</td>
    </tr>
    <tr>
      <td>Bonjour</td>
      <td class="tx-right">le monde</td>
    </tr>
    <tr>
      <td>Salut</td>
      <td class="tx-right">Lume</td>
    </tr>
    <tr>
      <td>Hallo</td>
      <td class="tx-right">Welt</td>
    </tr>
  </tbody>
<table>

Output:

Hello World
Hola Mundo
Bonjour le monde
Salut Lume
Hallo Welt





  TypographyBack to top  
Headings:

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

Output:

h1

h2

h3

h4

h5
h6

Generic:

<span class="tx-reg">Regular</span>
<span class="tx-thin">Thin</span>
<strong>Strong</strong>
<em>Italic</em>
<u>Underline</u>

Output:

Regular
Thin
Strong
Italic
Underline

Code:

<div class="codeblock">
  Hello
  World
</div>
Inline <code>code</code>

Output:

Hello
World

Inline code





  FormsBack to top  

Inputs are automatically normalized to look good across browsers. Put them in the grid to display them inline.

Code:

<form>
  <div class="row">
    <div class="six col">
      <label class="tx-blue">Name</label>
      <input type="text" class="w-100" placeholder="John Doe">
    </div>
    <div class="six col">
      <label class="tx-blue">Email</label>
      <input type="email" class="w-100" placeholder="john@example.com">
    </div>
  </div>
  <div class="row">
    <div class="six col">
      <label class="tx-blue">Password</label>
      <input type="password" class="w-100">
    </div>
    <div class="six col">
      <label class="tx-blue">Option</label>
      <select class="w-100">
        <option disabled selected value></option>
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
        <option value="Option 3">Option 3</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="twelve col">
      <label class="tx-blue">Message</label>
      <textarea class="w-100"></textarea>
    </div>
  </div>
  <div class="row">
    <div class="twelve col d-flex d-vert-center d-between">
      <div>
      <button class="btn-blue">Submit</button>
      </div>
      <div>
      <input type="checkbox">
      <span class="label-body">Special option</span>
      </div>
    </div>
  </div>
</form>

Output:

Special option




  NavsBack to top  

Let users navigate easier with navs.
Use the <nav> element.
Use .nav-left for left items.
Use .nav-right for right items.
Use .nav-tx-light for light text.
Use .nav-tx-dark for dark text.
Use .bg-color to change backgrounds.
Use .nav-item for each nav item.
Use .nav-brand for your brand.
Use .active to mark an active item.

Code:

<nav class=" nav-tx-light bg-red">
  <div class="nav-left">
    <a class="nav-item nav-brand" href="">Brand</a>
    <a class="nav-item active" href="">Active</a>
    <a class="nav-item" href="">Item</a>
    <a class="nav-item" href="">Item</a>
  </div>
  <div class="nav-right">
    <a class="nav-item" href="">.nav-right</a>
  </div>
</nav>







  MoreBack to top  

Here are some things that don't fit in anywhere else.

  Container

Wrap your content in .container. The container is max-width 820px with 15px padding on both the left and the right side. This whole page is wrapped in a .container div.



  Width

Specify your div's width with a .w-percent class.
The widths are: .w-100, .w-90, .w-75, .w-50, and .w-25

Output
.w-100
.w-90
.w-75
.w-50
.w-25



  Flex

Use Flexbox to position your divs.
Use .d-flex to initialize
Use .d-vert-center to center vertically
Use .d-hor-center to center horizontally
Use .d-between to justify content between

Output

.d-flex .d-vert-center
child

.d-flex .d-hor-center
child

.d-flex .d-between
child
child





  ExamplesBack to top  

Ready to see Petite.css in action?
Below you will find a list of websites built using Petite.css. Browse them, download them, learn from them.


Petitecss.com

Yes, this website was built using Petite.css. With about 30 extra lines of custom css, the site you are looking at right now is 100% Petite!



App Landing Page

Launching a new phone app thing?? Need a slick way to show it off??



Blog

Need a simple and clean blog layout?