Accordions

npm install pui-css-collapse --save

These are frequently used in combination with our panel components. They have a header and body.

Accordions can be used with any background color class, add them to the header and body.

Basic

Use this to expand and collapse content.

Look at this content.

Styles

Accordion with Divider:

This adds a divider between the accordion header and accordion body.

This content should hide and show when the trigger is clicked.

You can combine the accordion with any panel class to have a styled panel that opens and closes.

With Icons

Accordion with plus/minus icon:

This content should hide and show when the trigger is clicked.

Alerts

npm install pui-css-alerts --save

Alerts are used to display flash messages to the user. When using alerts with simple one-line text, wrap the text in a <p> with .em-high.

Success

Alerts are also used to bring important notes to a user's attention. If the content of your alert is a little more complicated, we would recommend using headings coupled with the content.

You should know...

There are some things you should note. Just in case you didn't figure it out already.

  • thing 1
  • thing 2

If you want to include a link in your alert, use the class alert-link.

Important Link

It is very important that you click here

Alert Types

Our 4 alert types are:

Everything is wonderful. Be happy.
Info for you. Tell me more.
Warning: There is no parking on the dancefloor. Be alert.
Something has gone horribly awry. You've made a huge mistake.

Dismissable Alerts

By adding .alert-dismissable and a button, you can also make alerts dismissable.

Click the 'X' over there------>

Alignment

npm install pui-css-alignment --save

The following classes can be used to for horizontal alignment.

.txt-l

.txt-c

.txt-r

On display: inline and display: table-cell elements, the following classes can be used to for vertical alignment.

This long text is used to expand the height of this table so that we can demonstrate our verticle alignment classes to the right. .txt-t .txt-m .txt-b

If you need to vertically align an element that does not fit into those display types, take a look at vertical alignment.

Backgrounds

npm install pui-css-backgrounds --save

Background color classes can be applied to any element. See colors for a list of background classes.

Full Bleed

This example uses an about us hero image by default, but you can change it to any image you would like. Keep in mind, blurry, treated images will look better when stretched to fit a particular content area.

Full bleed background image

To modify this component to use a custom image, use an inline background-image style like so:

Full bleed background image

Overlays

.bg-cloud
.bg-glow

Box Shadows

npm install pui-css-box-shadows --save

Box-shadows are used to to describe the visual hierarchy of objects. Key light shadows are directional, ambient light shadows come from all sides, and shadow combines them both.

.box-shadow-key-1
.box-shadow-amb-1
.box-shadow-1
.box-shadow-key-2
.box-shadow-amb-2
.box-shadow-2
.box-shadow-key-3
.box-shadow-amb-3
.box-shadow-3

Buttons

npm install pui-css-buttons --save

Button styles can be applied to any element. Typically you'll want to use either a <button> or an <a> element:

If your button is actually a link to another page, please use the <a> element, while if your button performs an action, such as submitting a form or triggering some javascript event, then use a <button> element.

The aria-label attribute should have an accurate description of the action to meet accessibility standards.

Styling

Every button type has a default style, an alt style (with inverted colors and a transparent background) and a flat style (alt with transparent borders).

Button Button Alt Button Flat Description
This the default button style.
Use this button for primary actions.
This button is for delete actions, these actions should also have a confirmation dialog
This button is for marketing purposes only

The most common button examples are below:

Disabling

Buttons can be disabled. If given the disabled attribute, a button will be functionally disabled, but will look unchanged. If given the disabled class, a button will be functionally disabled, and will also change visually.

Sizes

There are three sizes for buttons: large, small, and default. Simply apply the size modifier class for the desired size.

Icons

Buttons can contain icons.

They can also be icon buttons.

Button Group

npm install pui-css-button-group --save

Button groups wrap a series of buttons.

You can also mark buttons in the group as selected by swapping between alt button styles.

If you are using flat buttons, there is a thinner, flat button group

Code

npm install pui-css-code --save

This is your basic unstyled code sample:

class Foo
  def bar
    puts 'hi'
  end
end

Inline

This is an example of a paragraph with an inline code snippet within it.

Inline Dark

This is an example of a paragraph with a dark inline code snippet within it.

Styled Code

Special installation instructions

