PlainCSS

A minimalist CSS framework

Get started

Is PlainCSS for you?

PlainCSS is a lightweight, responsive and modern CSS framework for faster and extensible development.

PlainCSS provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.

Getting Started

There are a few different ways you can include PlainCSS within your project. You can simply download the source file below or use NPM. PlainCSS is also available from CDN.

Download PlainCSS
Install with NPM
            npm install plain-css
Install from CDN
            <link rel="stylesheet" href="https://unpkg.com/plain-css@latest/dist/plain.min.css">

Components

Grid

PlainCSS are using a standard 12 column fluid responsive grid system. The grid helps you layout your page in an ordered, easy fashion. You can also just specify columns and let the flex model determine what would work best.

.pl-col

.pl-col

.pl-col

.pl-col

.pl-col

.pl-col-6

.pl-col-6

.pl-col-4

.pl-col-3

.pl-col-3

.pl-col-2

.pl-col-2

.pl-col-7

                <div class="pl-container">
    <div class="pl-row">
        <div class="pl-col"></div>
    </div>
    <div class="pl-row">
        <div class="pl-col"></div>
        <div class="pl-col"></div>
        <div class="pl-col"></div>
        <div class="pl-col"></div>
    </div>
    <div class="pl-row">
        <div class="pl-col-6"></div>
        <div class="pl-col-6"></div>
    </div>
    <div class="pl-row">
        <div class="pl-col-4"></div>
        <div class="pl-col-3"></div>
        <div class="pl-col-3"></div>
        <div class="pl-col-2"></div>
    </div>
    <div class="pl-row justify-content-between">
        <div class="pl-col-2"></div>
        <div class="pl-col-7"></div>
    </div>
</div>

Typography

Typography sets default styles for headings, paragraphs, semantic text, etc.

PlainCSS uses Roboto (provided by Google Fonts) as it's default font with a base font size of 16px.

Heading 1

Heading 2

Heading 3

Heading 4

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

Buttons

Here you have some customs buttons. You can use different colors, sizes, and styles by adding simple classes.

Add the pl-button class to <a>, <input> or <button> elements for a default button.

Regular Buttons:
                <button class="pl-button full">Green (Default)</button>
<button class="pl-button full blue">Blue</button>
<button class="pl-button full yellow">Yellow</button>
<button class="pl-button full red">Red</button>
<button class="pl-button full orange">Orange</button>
<button class="pl-button full purple">Purple</button>
<button class="pl-button full gray">Gray</button>
<button class="pl-button full black">Black</button>
Outline Buttons:
                <button class="pl-button">Green (Default)</button>
<button class="pl-button blue">Blue</button>
<button class="pl-button yellow">Yellow</button>
<button class="pl-button red">Red</button>
<button class="pl-button orange">Orange</button>
<button class="pl-button purple">Purple</button>
<button class="pl-button gray">Gray</button>
<button class="pl-button black">Black</button>
Button sizes:
                <button class="pl-button full large">Large</button>
<button class="pl-button full">Default</button>
<button class="pl-button full small">Small</button>
<button class="pl-button small">Small</button>
<button class="pl-button">Default</button>
<button class="pl-button large">Large</button>
Other Buttons:
                <button class="pl-button full disabled">Disabled</button>
<button class="pl-button disabled">Disabled</button>
<button class="pl-button link">Link</button>
<button class="pl-button small loading">Loading</button>
<button class="pl-button full loading">Loading</button>
<button class="pl-button large loading">Loading</button>
<button class="pl-button full expanded">Expanded</button>

Forms

Forms provide the most common control styles used in forms, including input, textarea and select. 

                <form>
    <div class="pl-row">
        <div class="pl-col-md-6">
            <label>First Name</label>
            <input type="text" placeholder="First Name">
        </div>
        <div class="pl-col-md-6">
            <label>Last Name</label>
            <input type="text" placeholder="Last Name">
        </div>
    </div>
    <div class="pl-row">
         <div class="pl-col">
            <label>Your email</label>
            <input type="email" placeholder="example@example.com">
        </div>
    </div>
    <div class="pl-row">
         <div class="pl-col">
            <label>Message</label>
            <textarea placeholder="Enter some text..."></textarea>
            <button type="sumbit" class="pl-button full">Send</button>
            <button type="reset" class="pl-button full red">Clear</button>
        </div>
    </div>
</form>

Utilities

You can apply these helper classes to almost any element, in order to alter its style.