Pear

A boilerplate for static site projects

v3.0.0

View on Github →

Colors

Blue
Turquoise
Green
Yellow
Orange
Red
Pink
Purple
Brown
Gray 1
Gray 2
Gray 3
Gray 4
Gray 5
Gray 6

Typography

I watched the storm.

We had left the ground.

My two natures had memory in common.

It was going to be a lonely trip back.

The face of the moon was in shadow.
She stared through the window at the stars.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, semper suscipit, posuere a, pede.

This is a blockquote. Suspendisse commodo ullamcorper magna.

Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Donec sed tellus eget sapien fringilla nonummy. NBA Morbi imperdiet augue quis tellus. Suspendisse quam sem, AVE consequat at, commodo vitae, feugiat in nunc.

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

  1. Integer vitae libero ac risus egestas placerat.
  2. Praesent placerat risus quis eros.
  3. Ut aliquam sollicitudin leo.
  4. Donec quis dui at dolor tempor interdum.

Code

Phasellus ultrices nulla, gravida non some inline code commodo a sodales sit amet nisi.

<p>Block of code</p>

Embeds

Sample image

Forms

Buttons

Medium Default Medium Outline Small Default

Icons

Grid

Outside the grid
span-6
span-6
span-one-third
span-one-third
span-one-third
This row's siblings are the same height, despite having different content.
span-one-fourth
span-3
span-one-fourth
This cell should be top-aligned.
Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar porta leo, eu ultricies nunc sollicitudin vitae.
This cell should be top-aligned.
This cell should be center-aligned.
Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar porta leo, eu ultricies nunc sollicitudin vitae.
This cell should be center-aligned.
This cell should be bottom-aligned.
Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar porta leo, eu ultricies nunc sollicitudin vitae.
This cell should be bottom-aligned.
Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Top
Center
Bottom
span-12
auto
span-one-third
auto
span-one-third
1/3
1/2
1/2
1/3
offset-4
offset-one-third