Pix.css A collection of simple boilerplate scss and html that is easy to modify and extend.

Docs

How it's organized

scss/
├── essentials/
│   ├── variables.scss
│   └── tools.scss
├── generic/
│   ├── base.scss
│   ├── images.scss
│   └── typography.scss
├── components/
│   ├── accordion.scss
│   ├── buttons.scss
│   ├── dropdown.scss
│   ├── form.scss
│   ├── grid.scss
│   ├── loading.scss
│   ├── modal.scss
│   ├── table.scss
│   ├── tabs.scss
│   └── tooltips.scss
└── utilities/
    ├── constructors.scss
    └── decorators.scss

Essentials

Variables

Use to store commonly used values. Its good practice, and makes the project easily maintainable. Some ideas for variables:

screen-size,
color,
background.

/* Screen sizes */
$screen-xs: 450px;
$screen-s : 800px;
$screen-m : 1200px;

@media screen and (max-width: $screen-xs) { … }
@media screen and (max-width: $screen-s) { … }
@media screen and (max-width: $screen-m) { … }

Tools

Fluid mixin

Fluid

<span class="fluid-example">Fluid example</span>

.fluid-example {
  @include fluid(50px, 20px, font-size);
}

Darken & lighten

button {
  background: dodgerblue;
}
button:hover, button:focus {
  background: darken(dodgerblue, 15%);
}

Generic

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

A quick brown fox jumps over the lazy dog.

Unordered
List
Example

Ordered
List
Example

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>A quick brown fox jumps over the lazy dog.</p>
<ul>
    <li>Unordered</li>
    <li>List</li>
    <li>Example</li>
</ul>
<hr>
<ol>
    <li>Ordered</li>
    <li>List</li>
    <li>Example</li>
</ol>

Components

Buttons

<button class="btn-primary">Primary</button>
<button class="btn-secondary">Secondary</button>
<button class="btn-ghost">Ghost</button>
<button class="btn-contain"><svg>…<svg></button>
<button class="btn-primary" disabled>Disabled</button>

<button class="btn-primary loading">Primary</button>
<button class="btn-primary error">Primary</button>

Grid

col-6

<div class="grid">
    <div class="col-6">col-6</div>
    <div class="col-6">col-6</div>
</div>

col-6

<div class="grid full nogutter">
    <div class="col-6">col-6</div>
    <div class="col-6">col-6</div>
    <div class="col-6">col-6</div>
    <div class="col-6">col-6</div>
</div>

col-6

<div class="grid">
    <div class="col-6">col-6</div>
    <div class="col-6">col-6</div>
    <div class="col-6">col-6</div>
</div>

col-3 col-m-6 col-s-12

<div class="grid">
    <div class="col-3 col-m-6 col-s-12">col-3 col-m-6 col-s-12</div>
    <div class="col-3 col-m-6 col-s-12">col-3 col-m-6 col-s-12</div>
    <div class="col-3 col-m-6 col-s-12">col-3 col-m-6 col-s-12</div>
    <div class="col-3 col-m-6 col-s-12">col-3 col-m-6 col-s-12</div>
</div>

Loading

<svg class="loading-spinner"><circle cx="20" cy="20" r="18"></circle></svg>
<div class="loading-bar"></div>

Form

Value for <label class=""> can be one of the following:

block,
inline,
centered,
space-between.

Value for <fieldset class=""> can be one of the following:

block,
inline,
split-evenly.

Personal

Name

Date of birth

What colors do you like?

Red

Green

Blue

What is your favorite animal?

Lion Tiger Bear Cat Dog

Account

Email Password

Contact

Address City State Phone

Other

Notifications

Notifications will notify you about important events. You can change this.

Message

