Peoria

A Lightweight CSS library

15kb

Lightweight

30kb un minified

Grid System

12 columns

Using the new css grid. Check support

12
2
4
6
<div class="grid text-c lh-lg">
    <div class="col-12 rounded-sm orange-bg">12</div>
    <div class="col-2 rounded-sm green-bg">2</div>
    <div class="col-4 rounded-sm blue-bg">4</div>
    <div class="col-6 rounded-sm red-bg">6</div>
  </div>

Typography

(Sourced from Google Fonts)

Hammersmith One

Zen Kaku Gothic New

DM Mono

title-1

title-2

title-3

title-4

h1

h2

h3

h4

h5
h6

body (p)

small

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu consequat ac felis donec et odio. Tincidunt vitae semper quis lectus. Neque viverra justo nec ultrices dui sapien eget mi. Adipiscing elit ut aliquam purus sit amet. Risus nec feugiat in fermentum posuere urna nec tincidunt praesent. Amet luctus venenatis lectus magna fringilla urna porttitor. Urna et pharetra pharetra massa massa ultricies. Ornare aenean euismod elementum nisi. Consectetur adipiscing elit duis tristique sollicitudin nibh. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Pharetra vel turpis nunc eget lorem. Ullamcorper velit sed ullamcorper morbi tincidunt ornare. Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Integer eget aliquet nibh praesent tristique magna sit amet purus. Nisi vitae suscipit tellus mauris a. Vestibulum lorem sed risus ultricies tristique nulla aliquet enim tortor. Eu ultrices vitae auctor eu. Suspendisse potenti nullam ac tortor vitae. Mattis molestie a iaculis at erat pellentesque adipiscing commodo.

Want to change fonts? Easy!

open a <style> tag and modify them yourself

:root {
    --title: fonts;
    --default: fonts;
    --mono: fonts;
}

Padding and Margin

Three sizes for padding, margin, height and width options.
Margin and padding have: top, bottom, left, right, vertical and sides variants.

Margin

mr-sm

mr-md

mr-lg

ml-sm

ml-md

ml-lg

mt-sm

mt-md

mt-lg

mb-sm

mb-md

mb-lg

mx-sm

mx-md

mx-lg

my-sm

my-md

my-lg

Padding

pr-sm

pr-md

pr-lg

pl-sm

pl-md

pl-lg

pt-sm

pt-md

pt-lg

pb-sm

pb-md

pb-lg

px-sm

px-md

px-lg

py-sm

py-md

py-lg

Lorem Ipsum

class="lh-lg blue-bg yellow mt-sm pl-md"

Forms

<form class="card col-6 rounded">
    <div class="col-6">
        <label for="name">Name</label>
        <input type="name" id="name">
    </div>
    <div class="col-6">
        <label for="email">Email</label>
        <input type="email" id="email">
    </div>
    <div class="col-12 mb-sm">
        <label for="message">Message</label>
        <textarea id="message" class="col-12 m-n"></textarea>
    </div>
    <input class="col-6" type="submit" value="Send">
</form>

<button class="night-btn">Lorem ipsum</p>

Inputs

Colors

white
mid-white
mid-grey
greyed-out
black
dark-blue
blue
orange
red
yellow
green
pink
purple

All colors have a class for the color and another for the background

RENDERED

Lorem ipsum

HTML

<p class="p-sm rounded-lg text-c green-bg yellow">Lorem ipsum</p>

Get Peoria!

Download

Or use the remote version hosted on github

<link rel="stylesheet" href="https://dpalmer.in/Peoria/css/peoria-0-6-2.min.css">
<script src="https://dpalmer.in/Peoria/peoria-4.js"></script>

No changes are made on older versions, once they are available.