Pivotal UI includes Pivotal styles as well as Bootstrap CSS, OOCSS, FontAwesome icons fonts, and the Source Sans Pro Google Font in your project. This is everything you need to get started building UI at Pivotal.
Visit the live styleguide
If you are ready to start using Pivotal UI download the latest release.
To contribute, see the contributing readme.
- jQuery v2.1.1
- LoDash v2.4.1
- modernizr v2.8.3
- Bootstrap v3.2
- Prism.js
- Font Awesome v4.10
- Normalize CSS v1.0.2
- OOCSS
- Source Sans Pro
- Download the latest release.
- Unzip the release archive and move the resulting directory into your project.
- Link to the css file in your html template to include the styles.
- Add a script tag to your html template to use the javascript.
- Use the css classes (reference the styleguide for examples and usage)
<html>
<head>
<title>...</title>
<link rel="stylesheet" href="/path/to/release/pivotal-ui.css">
<script src="/path/to/release/pivotal-ui.js"></script>
</head>
<body>
<p class='type-brand-1'>Hello, world!</p>
</body>
</html>You'll need to maintain the structure in the release directory to have fonts and assets work properly. Do not modify the release files directly. If you need a component and you cannot find it in the styleguide, write your own styles and javascript separately. Doing so will make it easier to update to newer versions.
If you're installing PivotalUI into a Rails project, you should unzip the constituent files into a directory named vendor/assets/pui-vX.X.X.
In your application.scss file, add the line @import "pivotal-ui-rails"
In your application.js file, add the line //= require pivotal-ui as the very first require declaration.
Lastly, in your application's config/application.rb, you'll need to add the following to make sure all vendored files are properly compiled:
config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/
If you are building CSS using Sass, you can get pivotal-ui variables and mixins from the pui-css-variables-and-mixins node module.
$ npm install --save pui-css-variables-and-mixinsImport the file and use the variables:
@import '/path/to/pui-variables.scss';
@import '/path/to/mixins.scss';
.bg-special {
background-color: $brand-1;
}Visit https://styleguide.pivotal.io of host the styleguide files with a web server to view the available components.
$ cd /path/to/release/pivotal-ui/styleguide/ && python -m SimpleHTTPServer 8000
then visit https://localhost:8000
There are two themes, dark and light, for syntax highlighting. You can choose a theme by linking to one of the following stylesheets:
pivotal-ui/prismjs/prism.css(for the light theme)pivotal-ui/prismjs/prism-okaidia.css(for the dark theme).
You can only include one of these themes at a time.
See the latest styleguide for examples of syntax highlighting in action.
<pre>
<code class='language-ruby'>
class Foo
def bar
end
end
</code>
</pre>React components are in the beta section of the styleguide, where we keep experimental components with unstable APIs. Don't use them on production apps. If you'd like to try out react, swap in the react js file in place of the standard file:
<script src="/path/to/release/pivotal-ui.js"></script> Should become:
<script src="/path/to/release/pivotal-ui-react.js"></script>If you want a feature added to Pivotal UI, or you've found a bug that needs fixing, please refer to our contribution guidelines.
When creating a pull request, make sure you rebase your branch against our code base (upstream). Read our Commit guidelines! We have a very specific syntax for our messages.
Copyright 2015 Pivotal Software, Inc. All Rights Reserved.