<form action="">

    <div class="form-group-title">Personal</div>

    <label for="name" class="field">
        <span>Name</span>
        <input type="text" id="name" name="" placeholder="John Doe">
    </label>

    <fieldset>
        <legend>Date of birth</legend>
        <div class="fields">
            <label for="day" class="field select">
                <select id="day" name="">
                    <option value="">Day</option>
                    <option value="">Lorem</option>
                    <option value="">Ipsum</option>
                </select>
            </label>
            <label for="month" class="field select">
                <select id="month" name="">
                    <option value="">Month</option>
                    <option value="">Lorem</option>
                    <option value="">Ipsum</option>
                </select>
            </label>
            <label for="year" class="field select">
                <select id="year" name="">
                    <option value="">Year</option>
                    <option value="">Lorem</option>
                    <option value="">Ipsum</option>
                </select>
            </label>
        </div>
    </fieldset>

    <fieldset>
        <legend>What colors do you like?</legend>
        <label for="red" class="checkbox">
            <input type="checkbox" id="red" name="">
            <div class="control"></div>
            <span>Red</span>
        </label>
        <label for="green" class="checkbox">
            <input type="checkbox" id="green" name="">
            <div class="control"></div>
            <span>Green</span>
        </label>
        <label for="blue" class="checkbox">
            <input type="checkbox" id="blue" name="">
            <div class="control"></div>
            <span>Blue</span>
        </label>
    </fieldset>

    <fieldset>
        <legend>What is your favorite animal?</legend>
        <div class="selector">
            <label for="radio1" class="radio-select">
                <input type="radio" id="radio1" name="radio">
                <span class="control">Lion</span>
            </label>
            <label for="radio2" class="radio-select">
                <input type="radio" id="radio2" name="radio">
                <span class="control">Tiger</span>
            </label>
            <label for="radio3" class="radio-select">
                <input type="radio" id="radio3" name="radio">
                <span class="control">Bear</span>
            </label>
            <label for="radio4" class="radio-select">
                <input type="radio" id="radio4" name="radio">
                <span class="control">Cat</span>
            </label>
            <label for="radio5" class="radio-select">
                <input type="radio" id="radio5" name="radio">
                <span class="control">Dog</span>
            </label>
        </div>
    </fieldset>

    <div class="form-group-title">Account</div>

    <label for="email" class="field">
        <span>Email</span>
        <input type="email" id="email" name="" placeholder="john@johndoe.com">
    </label>

    <label for="password" class="field">
        <span>Password</span>
        <input type="password" id="password" name="">
    </label>

    <div class="form-group-title">Contact</div>

    <label for="address" class="field">
        <span>Address</span>
        <input type="text" id="address" name="" placeholder="420 Lorem St.">
    </label>

    <label for="city" class="field">
        <span>City</span>
        <input type="text" id="city" name="" placeholder="Ipsum">
    </label>

    <label for="state" class="field select">
        <span>State</span>
        <select id="state" name="">
            <option value="">-Select your state-</option>
            <option value="">Lorem</option>
            <option value="">Ipsum</option>
        </select>
    </label>

    <label for="Phone" class="field">
        <span>Phone</span>
        <input type="tel" id="Phone" name="" placeholder="123-456-7890">
    </label>

    <div class="form-group-title">Other</div>

    <label for="toggle" class="toggle">
        <div class="toggle-text">
            <div>Notifications</div>
            <div style="opacity: .5;">Notifications will notify you about important events. You can change this.</div>
        </div>
        <input type="checkbox" id="toggle" name="">
        <div class="control"></div>
    </label>

    <label for="message" class="field">
        <span>Message</span>
        <textarea id="message" name="" rows="6" placeholder="Heyyy"></textarea>
    </label>

</form>

Accordion

Accordion content

<div class="accordion">
    <span class="accordion-summary">Accordion</span>
    <span>Accordion content</span>
</div>

<button data-open-modal="modalID">Open modal</button>
<div id="modalID" class="modal" role="dialog">
    <div class="modal-content">
        <div class="modal-header">Header</div>
        <div class="modal-body">…</div>
        <div class="modal-footer"><button data-close-modal>Close</button></div>
    </div>
</div>

Tabs

Tab 1

Tab 2

Tab 3

<div class="tabs">
    <nav>
        <a href="#tab1">Tab 1</a>
        <a href="#tab2">Tab 2</a>
        <a href="#tab3">Tab 3</a>
    </nav>
    <div class="tab-content" id="tab1">Tab 1</div>
    <div class="tab-content" id="tab2">Tab 2</div>
    <div class="tab-content" id="tab3">Tab 3</div>
</div>

Table

Index	Name	Email	Status
1	Abraham Alpha	abe@email.com	Online
2	Benjamin Beta	ben@email.com	Offline
3	George Gamma	george@email.com	Offline
4	Daniel Delta	danny@email.com	Online