Our code is styled using PrismJS. You will need some additional setup to get it to work:

  1. Install pui-prismjs. This package provides the code parsing magic.

    Install Prismjs npm install pui-prismjs --save
  2. Include `pui-prismjs` in your main javascript file:

    require("pui-prismjs");
  3. Install a PrismJs theme. This makes the code look pretty.

    Install Prismjs npm install prismjs-<theme>-theme --save

    The two light and dark Pivotal themes are:

    • prismjs-okaidia-theme
    • prismjs-default-theme

In order to show syntax-highlighted code, you will need to apply a language specific class to the code tag. For example, .language-ruby.

There are several languages already available (and others available from the Prismjs.com website), including:

  • Markup
  • CSS
  • C-like
  • JavaScript
  • Java
  • PHP
  • PHP
  • CoffeeScript
  • Sass
  • Bash
  • Python
  • HTTP
  • Ruby
  • Go
class Foo
  def bar
    puts 'hi'
  end
end

Make it scrollable

class Foo
  def bar
    puts 'hi'
  end

  def bar
    puts 'hi'
  end

  def bar
    puts 'hi'
  end

  def bar
    puts 'hi'
  end

  def bar
    puts 'hi'
  end

  def bar
    puts 'hi'
  end

  def bar
    puts 'hi'
  end
end

Scrollable with too little content:

class Foo
  def bar
    puts 'hi'
  end
end

If you would like a set a default height, please add it manually.

Terminal Window

Special installation instructions

You will need to follow the PrismJS installation instructions in the styled code section.

class Foo
  def bar
    puts 'hi'
  end
end

class Bar
  def bar
    puts 'hi'
  end
end

class Baz
  def bar
    puts 'hi'
  end
end

class Bop
  def bar
    puts 'hi'
  end
end

Colors

npm install pui-css-colors --save

Our color pallet is composed of several different colors. At any given point it captures the current evolution of our design and likely includes old and new colors. Whenever possible, evolve the old colors rather than adding new ones.

Sass variables should only be used in variables.css.scss.

They should never be used directly when building components, because it makes it very hard to change the values later if you can't tell how they might have been used. You should define your own variables that use these colors in variables.css.scss.

If you do want to use variables and mixins, install this module:

npm install pui-css-variables-and-mixins

This example shows proper use of Sass variables.

$tabs-active-bg-color: $gray-2;

To use the color classes:

Prepend any color variable with 'bg-' to apply that color to the background Prepend any color variable with 'type-' to apply that color to the text

neutral-1

neutral-2

neutral-3

neutral-4

neutral-5

neutral-6

neutral-7

neutral-8

neutral-9

neutral-10

neutral-11

dark-1

dark-2

dark-3

dark-4

dark-5

dark-6

dark-7

dark-8

dark-9

dark-10

dark-11

brand-1

brand-2

brand-3

brand-4

brand-5

brand-6

brand-7

brand-8

brand-9

brand-10

brand-11

accent-1

accent-2

accent-3

accent-4

accent-5

accent-6

error-1

error-2

error-3

error-4

error-5

error-6

warn-1

warn-2

warn-3

warn-4

warn-5

warn-6

success-1

success-2

success-3

success-4

success-5

success-6

Shadows & Glows

$shadow-1
$shadow-2
$shadow-3
$shadow-4
$glow-1
$glow-2
$glow-3
$glow-4
$glow-5

Dividers

npm install pui-css-dividers --save

Dividers draw horizontal lines between different content groupings.





Dropdowns

npm install pui-css-dropdowns --save

A dropdown can be used to hide a list of actions or links under a clickable toggle. A dropdown is not part of a form so it does not need to be submitted in order to take effect.

Basic Dropdown

This is the basic dropdown. It has an attached menu that extends from the bottom.

Float Dropdown Menu

The float dropdown menu is spaced 2px below the toggle. It can also be pinned to the left or right for content that exceeds the parent dropdown width.

Float Scroll Menu

Lists that are indeterminately long can utilize the float scroll menu. The size is fixed so you'll have to customize the fixed height to achieve your desired results.

Split Dropdown

Action with additional actions hidden in a dropdown. Note the position of the label, in order to style the focused state. Only appropriate as a float menu.

Flat Dropdown

Dropdown with the flat button styling.

Dropdown with the link styling, retains dropdown padding.

Icon Dropdown

A dropdown with no title and just a toggle icon.

Sizing

Apply the classes .dropdown-lg or .dropdown-sm to the .dropdown element to change the size of the dropdown. These modifiers will apply to all of the variations above.

