Pure CSS

Pure CSS is a great set of small, responsive CSS modules. As their docs say, it is tiny. The entire set of modules is only 3.8KB* (minified and gzipped).

Pure CSS is responsive out of the box.

Pure CSS has minimal styles. It encourages you to write your application styles on top of it. Pure does not look like this page out of the box. The styles for this page were blatantly and lovingly copied from Pure CSS' home page. Pure is designed to get out of your way. It is easy to override styles. You can use it alongside Bootstrap, if you want (as you can with pure-components).

For details on Pure, see their website (Pure CSS)

Pure CSS Components

Pure CSS doesn't have many components, so I wrote some. And some of the components they have are missing some useful functionality (unless you add in some JS). Please note, this is still a work in progress. The usual cautions apply.

Like Pure CSS, Pure.CSS Components is very small. It is only 2KB* (minified and zipped). Each component is also available as a module. So, if you only need modals, and nothing else, you don't have to include the entire package.

Finally, please note that Pure.CSS Components makes liberal use of flexbox. Therefore, it is only supported on more modern browsers (IE11*, FF 50, Chrome 49, Safari 10, Opera 43).

*IE11, which has a known buggy implementation of flexbox, has been quickly tested. My quick tests indicated that you shouldn't have any problems using Pure.CSS Components on IE11; however, caveat emptor.

Installation

Pure-components offers the following builds:

Bundled: This build has Pure CSS bundled with Pure-components
Stand Alone: Just Pure-components
Individual modules: Each component stands alone, and can be used in isolation. Use individual modules, and use only what you need.

You can install Pure-components from npm, download it, or get it from a CDN.

<link rel="stylesheet"
         href="https://unpkg.com/purecss-components@0.0.12/dist/pure-components.css"
         integrity="sha384-3vxDvOU9lXU+bcgTkQNhnflfhRt/EFEGLtd3jQn8vQRGGQlpBX9VOq4oIufzLOO9"
         crossorigin="anonymous">

You can browse the CDN for full details on CDN-available modules:

https://unpkg.com/purecss-components@0.0.10/dist/

npm install:

yarn add purecss-components

or

npm i purecss-components

Accordion

Option 0

Heading 1
Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero, viverra vel vestibulum in,
Option 1

Heading 1
Content goes here
Option 2

Heading 2
Lorem Ipsum

<ul class="pcssc-accordion">
    <li class="accordion-section">
        <input type="radio" class="accordion-section-selector pcssc-invisible" id="a-1" name="a-tab-head" role="tab"
               checked/>
        <label for="a-1" class="accordion-section-header">Option 0</label>
        <div class="accordion-section-content">
            <h2>Heading 1</h2>
            Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero,
            viverra
            vel vestibulum in,
        </div>
    </li>
    <li class="accordion-section">
        <input type="radio" class="accordion-section-selector pcssc-invisible" id="a-2" name="a-tab-head" role="tab"/>
        <label for="a-2" class="accordion-section-header">Option 1</label>
        <div class="accordion-section-content">
            <h2>Heading 1</h2>
            Content goes here
        </div>
    </li>
    <li class="accordion-section">
        <input type="radio" class="accordion-section-selector pcssc-invisible" id="a-3" name="a-tab-head" role="tab"/>
        <label for="a-3" class="accordion-section-header">Option 2</label>
        <div class="accordion-section-content">
            <h2>Heading 2</h2>
            Lorem Ipsum
        </div>
    </li>
</ul>

Alert

NOTE: A few styles have been applied here for illustrative purposes. The actual styling of an alert is, in keeping with the spirit of Pure, up to you.

Uh oh... Something happened... ×

<div class="pcssc-alert">
    <input type="checkbox" id="close-alert" class="alert-toggle pcssc-invisible"/>
    <div class="alert alert-success alert-dismissible" role="alert">
        <span><strong>Uh oh...</strong> Something happened...</span>
        <label for="close-alert" class="close-alert" aria-label="Close">
            <span aria-invisible="true">&times;</span>
        </label>
    </div>
</div>

Carousel

Linear Carousel

<ul class="pcssc-carousel">
    <li class="carousel-item">
        <input class="carousel-nav pcssc-invisible" type="radio" name="carousel" id="carousel-one" checked/>
        <label for="carousel-one" class="carousel-label linear-carousel-label"></label>
        <img class="carousel-content"
             src="http://www.preussenchronik.de/bilder/1186_Klemens_Wenzel_Fuerst_von_Metternich.jpeg"
             alt=""/>
        <label for="carousel-two" class="carousel-label"></label>
    </li>
    <li class="carousel-item">
        <input class="carousel-nav pcssc-invisible" type="radio" name="carousel" id="carousel-two"/>
        <label for="carousel-one" class="carousel-label linear-carousel-label"></label>
        <img class="carousel-content"
             src="https://s-media-cache-ak0.pinimg.com/originals/fc/d7/b6/fcd7b6242ad041739357da9a237058ef.jpg"
             alt=""/>
        <label for="carousel-three" class="carousel-label"></label>
    </li>
    <li class="carousel-item">
        <input class="carousel-nav pcssc-invisible" type="radio" name="carousel" id="carousel-three"/>
        <label for="carousel-two" class="carousel-label linear-carousel-label"></label>
        <img class="carousel-content"
             src="http://adamworld.typepad.com/.a/6a012876b7eaf6970c0120a7bd78bf970b-pi" alt=""/>
        <label class="carousel-label carousel-last-nav"></label>
    </li>
