Petit CSS

A minimalist and lightweight CSS boilerplate.

What is Petit CSS ?

Petit CSS is a lightweight css framework made for small projects. It can also be a good base for your custom style. It contains less 500 lines of css, but it is quiet complete as it comes with a flexbox grid, a navigation menu and styles for standard elements. You can build a simple website without using a larger framework. For example, this website includes Petit CSS and only 7 lines of custom CSS.

You can fork the project on Github. Some components are based on Skeleton and the navigation menu is based on a pen made by Mutedblues. Petit CSS also uses Normalize as a reset. Do not hesitate to star or like this stuff.

Installation

You can download Petit.css here. You can also add it to your projects with Npm or Yarn :


  # npm
  npm install petit-css

  # yarn
  yarn add petit-css

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

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

column-12

column-11

column-10

column-2

column-9

column-3

column-8

column-4

column-7

column-5

column-6

justify-start

column-3

justify-end

column-3

justify-between

column-3

justify-around

column-3

justify-center

column-3


<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-start">
  <div class="column-3">justify-start</div>
  <div class="column-3">column-3</div>
</div>

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

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

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

<div class="row justify-center">
  <div class="column-3">justify-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

Secondary link


<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

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.

Rank	Team	Points
#1	France	5
#2	Germany	4
#3	Portugal	4
#4	Hungary	2

Rank	Team	Points
#1	France	5
#2	Germany	4
#3	Portugal	4
#4	Hungary	2


<table>
  <thead>
    <tr>
      <th>Rank</th>
      <th>Team</th>
      <th>Points</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>#1</td>
      <td>France</td>
      <td>5</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>