Typography

Text sizes are set using rems. The default text size is 1 rem, this is also the default size for <h6> and <h5> elements. The default font family is sans-serif, it is set by normalize.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

Text

Strong

Underlined

Italic

Highlighted

Link

capitalize

lowercase

uppercase

align justify: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

align left: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

align center: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

align right: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>

<!-- h6 tag has the same size than p tag -->
<h6>Heading 6</h6>

<p>Paragraph</p>
<span>Text</span>
<strong>Strong</strong>
<u>Underlined</u>
<em>Italic</em>
<mark>Highlighted</mark>
<a href="#" class="link">Cool link</a>

<!-- Utility classes -->
<p class="text-capitalize">capitalize</p>
<p class="text-lowercase">lowercase</p>
<p class="text-uppercase">uppercase</p>
<p class="text-justify">align justify</p>
<p class="text-left">align left</p>
<p class="text-center">align center</p>
<p class="text-right">align right</p>
          

Grid

The grid is a 12-columns flex-box grid. The maximum width on desktop is 70% of the page's width, the maximum width on mobile is 100% of the page's width.

<div class="row">
  <div class="column-12">column-12</div>

  <div class="column-11">column-11</div>
  <div class="column-1">1</div>

  <div class="column-10">column-10</div>
  <div class="column-2">column-2</div>

  <div class="column-9">column-9</div>
  <div class="column-3">column-3</div>

  <div class="column-8">column-8</div>
  <div class="column-4">column-4</div>

  <div class="column-7">column-7</div>
  <div class="column-5">column-5</div>

  <div class="column-6">column-6</div>
  <div class="column-6">column-6</div>
</div>

<div class="row justify-content-start">
  <div class="column-3">justify-content-start</div>
  <div class="column-3">column-3</div>
</div>

<div class="row justify-content-end">
  <div class="column-3">justify-content-end</div>
  <div class="column-3">column-3</div>
</div>

<div class="row justify-content-space-between">
  <div class="column-3">justify-content-space-between</div>
  <div class="column-3">column-3</div>
</div>

<div class="row justify-content-space-around">
  <div class="column-3">justify-content-space-around</div>
  <div class="column-3">column-3</div>
</div>

<div class="row justify-content-center">
  <div class="column-3">justify-content-center</div>
  <div class="column-3">column-3</div>
</div>
          

Buttons

Petit.css comes with only 2 buttons types : .button-primary and .button-secondary. Buttons styles can be applied to <a>, <button> and <input type="submit"> elements.

Primary link Primary button

Secondary link Secondary button

<a class="button-primary" href="#">Primary link</a>
<button class="button-primary">Primary button</button>
<input class="button-primary" type="submit" value="Primary submit">

<a class="button-secondary" href="#">Secondary link</a>
<button class="button-secondary">Secondary button</button>
<input class="button-secondary" type="submit" value="Secondary submit">
          

Form

Nothing special here. Form inputs styles are sober and warrant you to get nice forms across all browsers.

Your email

Your password

Repeat password

Disabled input

Country Finland Greece Slovakia

Message

I like dogs I like cats

<form action="">
  <div class="row">
    <div class="column-4">
      <label for="email-input">Your email</label>
      <input type="email" id="email-input">
    </div>

    <div class="column-4">
      <label for="password-input">Your password</label>
      <input type="password" id="password-input">
    </div>

    <div class="column-4">
      <label for="password-repeat-input">Repeat password</label>
      <input type="password" id="password-repeat-input">
    </div>

    <div class="column-12">
      <label for="country-select-list">Country</label>
      <select id="country-select-list">
        <option value="finland">Finland</option>
        <option value="greece">Greece</option>
        <option value="slovakia">Slovakia</option>
      </select>
    </div>

    <div class="column-12">
      <label for="message-input">Message</label>
      <textarea placeholder="Hi dude !" id="message-input"></textarea>
    </div>

    <div class="column-12">
      <fieldset>
        <label for="dog-input">
          <input type="checkbox" id="dog-input">
          I like dogs
        </label>
        <label for="cat-input">
          <input type="checkbox" id="cat-input" disabled>
          I like cats
        </label>
      </fieldset>
    </div>

    <div class="column-12">
      <input class="button-primary" type="submit" value="Submit">
    </div>
  </div>
</form>
          

Tables

Do not forget to use <thead> and <tbody> elements when you want to display a table with Petit.css

Default tables have borders, but you can add the borderless css class to remove borders.

ID	Name	Email
#1	Albert	albert@example.com
#2	Miguel	miguel@example.net
#3	Luigi	luigi@example.org

ID	Name	Email
#1	Albert	albert@example.com
#2	Miguel	miguel@example.net
#3	Luigi	luigi@example.org

<table>
  <thead>
    <tr>
      <th>Rank</th>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>#1</td>
      <td>Albert</td>
      <td>albert@example.com</td>
    </tr>
  </tbody>
</table>
          

Lists

Petit.css list do not follow the default html list styles. It is made to give an alternative list style in comparison to other css boilerplates.

Default lists have borders, but you can add the borderless css class to remove borders.

• Item 1
• Item 2
  • Item 2.1
  • Item 2.2
• Item 3

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

<ul class="list">
  <li>Item 1</li>
  <li>
    Item 2
    <ul class="list">
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

<ul class="list borderless">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
          

Cards

Petit.css cards give you the possibility to display your content in a customizable and flexible container.

Default cards have borders, but you can add the borderless css class to remove borders.

Title

Lorem ipsum dolor sit amet

link

Title

Lorem ipsum dolor sit amet

link

Title

Lorem ipsum dolor sit amet

link

Title

Lorem ipsum dolor sit amet

link

<article class="card">
  <img src="https://via.placeholder.com/150/150" alt="placeholder">
  <h1 class="card-title">
    Title
  </h1>
  <p class="card-text">
    Lorem ipsum dolor sit amet
  </p>
  <div class="card-actions">
    <a class="button button-primary" href="#">link</a>
  </div>
</article>
          

Navigation

Petit.css includes a simple responsive navigation menu. You have a live example on this website.

<div class="navigation">
  <a href="" class="logo">My Website</a>
  <input class="menu-button" type="checkbox" id="menu-button" />
  <label class="menu-icon" for="menu-button">
    <span class="icon"></span>
  </label>
  <ul class="menu">
    <li><a href="#product">Product</a></li>
    <li><a href="#prices">Prices</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</div>