</ul>

Circular Carousel

<ul class="pcssc-carousel">
    <li class="carousel-item">
        <input class="carousel-nav pcssc-invisible" type="radio" name="c-carousel" id="c-carousel-one"
               checked/>
        <label for="c-carousel-three" class="carousel-label"></label>
        <img class="carousel-content"
             src="http://www.preussenchronik.de/bilder/1186_Klemens_Wenzel_Fuerst_von_Metternich.jpeg"
             alt=""/>
        <label for="c-carousel-two" class="carousel-label"></label>
    </li>
    <li class="carousel-item">
        <input class="carousel-nav pcssc-invisible" type="radio" name="c-carousel" id="c-carousel-two"/>
        <label for="c-carousel-one" class="carousel-label"></label>
        <img class="carousel-content"
             src="https://s-media-cache-ak0.pinimg.com/originals/fc/d7/b6/fcd7b6242ad041739357da9a237058ef.jpg"
             alt=""/>
        <label for="c-carousel-three" class="carousel-label"></label>
    </li>
    <li class="carousel-item">
        <input class="carousel-nav pcssc-invisible" type="radio" name="c-carousel" id="c-carousel-three"/>
        <label for="c-carousel-two" class="carousel-label"></label>
        <img class="carousel-content"
             src="http://adamworld.typepad.com/.a/6a012876b7eaf6970c0120a7bd78bf970b-pi" alt=""/>
        <label for="c-carousel-one" class="carousel-label"></label>
    </li>
</ul>

Collapse

NOTE: A few styles have been applied to the collapse content for illustrative purposes. The actual styling of a collapse is, in keeping with the spirit of Pure, up to you.

Basic Collapse

Toggle

Pooka pooka!

<div class="pcssc-collapse">
    <label for="collapse-toggle" class="collapse-button pure-button" aria-label="Toggle">
        <span>Toggle</span>
    </label>
    <input type="checkbox" id="collapse-toggle" class="collapse-toggle pcssc-invisible"/>
    <div class="collapse-content pcssc-invisible">
        Pooka pooka!
    </div>
</div>

Toggling Button Label Collapse

Open Close

Pooka pooka!

<div class="pcssc-collapse collapse-toggle-button">
    <input type="checkbox" id="collapse-toggle-button" class="collapse-toggle pcssc-invisible"/>
    <label for="collapse-toggle-button" class="collapse-button pure-button" aria-label="Toggle">
        <span class="collapse-button-label">Open</span>
        <span class="collapse-button-label pcssc-invisible">Close</span>
    </label>
    <div class="collapse-content pcssc-invisible">
        Pooka pooka!
    </div>
</div>

Dropdown

<div class="pcssc-dropdown">
    <div tabindex="0" class="dropdown-toggle focus-toggle pure-button">Dropdown Button</div>
    <label for="menu-toggle" class="pure-button click-toggle" aria-label="Toggle">Dropdown
        Buton</label>
    <input type="checkbox" id="menu-toggle" class="dropdown-toggle pcssc-invisible"/>
    <ul class="dropdown-content">
        <li class="dropdown-menu-item">
            <button class="dropdown-action-item">Edit</button>
        </li>
        <li class="dropdown-menu-item">
            <button class="dropdown-action-item">Delete</button>
        </li>
    </ul>
</div>

Collapsing Menu

The menu on the left side of this page is an example of a left-side collapsing menu. The collapsing menu builds off of the dropdown component, and Pure CSS' vertical menu. As a stand-alone module, the collapsing menu requires both dropdown.css and menu.css.

<div class="pcssc-collapsing-menu pcssc-menu-left">
    <a class="pure-menu-heading" href="#top">Pure
        <div class="small-caps">components</div>
    </a>
    <div class="pcssc-dropdown">
        <div tabindex="0" class="dropdown-toggle focus-toggle menu-link">
            <span></span>
        </div>
        <label for="main-menu-toggle" class="menu-link click-toggle" aria-label="Toggle">
            <span></span>
        </label>
        <input type="checkbox" id="main-menu-toggle" class="dropdown-toggle pcssc-invisible"/>
        <ul class="dropdown-content pure-menu-list pure-menu">
            <li class="pure-menu-item">
                <a href="#installation" class="pure-menu-link">Installation</a>
            </li>
            <li class="pure-menu-item menu-item-divided">
                <a href="#accordion" class="pure-menu-link">Accordion</a>
            </li>
            <li class="pure-menu-item">
                <a href="#alert" class="pure-menu-link">Alert</a>
            </li>
        </ul>
    </div>
</div>

Modal

