@npmcorp/pui-css-viewport-panes

viewport-panes css component for the npm fork of Pivotal UI, based on Bootstrap

Usage no npm install needed!

<script type="module">
  import npmcorpPuiCssViewportPanes from 'https://cdn.skypack.dev/@npmcorp/pui-css-viewport-panes';
</script>

README

@npmcorp/pui-css-viewport-panes

A CSS viewport-panes component that can be installed via this npm package. The package provides all of the CSS you need to use the component.

Installation

To install the package, from the command line, type:

npm install pui-css-viewport-panes

Usage

<div class="pane bg-dark-2 viewport-pane-long">
  <div class="container bg-glow">
    <h1 class="type-neutral-11">This is a long viewport pane. There should be just enough to see the fold under it.</h1>
  </div>
</div>

<div class="pane bg-dark-2 viewport-pane">
  <div class="container bg-glow">
    <h1 class="type-neutral-11">This is a viewport pane. There should be enough to see content below it.</h1>
  </div>
</div>

<div class="pane bg-dark-2">
  <div class="container bg-glow">
    <h1 class="type-neutral-11">This is a regular pane. It's here to show the other two's behavior.</h1>
  </div>
</div>

You can find more examples of the viewport-panes component in the pui style guide

This is a component of Pivotal UI. It is a Pivotal specific implementation of Bootstrap.

Styleguide Github

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.