Ellipsis

npm install pui-css-ellipsis --save

The type .type-ellipsis adds ellipsis to text when there is too much. Combine it with .col-md-* classes to get the width you want.

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Embeds

Responsive

npm install pui-css-bootstrap --save

Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.

Rules are directly applied to <iframe>, <embed>, and <object> elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.

Pro-Tip! You don't need to include frameborder="0" in your <iframe>s as we override that for you.

16-by-9

4-by-3

Introduction

npm install pui-css-forms --save

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default.

Wrap labels and controls in .form-group for optimum spacing.

Basic Forms

Inline Forms

Add .form-inline to your .form-group for left-aligned and inline-block controls.

Inputs & Labels

An input with the label top aligned (this is the default layout).

An input with the label left aligned

An input with the label right aligned (N.B., control-label class provides the right alignment):

Sizing

Set heights using the form control classes .input-lg and .input-sm. Corresponding labels should have the .label-lg and .label-sm classes.

Set widths using grid column classes like .col-lg-*. Wrap selects in grid columns, or any custom parent element, to easily enforce desired widths.

HTML5 Controls

Examples of standard form controls supported in an example form layout.

Inputs Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Inputs will only be fully styled if their type is properly declared.

Password field

Date

Number

With a min/max and default starting value

With a different increment value

Email

Use this with fields that require email addresses to pop up the correct keyboard on mobile

URL

Use this with fields that require urls to pop up the correct keyboard on mobile

Telephone

Use this with fields that require telephone numbers to pop up the dialpad on mobile

Read-Only Inputs

Add the readonly boolean attribute on an input to prevent user input and style the input as disabled.

Selects

Selects are excellent to use because they will automatically behave as expected cross browser on different devices. Prefer them over a custom dropdown whenever possible.

Sizing

Set heights using the form control classes .input-lg and .input-sm. Create larger or smaller form controls that match button sizes.

Text Areas

Text areas are used for larger amounts of input.

Checkboxes & Radios

Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

Default (stacked)

Help Text

Help text Block level help text for form controls.

A block of help text that breaks onto a new line and may extend beyond one line.

Validations

To show validation errors on a field, add .has-error to the field's form group. This class can be used for all types of inputs.

Error messages should use the classes .help-block.has-error.

Error help text
Error help text

Disabled Controls

Controls will occasionally need to be disabled. You can do that by adding the disabled attribute. Inputs, selects, checkboxes, fieldsets, buttons, and other form controls can all be disabled.

Static Controls

When you need to place plain text next to a form label within a form, use the .form-control-static class on a <p>.

Here's an example in a horizontal form:

email@example.com

Here's an example in a vertical form:

someguy@test.com

Toggle Switches

A toggle switch is a horizontally styled checkbox that represents true with blue and false with gray. Toggle size can be specified via class: large, medium, or small

Grids

npm install pui-css-grids --save

Pivotal ui (via bootstrap) includes a responsive, mobile first fluid grid system that appropriately scales up to 24 columns as the device or viewport size increases. To work with the system, you need to treat mobile as your default and build more complex layouts up from there.

Introduction

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the bootstrap grid system works:

  • Rows must be placed within a .container for proper alignment and padding.

  • Use .row to create horizontal groups of columns.

  • Content should be placed within columns (e.g. .col-sm-11, .col-lg-6, etc.). Only columns may be immediate children of rows.

Columns are defined by two properties: the breakpoint at which they start acting like columns, and their relative width (on a scale of 24) beginning at this breakpoint. For example:

  • A column with the class .col-sm-11 will take up 100% of the container for devices with screen-width < 768px (the extra small breakpoint), and 11/24ths for devices ≥ 768px.

  • A column with the class .col-lg-6 will take up 100% of the container for devices with < 1200px, and 1/4th (6/24ths) for devices ≥ 1200px.

  • 3 .col-md-8 columns would fill a row for devices ≥ 992px. They would each take up their own row on devices < 992px.

  • Use the .col-xs-* classes to use a grid on mobile.

Look to the examples for applying these principles to your code.

Media Queries

We use the following media queries in our sass files to create the key breakpoints in our grid system.

Name Size Variable Name
mobile no media query since this is the default in bootstrap
x-small 480px $screen-xs-min
small 768px $screen-sm-min
medium 992px $screen-md-min
large 1200px $screen-lg-min
x-large 1800px $screen-xl-min