<div class="pcssc-modal">
    <input type="radio" class="open-modal pcssc-invisible" id="test-modal" name="modal-toggle"/>
    <label for="test-modal" class="pure-button">Open Modal</label>
    <div class="modal-container pcssc-invisible">
        <div class="modal-frame">
            <div class="modal-header">
                Header
                <input type="radio" id="close-modal" name="modal-toggle"
                       class="close-modal pcssc-invisible"/>
                <label for="close-modal" class="close-button">x</label>
            </div>
            <div class="modal-body">
                Body
            </div>
        </div>
    </div>
</div>

Popover

Toggleable

<div class="pcssc-popover">
    <label class="pure-button popover-toggle-label" for="popover-one">Bottom Popover</label>
    <input class="popover-toggle pcssc-invisible" type="checkbox" name="popover-toggle" id="popover-one"/>
    <div class="popover popover-bottom">
        <div class="arrow up-arrow"></div>
        <h3 class="popover-title">Popover bottom</h3>
        <div class="popover-content">
            <p>The quick brown fox jumped over the lazy dog.</p>
        </div>
    </div>
</div>

Dismissable

<div class="pcssc-popover">
    <div tabindex="0" class="pure-button popover-toggle popover-toggle-dismissable popover-dismissable-right">
        Dismissable Right Popover
    </div>
    <div class="popover popover-right">
        <div class="arrow left-arrow"></div>
        <h3 class="popover-title">Popover Right</h3>
        <div class="popover-content">
            <p>The quick brown fox jumped over the lazy dog.</p>
        </div>
    </div>
</div>

Tabs

Tabs are implemented as an accordion. When rendering in a small viewport, tabs will always render as an Accordion.

Pure.CSS Components currently offers three styles of tabs:

Top tabs
Side tabs
- Left-side tabs
- Right-side tabs

Top tabs

Option 0

Heading 1
Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero, viverra vel vestibulum in,
Option 1

Heading 2
Content goes here
Option 2

Heading 3
Lorem Ipsum

<ul class="pcssc-accordion accordion-tab">
    <li class="accordion-section">
        <input type="radio" class="accordion-section-selector pcssc-invisible" id="zero" name="tab-head" role="tab"
               checked/>
        <label for="zero" class="accordion-section-header">Option 0</label>
        <div class="accordion-section-content">
            <h2>Heading 1</h2>
            Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero,
            viverra
            vel vestibulum in,
        </div>
    </li>
    <li class="accordion-section">
        <input type="radio" class="accordion-section-selector pcssc-invisible" id="one" name="tab-head" role="tab"/>
        <label for="one" class="accordion-section-header">Option 1</label>
        <div class="accordion-section-content">
            <h2>Heading 2</h2>
            Content goes here
        </div>
    </li>
    <li class="accordion-section">
        <input type="radio" class="accordion-section-selector pcssc-invisible" id="two" name="tab-head" role="tab"/>
        <label for="two" class="accordion-section-header">Option 2</label>
        <div class="accordion-section-content">
            <h2>Heading 3</h2>
            Lorem Ipsum
        </div>
    </li>
</ul>

Side tabs

Note: Side tab content is positioned absolutely. You will (currently) need to set the distance of the tab content from the tabs. For example, for a left-side tab:

left: 15%;

As with other tabs, side tabs collapse to an accordion on smaller devices.

Left side tabs

Option 0

Heading 1
Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero, viverra vel vestibulum in,
Option 1

Heading 2
Content goes here
Option 2

Heading 3
Lorem Ipsum

To make tab headings left sided, simply add the left-accordion-side class to the tab set:

<ul class="pcssc-accordion accordion-tab left-accordion-side">
    <!-- Tab Content Here -->
</ul>

Right side tabs

Option 0

Heading 1
Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero, viverra vel vestibulum in,
Option 1

Heading 2
Content goes here
Option 2

Heading 3
Lorem Ipsum

To make tab headings right sided, simply add the right-accordion-side class to the tab set:

<ul class="pcssc-accordion accordion-tab right-accordion-side">
    <!-- Tab Content Here -->
</ul>

Tooltip

<div class="pcssc-tooltip">
    <span class="tooltip-target">Hover Me.</span>
    <div class="tooltip-body">
        <p>All around the mulberry bush, the Plunky chased the Sneezle</p>
    </div>
</div>

JS Utils

None of the Pure.Components components require any JavaScript in order to function. There may be times, however, when it can be useful to have JavaScript to manipulate a component. Therefore, I've created individual JS modules to complement the CSS only components. Don't need JS? Don't bother. Need a little JS? Use just what you need. Each JS module is incredibly small.

The following JS modules are currently available:

Pure Components

CSS Only Components for Pure CSS.

Pure CSS

Pure CSS Components

Installation

Accordion

Heading 1

Heading 1

Heading 2

Alert

Carousel

Linear Carousel

Circular Carousel

Collapse

Basic Collapse

Toggling Button Label Collapse

Dropdown

Collapsing Menu

Popover

Toggleable

Popover bottom

Dismissable

Popover Right

Tabs

Top tabs

Heading 1

Heading 2

Heading 3

Side tabs

Left side tabs

Heading 1

Heading 2

Heading 3

Right side tabs

Heading 1

Heading 2

Heading 3

Tooltip

JS Utils