Pure Extras

Install using NPM

    npm install pure-extras
        

You can fork it from Github too.

Fork from Github

Originally written by Images

Styling of three different types are available for images, eliptical, rounded, bordered. To use them, just add one of these classes to the <img> tag

When using class pure-img-eliptical, if the width and height of the image are equal, it will appear as a circle. Otherwise, it will appear as an ellipse.

Thumbnails

Add the class pure-thumbnails to the container <ul>, Then add one of the classes, pure-thumb-eliptical, pure-thumb-rounded, or pure-thumb-bordered, to the <a> .

• 
• 
• 
• 

  Rocket – game concept

  This is a great shot from Jozef Mak from Dribbble.

Adding a <div class="caption"> allows you to customize the thumbnail with additional content.

if you have YUI grids on the page, add pure-u-* for multi-column thumbnails that scale to fit the columns.

• 
• 
• 
• 

  Thumbnail label

  Curabitur et sapien ac diam pharetra lacinia quis ac tortor. Suspendisse dictum fermentum dui at mollis. Nunc pulvinar blandit diam in vehicula.

Badges

To create a badge, use a <span> tag, and add one of the badge classes as shown below.

A badge Success badge 4 Badges can have a bunch of content 8 or not much at all.

Alerts

Create alerts by adding a class to it's <div>.

Default Alert

The default alert can be set by adding the pure-alert class name.

Error Alert

Alerts in red have the connotation of something going wrong. The error alert can be set by appending the pure-alert-error class name in addition to the pure-alert class name.

Warning Alert

If you want to send a warning notification, use the warning alert. It can be set by appending the pure-alert-warning class name in addition to the pure-alert class name.

Success Alert

Mission successful? Use the Success Alert! It can be set by appending the pure-alert-succes class name in addition to the pure-alert class name.

Contextual Modals

Contextual Modals with Grids

You can use grids within these contextual menus for interesting effects.

Buttons

pure-button provides the basic button styles, but CSSExtras adds more styling on top of that, as seen below.

Button Types

A regular button Selected

Secondary Error Success Warning

Block

Button Sizes

Large buttons have twice the padding of regular buttons. Apply the pure-button-large class name.

Big click target Big Success

Small buttons have half the padding of regular buttons. Apply the pure-button-small class name.

Smaller target Smaller Secondary Button Smaller Warning Button Smaller Error Button