Grid Sizes

See how aspects of the bootstrap grid system work across multiple devices with a handy table.

extra small devices phones (≤768px) small devices tablets (>768px) medium devices laptops (>992px) large devices desktops (>1200px)
grid behavior horizontal at all times collapsed to start, horizontal above breakpoints
container width none (auto) 750px 970px 1170px
class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 24
column width auto ~62px ~81px ~97px
gutter width 30px (15px on each side of a column)
nestable yes
offsets yes
column ordering yes

Examples

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.

The .grid-show class in the examples is for demo purposes. Don't use it IRL.

Example: Mobile and Desktop

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.

Example: Mobile, Tablet, Desktops

Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.

Example: Column Wrapping

If more than 24 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

note In the second row, since 10 + 10 + 5 > 24, the 5-column-wide div gets wrapped onto a new line as one contiguous unit. Subsequent columns continue along the new line.

Gutter Sizes

You can change the size of a row's gutters with these classes.

Class Padding between columns
default 20px
.row-gutter-md 10px
.row-gutter-sm 5px

Here's what the gutters look like in action.

Responsive Column Resets

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

Offsetting Columns

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

Column Ordering

Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes. This is useful if you want to change the order of columns at different screen sizes.

Flex Grids

npm install pui-css-flex-grids --save

Examples

The .grid-show class in the examples is for demo purposes. Don"t use it IRL.

Gutters

You can create a flex grid with and without gutters. Here are examples of what each would look like.

Sizing

Using a single set of .col-n grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .grid:

You can also specify how the columns grow with .col-grow-n (n = 2 - 11). These columns will attempt to respect their given ratio until the content of the column exceeds their parameters, after which the column will drop onto another row:

Fixing Column Size

You can fix the width of a column by using the .col-fixed class.

Break Points

You can specify three different media breakpoints with the .col-sm, .col-md, and .col-lg classes.

Alignment

Aligning columns relative to the grid:

Aligning content relative to the column it is in:

Some content that sits at the top of the column
Some content that sits in the middle of the column
Some content that sits at the bottom of the column

Hoverable

npm install pui-css-hoverable --save

This component is for showing hidden actions on hover. If you put this on an element then hovering on that parent element will show the hidden element.

List example:

This can be used with any kind of list but the list group style seems to fit this use case best.

  • List Item 1 Edit
  • List Item 2 Edit
  • List Item 3 Edit
  • Not hoverable

Table example:

Name
Row 1 Delete
Row 2 Delete
Row 3 Delete
Not hoverable

Iconography

npm install pui-css-iconography --save

We use custom SVG icons, available at http://pivotalicons.cfapps.io. We recommend using the React Iconography component if you are using icons. We do provide all icons as SVGs inside of the pui-css-iconography node module (inside node_modules/pui-css-iconography/svgs/). If you are not using JavaScript and would like to use a Pivotal UI Icon, you can copy these SVGs directly, either with an img tag or as inlined SVG.

When styling the SVGs, remember to use the fill or stroke attributes instead of color. Wrapping the SVG or img tag in the .icon class will allow you to size and align the icon easily as presented in the example below.

An SVG wrapped with .icon can inherit the font size of the element above it, be sized by a type modifier class, or be passed a font size directly.

Align SVG to baseline with .icon-baseline modifier class.

Example

Wrap an image tag with .icon to get the same sizing functionality.

Spinner

Spinner behavior is determined by size. Note that the large spinner moves relatively slowly, whereas the small spinner moves more quickly and dramatically. In all cases, the base height and width is 1em and is meant to be overwritten with a font-size attribute. The font sizes provided here are meant as suggestions.

.spinner-lg
.spinner-md
.spinner-sm

Images

Responsive

npm install pui-css-images --save

Images can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element. See bootstrap 3 for further documentation of this feature.

Responsive image
Responsive image
Responsive image

Responsive SVG

SVG can be made responsive-friendly via the addition of the .svg-responsive class on a wrapper div and the .svg-content class on the svg itself. You'll also need to to define the height to width ratio as an inline padding bottom style on the .svg-responsive element like so:

<div class="svg-responsive" style="padding-bottom: 78.31%">
  <svg class="svg-content" viewBox="38 45 125 120" preserveAspectRatio="xMinYMin meet">
    ...
  </svg>