<table>
    <thead>
    <tr>
        <th>Index</th>
        <th>Name</th>
        <th>Email</th>
        <th>Status</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td data-label="Index">1</td>
        <td data-label="Name">Abraham Alpha</td>
        <td data-label="Email">abe@email.com</td>
        <td data-label="Status">Online</td>
    </tr>
    <tr>
        <td data-label="Index">2</td>
        <td data-label="Name">Benjamin Beta</td>
        <td data-label="Email">ben@email.com</td>
        <td data-label="Status">Offline</td>
    </tr>
    <tr>
        <td data-label="Index">3</td>
        <td data-label="Name">George Gamma</td>
        <td data-label="Email">george@email.com</td>
        <td data-label="Status">Offline</td>
    </tr>
    <tr>
        <td data-label="Index">4</td>
        <td data-label="Name">Daniel Delta</td>
        <td data-label="Email">danny@email.com</td>
        <td data-label="Status">Online</td>
    </tr>
    </tbody>
</table>

<div class="dropdown">
    <p>Dropdown (default)</p>
    <div class="dropdown-content">
        <a class="dropdown-item">Link 1</a>
        <a class="dropdown-item">Link 2</a>
        <a class="dropdown-item">Link 3</a>
    </div>
</div>
<div class="dropdown">
    <p>Dropdown from top right</p>
    <div class="dropdown-content from-top-right">
        <a class="dropdown-item">Link 1</a>
        <a class="dropdown-item">Link 2</a>
        <a class="dropdown-item">Link 3</a>
    </div>
</div>
<div class="dropdown">
    <p>Dropdown from bottom right</p>
    <div class="dropdown-content from-bottom-right">
        <a class="dropdown-item">Link 1</a>
        <a class="dropdown-item">Link 2</a>
        <a class="dropdown-item">Link 3</a>
    </div>
</div>
<div class="dropdown">
    <p>Dropdown from bottom left</p>
    <div class="dropdown-content from-bottom-left">
        <a class="dropdown-item">Link 1</a>
        <a class="dropdown-item">Link 2</a>
        <a class="dropdown-item">Link 3</a>
    </div>
</div>

Tooltips

Hover me!
Hover me!
Hover me!
Hover me!

<span data-tooltip-top="Tooltip on top">Hover me!</span>
<span data-tooltip-right="Right">Hover me!</span>
<span data-tooltip-left="Left">Hover me!</span>
<span data-tooltip-bottom="Down under">Hover me!</span>

Utilities

Link

<a href="" class="link">Link</a>

Card

<div class="card">Card</div>

Align

Left

Center

Right

<p class="ta-left">Left</p>
<p class="ta-center">Center</p>
<p class="ta-right">Right</p>

Hide & show

Hide on extra-small screen
Hide on small screen
Hide on medium screen
Show on extra-small screen
Show on small screen
Show on medium screen

<span class="hide-xs">Hide on extra-small screen</span>
<span class="hide-s">Hide on small screen</span>
<span class="hide-m">Hide on medium screen</span>
<span class="show-xs">Show on extra-small screen</span>
<span class="show-s">Show on small screen</span>
<span class="show-m">Show on medium screen</span>

Flex

A simple flexbox utility. Just add class="flex" and complementary classes.

Flex direction

fd-row
fd-col
fd-row-rev
fd-col-rev

Align items

ai-center
ai-start
ai-end
ai-stretch

Justify content

jc-center
jc-start
jc-end
jc-around
jc-between
jc-evenly

First span Second span Third span

<div class="flex fd-col ai-center">
    <span>First span</span>
    <span>Second span</span>
    <span>Third span</span>
</div>

First span Second span Third span

<div class="flex jc-between">
    <span>First span</span>
    <span>Second span</span>
    <span>Third span</span>
</div>

Margin & padding

Syntax (example being class="p-a-m"):

p meaning padding, can also be m for margin,
a meaning all sides, can also be x, y, t, r, b, l for horizontal, vertical, top, right, bottom, and left,
m meaning medium, can also be xs, s, l, xl for extra small, small, large, and extra large.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="p-a-m">Lorem ipsum… </div>

<div class="p-x-l p-y-s">Lorem ipsum… </div>

<div class="m-b-l">Lorem ipsum… </div>
<div>Lorem ipsum… </div>

How it's organized

Essentials

Variables

Tools

Fluid mixin

Darken & lighten

Generic

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Components

Buttons

Tags

Grid

Loading

Form

Accordion

Modal

Tabs

Table

Dropdown

Tooltips

Utilities

Link

Card

Align

Hide & show

Flex

Margin & padding