</div>

The padding-bottom should equal the height divided by the width of your specific svg.

For more information about setting up your svg, read this article about svg coordinates systems by Sara Soueidan.

Labels

npm install pui-css-labels --save

Labels are based on Bootstrap's labels. Here's an example of a label on its own.

new

You can also place labels within HTML elements. It will be sized based on the element's font size and its font modifiers.

I am a P. new

I am an H3. new

I am an H3 with an H5 modifier. new

Removable Labels

Removable labels are used as tags in an editable list. The user will either enter text or select content (i.e.: a dropdown item), and it will be styled as a removable label (most likely in a list). Developers who use these labels must implement the close functionality for when the user clicks the close button.

Removable

Layout Lists

Sometimes you might want to use lists to lay out elements on the page.

Inline lists are particularly useful when you don't know the width of the element you want to layout, or you want to vertically align it.

Links

npm install pui-css-links --save

Add the class link-text on any text links. This will make the link underlined on hover (except lowlight links).

There are four different kinds of links you can use to connect related content. In most cases (unless the designer specifically asks for another type of link) you should choose the default link.

Link Class Description
default link link-text Important links
lowlight link link-text link-lowlight Less important links
inverse link link-text link-inverse I go on a non-white background

Lists

npm install pui-css-lists --save

This section contains different list styles.

Breadcrumb

The .list-breadcrumb can be used to provide additional page navigation.

Breadcrumbs use their own monospace font-family.

Inline

An inline list is one of the three methods for laying out content (including grids and the media block).

  • feep
  • fop
  • meep

You can use inline lists to lay out elements. Here's an example of a header next to a button:

Inline Divider

Places all list items on a single line with display: inline-block; and some light padding. The .list-inline-divider also adds a simple gray border.

Here's an example on a dark background (add .list-inline-divider-light to make the border white):

Ordered

  1. feep
  2. fop
  3. meep

Unordered

  • feep
  • fop
  • meep

Unstyled

Places all list items on a single line with display: inline-block; and some light padding. The .list-unstyled class can be applied to either a <ul> or and <ol>.

  • feep
  • fop
  • meep

Maps

npm install pui-css-google-maps --save

Full width map with marker at Pivotal Labs SF location, and an optional informational overlay.

Location

Pivotal Software Inc.
875 Howard Street
San Francisco, CA 94103

Support: support@run.pivotal.io

Twitter: @pivotalws

Media

npm install pui-css-media --save

The default media displays a media object (images, video, audio) to the left or right of a content block.

demo placeholder for media

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
demo placeholder for media

Wrap the image in a fixed-size .image-container to make sure the image isn't larger than the container

demo placeholder for media

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

You can also nest media objects inside of each other (useful for comment threads or articles lists).

demo placeholder for media

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

demo placeholder for media

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
demo placeholder for media

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
demo placeholder for media

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Alignment

The images or other media can be aligned top, middle, or bottom. The default is top aligned.

demo placeholder for media

Top aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
demo placeholder for media

Middle aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
demo placeholder for media

Bottom aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Stackable

You can also make the media block stack with grid columns. Media objects switch from being stacked on top to being floated left of the media body as the screen size gets larger. For example, .media-stackable-xs is stacked on screen sizes from 0-480px and then left floated on larger screens.

demo placeholder for media

Extra-small stackable

demo placeholder for media

Small stackable

demo placeholder for media

Medium stackable

demo placeholder for media

Large stackable

Modals

npm install pui-css-modals --save

Modals bring desired content to the foreground and de-emphasize the rest of the page.

Pagination

npm install pui-css-pagination --save

Pagination should be used for navigation between pages. You can mark a link as .selected and as .disabled.

Panes

npm install pui-css-panes --save

Panes are horizontal groupings of content that are usually used to span the full browser window width (it's going to look funny here).

You can combine up to two background classes on the pane component. The one on the .pane element will span the full browser width. The one on the .container element will be constrained to the content width.

This is a pane

This is a pane

A laptop showing Pivotal Web Services dashboard.

This is another pane

Panels

npm install pui-css-panels --save

Panels are often used to group related content. They include box headers, footers, and can be combined with any backgrounds.

Panels are typically a combination of contours, backgrounds, and content including headers and footers. This section describes the contours.

Panel

By default, all the panel does is apply basic padding to contain some content.

Panel body content

Panel with Box-Shadow

Adding the box-shadow-1 to the panel lightly pops the panel off of the page. This is the preferred aesthetic instead of a border. This works great for pushing the panel up from the workspace.

Panel Title
Panel body content
Panel Title Alt
Panel body content

Panel with Loading Animation

Add a loading animation to a panel with the class panel-loading-indicator. The animation is intended for panels that utilize panel-header and panel-body. This should be used when the content of the panel is being generated asynchronously and you’d like to communicate to the user that their content is on the way.

Panel Title Alt
Look, I'm loading!

Scrollable

The scrollable panel sets a fixed height of 184px and scrolls any content that is larger. If you want a different size, set an inline style on the .panel-scrollable.

Lo-fi fixie aute irony skateboard, officia pug. VHS Kickstarter semiotics elit ad. XOXO fashion axe Neutra aesthetic nihil, before they sold out seitan photo booth bitters paleo ea. XOXO mustache consectetur jean shorts wolf banh mi, food truck aute odio Neutra polaroid artisan mlkshk. Chillwave aesthetic hashtag, 3 wolf moon Neutra umami DIY swag eu veniam. Blue Bottle fap kale chips veniam kogi, placeat yr Portland nesciunt sustainable iPhone. Single-origin coffee messenger bag locavore Schlitz, ea farm-to-table aliquip anim umami master cleanse. Delectus selfies placeat, tilde hoodie qui selvage consectetur cred master cleanse readymade pop-up assumenda nisi. Eu deep v brunch McSweeney's. Raw denim aliquip Banksy, proident cred banjo qui placeat Brooklyn fashion axe crucifix normcore aesthetic. Esse Pinterest organic anim American Apparel, wolf next level Tumblr laboris normcore pop-up dolore lo-fi put a bird on it trust fund. Laborum organic authentic Williamsburg plaid, Wes Anderson dolore sunt chia small batch synth Carles cliche tilde. Food truck ethical freegan velit, Kickstarter semiotics labore American Apparel biodiesel street art gentrify trust fund. Selfies Austin ex, organic art party authentic ullamco kitsch plaid placeat roof party cornhole deserunt aute.

Print

Similar to the regular responsive classes, use these for toggling content for print.

Classes Browser Print
.visible-print-block
.visible-print-inline
.visible-print-inline-block
Visible
.hidden-print Visible

Progress Bars

npm install pui-css-progress-bars --save

This section contains static progress bar styles.

Default styles.

0 MB / 100 MB
0%
60 MB / 100 MB
60%

Customize the progress bar background color.

90 MB / 100 MB
90%

Customize the progress bar with a custom label, larger height, and background color.

60%

60 MB / 100 MB

Responsive Utilities

npm install pui-css-bootstrap --save

Use a single or combination of the available classes for toggling content across viewport breakpoints.

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
.visible-xs-* Visible
.visible-sm-* Visible
.visible-md-* Visible
.visible-lg-* Visible
.hidden-xs Visible Visible Visible
.hidden-sm Visible Visible Visible
.hidden-md Visible Visible Visible
.hidden-lg Visible Visible Visible

The .visible-*-* classes for each breakpoint come in three variations, one for each CSS display property value listed below.

Group of classes CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

So, for extra small (xs) screens for example, the available .visible-*-* classes are:

  • .visible-xs-block
  • .visible-xs-inline
  • .visible-xs-inline-block

Here's an example of the .visible-* and .hidden-* classes in action:

XS

XS

SM

SM

MD

MD

LG

LG

Tabs

npm install pui-css-tabs --save

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" on an element.

Highlight

Responsive

Simple

Spaces Content
Domains Content
Members Content

Tables

npm install pui-css-tables --save

Class Description
.table Applied to the starting element to define the style standards.
.tr-hover Applied to the starting table element or the desired row to add the hover effect.
.td-hover Applied to the starting .table element to change the table row hover effect to a table cell hover.
.tr-no-h-borders Removes inner horizontal borders from the desired .table or table row element.
.table-no-ext-borders Removes external borders for the entire table when applied to the .table element.
.table-no-borders Removes all borders, internal and external, when applied to the .table element.Removes all borders, internal and external, when applied to the .table element.

HTML Tables

Basic HTML tables are good for traditional data sets with minimal user interaction. Both Flex Tables and HTML tables have the same aesthetic styling and similar modifier classes.

Basic Data Table

This table is used to display many rows of data.

Header 1 Header 2 Header 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3

Table Row Hover

Adding .tr-hover to a specific table row or the table element itself will add the hover effect.

Header 1 Header 2 Header 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3

Table Cell Hover

Adding .td-hover to the table element will allow the user to highlight individual cells.

Header 1 Header 2 Header 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3

Table Border Modifiers

Remove all of the internal horizontal borders with class .tr-no-h-borders applied to the table row or the table element.

Header 1 Header 2 Header 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3

No external borders to rows using class .table-no-ext-borders on the table element.

Header 1 Header 2 Header 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3

No external borders to rows using class .table-no-borders on the table element.

Header 1 Header 2 Header 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3

Scrollable

Table with external borders where the body scrolls but the header does not. The default height of the scrollable table is 164px. Modify the max-height of the .table-scrollable element to change this for your layout.

Header 1 Header 2 Header 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3

Flex Tables

Flex Tables have the same functionality as HTML tables but allow for more complex interactions like links and dynamic column widths. They should be used when crafting intricate components or you are concerned about responsive flexibility. Both Flex Tables and HTML tables have the same aesthetic styling and similar modifier classes.

Header 1
Header 2
Header 3
Cell 1
Cell 2
Cell 3
Cell 1
Cell 2
Cell 3

Table Cell Alignment

Thanks to the power of the flexbox grid you can take advantage of content alignment classes like .col-top and .col-bottom to align the content of a column.

Head
Head
Head
Cell 1
Cell 1.2
.col-top
.col-bottom

Dynamic Cell Width

The Flex table can take advantage of the dynamic column widths provided by the flexbox grid. You can use the base .col class for auto widths, .col-1 to .col-24 to define a percentage width between 1/24, .col-fixed to define a specific pixel count or just observe the width of it’s children, and finally the .col-grow-2 to .col-grow-11 to define a flex-grow column. These can all be used in conjunction. Read more about them here to learn their proper use.

Also note that placing a div with .type-ellipsis into any of these cells will truncate your text content.

Fixed Width
25% Width
Auto Width
Double the Auto Width
.col.col-fixed
.col.col-6
.col
.col-grow-2

Table Linking

The flex table is able to swap out any of it’s divs for an a tag. In the example below we can see a single cell can be made into a link or an entire row.

Header 1
Header 2
Header 3
Header 4
Header 5
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5 (a tag cell)
Cell 1-5 (a tag row with div cell)

Tile Layout

npm install pui-css-tile-layout --save

Hey
What
Hello
What

Responsive Breakpoints

You can also set the number of columns for responsive breakpoints with a class. You can set separate column values (from 1 - 12 columns) for some or all of xs, sm, md, lg, and xl screen sizes.

So
Many
Responsive
Blocks
Change
The
Screen
Size

Gutters

You can make a TileLayout without gutters by omitting the 'tile-gutter' class.

So
Close
Together

Tooltip

npm install pui-css-tooltips --save

Tooltips are used to display extra information on hover. They can be used with any hoverable element.

a tooltip
a tooltip
a tooltip

Tooltips can be light as well as dark (the default):

a tooltip

Tooltips can be sized:

Lorem ipsum dolor sit amet, consec
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Form Icon Tooltip

Place the .icon into the label element next to the text

Typography

Source Sans Pro is our font family. It can be used with the following modifiers to achieve a variety of effects.

Sizes

Set font sizes using headings and modifier classes.

h1 32px

h2 24px

h3 20px

h4 18px

h5 16px
h6 13px

base font size 16px

small text 14px

extra small text 12px

Separating code and visual semantics

Sometimes you may need to use a heading which has different visual and code semantics. You can accomplish this by combining classes with elements (classes take visual precedence over elements in this case).

I am a h1!

I am a h2!

If it's not a heading but you need similar visual treatment you can add just the class to any element.

Use headings when possible since they add semantic value.

Heading level 2 on a div

Alignment

See the alignment component for classes to use for text alignment.

Colors

You can apply color to any text with the color classes.

I'm a brand color!

Here's a table of all the color classes.

Type inverse

Type inverse

.type-inverse

Type neutral 1

Type neutral 1

.type-neutral-1

Type neutral 2

Type neutral 2

.type-neutral-2

Type neutral 3

Type neutral 3

.type-neutral-3

Type neutral 4

Type neutral 4

.type-neutral-4

Type neutral 5

Type neutral 5

.type-neutral-5

Type neutral 6

Type neutral 6

.type-neutral-6

Type neutral 7

Type neutral 7

.type-neutral-7

Type neutral 8

Type neutral 8

.type-neutral-8

Type neutral 9

Type neutral 9

.type-neutral-9

Type neutral 10

Type neutral 10

.type-neutral-10

Type neutral 11

Type neutral 11

.type-neutral-11

Type dark 1

Type dark 1

.type-dark-1

Type dark 2

Type dark 2

.type-dark-2

Type dark 3

Type dark 3

.type-dark-3

Type dark 4

Type dark 4

.type-dark-4

Type dark 5

Type dark 5

.type-dark-5

Type dark 6

Type dark 6

.type-dark-6

Type dark 7

Type dark 7

.type-dark-7

Type dark 8

Type dark 8

.type-dark-8

Type dark 9

Type dark 9

.type-dark-9

Type dark 10

Type dark 10

.type-dark-10

Type dark 11

Type dark 11

.type-dark-11

Type accent 1

Type accent 1

.type-accent-1

Type accent 2

Type accent 2

.type-accent-2

Type accent 3

Type accent 3

.type-accent-3

Type accent 4

Type accent 4

.type-accent-4

Type accent 5

Type accent 5

.type-accent-5

Type accent 6

Type accent 6

.type-accent-6

Type brand 1

Type brand 1

.type-brand-1

Type brand 2

Type brand 2

.type-brand-2

Type brand 3

Type brand 3

.type-brand-3

Type brand 4

Type brand 4

.type-brand-4

Type brand 5

Type brand 5

.type-brand-5

Type brand 6

Type brand 6

.type-brand-6

Type brand 7

Type brand 7

.type-brand-7

Type brand 8

Type brand 8

.type-brand-8

Type brand 9

Type brand 9

.type-brand-9

Type brand 10

Type brand 10

.type-brand-10

Type brand 11

Type brand 11

.type-brand-11

Type error 1

Type error 1

.type-error-1

Type error 2

Type error 2

.type-error-2

Type error 3

Type error 3

.type-error-3

Type error 4

Type error 4

.type-error-4

Type error 5

Type error 5

.type-error-5

Type error 6

Type error 6

.type-error-6

Type success 1

Type success 1

.type-success-1

Type success 2

Type success 2

.type-success-2

Type success 3

Type success 3

.type-success-3

Type success 4

Type success 4

.type-success-4

Type success 5

Type success 5

.type-success-5

Type success 6

Type success 6

.type-success-6

Type warn 1

Type warn 1

.type-warn-1

Type warn 2

Type warn 2

.type-warn-2

Type warn 3

Type warn 3

.type-warn-3

Type warn 4

Type warn 4

.type-warn-4

Type warn 5

Type warn 5

.type-warn-5

Type warn 6

Type warn 6

.type-warn-6

Emphasis Modifiers

Type emphasis modifiers can be used on any type element.

Really Important

I mean reeeeeeeeeeeally

Here's a table of all the emphasis modifier classes.

Low emphasis

Default emphasis

High emphasis

Maximum emphasis

Emphasis alternate

Multiline Headings

Headings are spaced so their line height and padding are consistent on one or many lines.

One line heading

I am a
multiline heading

Vertical Alignment

npm install pui-css-vertical-alignment --save

The Aligner allows you to vertically align children to the top, center, or bottom. Its height is set by default to 230px.

This component is not supported in IE10 and below. While the content will appear, it will not be vertically aligned.

Override the default height by setting an inline style like so:

You can position both vertically and horizontally by combining the aligner with grids, or the text-alignment classes (.txt-l, .txt-r, and .txt-c)

Whitespace

npm install pui-css-whitespace --save

Should be used to modify the default spacing between objects (not between nodes of the same object) Please use judiciously. You want to be using defaults most of the time, these are exceptions!

Letter Description
p, m padding, margin
a, t, r, b, l, h, v all, top, right, bottom, left, horizontal, vertical
n, s, m, l, xl, xxl, xxxl none(0px), small(2px), medium(4px), large(8px), extra large(16px), extra extra large (24px), extra extra extra large (32px)

A normal paragraph

A paragraph with large padding

This documentation generated using Hologram