Style Guide

Layout

Container

OSF uses a fixed container layout as opposed to fluid. This makes sure that the width does not continue to adjust past 1200px width. Your documents should be wrapper inside a div with class "container." 


    <div class="container">
    ...
    </div>
Bootstrap documentation

Grid

Using the grid properly is critical for the correct view of the OSF components on all devices. Within a container you should ALWAYS use grids for layout and horizontal alignment. Do not use margins, padding, float or tables for layout arrangements.


<div class="row">
    <div class="col-md-12">...</div>
</div>
<div class="row">
    <div class="col-md-4">...</div>
    <div class="col-md-3">...</div>
    <div class="col-md-5">...</div>
</div>
<div class="row">
    <div class="col-md-6">...</div>
    <div class="col-md-6">...</div>
</div>

How to use the grid:

  • Grid columns need to add up to 12.
  • Each total of 12 should be inside its own "row" div.
  • Plan out the layout of your component on paper before you start coding and then write the html code of the row structure first. This will alleviate the problem of columns not matching up or some div tags not closing.
  • Bootstrap grid is designed to fit columns together. If there is an unnecessary amount of space in between components, first check that your grid is properly built.
  • Bootstrap grids do not align heights of columns. If you need column heights to be equal you will need to manually set them or use other libraries.
  • Do not use grids to center align a component horizontally unless there is no other semantically meaningful way to do so.
Bootstrap documentation

Layout helper CSS classes

For margin and padding OSF has helper classes that provide a quick method to add granular layout without having to define these distances for every item.

.type + direction + size | Example: .m-t-xs

  • Type : "m" : margin or "p" : padding
  • Direction : "t" : top, "b" : bottom, "l" : left, "r" : right; "v" : vertical (top and bottom), "h" : horizontal (left and right) or omit this and apply to all sides; i.e. .m-xs;
  • Size : "xs": 5px, "sm": 10px, "md": 15px, "lg" : 25px, "xl" : 50px
Examples:
XS Padding: 5px
SM Padding: 10px
MD Padding: 15px
LG Padding: 25px
XL Padding: 50px;

<div class="m-b-md box p-xs">XS Padding: 5px  </div>
<div class="m-b-md box p-sm">SM Padding: 10px </div>
<div class="m-b-md box p-md">MD Padding: 15px </div>
<div class="m-b-md box p-lg">LG Padding: 25px </div>
<div class="m-b-md box p-xl">XL Padding: 50px;</div>

How to space elements:

  • Use margin helpers at top and bottom of divs to separate content.
  • Do NOT use HR until you tried all margin sizes for spacing. Is sections need to be further separated you can try HR tag.

Typography

OSF Website uses light width font for general purpose headings. For bolder fonts you can use the font helper classes:

Example page header Subtext for header

h1. Project management with collaborators

h2. Project management with collaborators

h3. Project management with collaborators

h4. Project management with collaborators

h5. Project management with collaborators
h6. Project management with collaborators

p. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sollicitudin ipsum iaculis lectus blandit tempus. Donec tempus ornare erat id fermentum. Nullam tempor viverra arcu vel pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum gravida velit tellus, eget facilisis sapien interdum vel. Nullam a dolor ante. Nunc ultrices finibus turpis quis interdum. Aliquam vel velit tincidunt, sagittis magna in, ultrices sem. Nulla tempus non ex eu dignissim. Sed accumsan blandit cursus. Vestibulum vulputate erat nibh, a accumsan nibh efficitur ac. Etiam tincidunt turpis nibh, et suscipit purus egestas at. Nullam quis ultrices ante. Praesent sapien urna, pulvinar varius mauris a, pulvinar ullamcorper velit.

How to use heading tags:

  • h1 tag should be used only once in a page for the most relevant title for the entire page.
  • You should use heading tags for sizing your text. Do NOT change font-size of text.
  • Heading tags are also a requirement for screen readers to navigate websites.

Typography helper classes

Font weight helpers

Font weight is how thick a font is. These weight differences are not available for all fonts, especially web fonts will have few of them but the default Bootstrap font for typography includes them.

XS thickness

SM thickness

MD thickness

LG thickness

XL thickness

Font size helpers

Sometimes you will need a relatively slightly smaller or slightly bigger size for fonts. Use them in conjunction with "text-muted" and other helpers to achieve your desired effects.

Regular text Smaller text

Regular text Bigger text


<p class="f-w-xs">XS Thickness</p>
<p class="f-w-sm">SM Thickness</p>
<p class="f-w-md">MD Thickness</p>
<p class="f-w-lg">LG Thickness</p>
<p class="f-w-xl">XL Thickness</p>
<p>Regular Text <span class="text-smaller text-muted">Smaller text</span></p>
<p>Regular Text <span class="text-bigger text-muted">Bigger text</span></p>

Word break

One of the most common testing scenarios is to use single long words in layout elements. Most often these words will break the layout and can have usability consequences such as hiding buttons or other content. Most text is automatically applied word break rule sets including "p, em, b, a, td" tags. You can also use an separate class ".break-word"

Without .break-word

supercalifragilisticexpialidocious

With .break-word

supercalifragilisticexpialidocious

Other text options

Bootstrap documentation provides many other alternatives. Please do NOT change font sizing of your elements. Check to see if you can use an existing convention instead at the Bootstrap website.

For instance, you can use different colored text with existing css classes.

text-muted: Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

text-primary: Nullam id dolor id nibh ultricies vehicula ut id elit.

text-success: Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

text-info: Maecenas sed diam eget risus varius blandit sit amet non magna.

text-warning: Etiam porta sem malesuada magna mollis euismod.

text-danger: Donec ullamcorper nulla non metus auctor fringilla.


<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
Bootstrap documentation

Inline edits

You can provide users the opportunity to edit content "in place" meaning that the content switches to input elements to make changes and returns back to being the regular content when either changes are saved or dismissed. Use the "osf-editable" class for items that are editable inline.

Name: OSF Project Name 


    <p>Name :  <span class="osf-editable"> OSF Project </span></p>

When to use inline editing

  • USE if it's an isolated edit not part of a form.
  • DO NOT use within a form, it adds no value.
  • USE if the text being edited is part of a regular size text such as paragraph.
  • USE if the text being edited is not more than a few words (i.e. Don't edit long text this way)
  • USE if the edit is not critical (can be quickly changed again).

If you use inline edits make sure you use them in a similar way across the site!

Colors

OSF blue

#204762

.bg-color-blue

  • Navbar background
  • Dominant major components

Hover

#E0EBF3

.bg-color-hover

  • Row hover color
  • State changes

Light

#EEEEEE

.bg-color-light

  • Box or panel backgrounds
  • Optionally sidebars and non-dominant boxes

Alternative

#C7FFC7

.bg-color-alt

  • Search layer background
  • Alternative dominant color

Select

#337AB7

.bg-color-select

  • Selected Row Color
  • Other selected items

Grey

#333333

.bg-color-grey

  • General Text Color

Understanding Bootstrap colors

Success

Use cases:

  • Save buttons
  • Messages which indicate a successful action, such as server connection, or successful save
Primary

Use cases:

  • Any neutral BUT primary action item, that is neither good nor bad. This depends on the order of items.
  • When it is the only button on the page (the color coordinates better with overall theme)
Info

Use cases:

  • Help and info buttons and texts
  • Settings, options and details
Warning

Use cases:

  • Alerts that bring attention to a potentially problematic issue that is not yet causing an error but might
  • Buttons that don't have a full delete effect but should be alerting, for instance "Delete Some"
Danger

Use cases:

  • Error alerts
  • All Delete and remove buttons

Icons

OSF uses Font Awesome 4 without any overrides. Font Awesome is a font based icon library, so it can scale and take css rules as any other text. Use as shown below and check documentation for details.

Tip: There is a lot more you can do with font awesome, such as spin, use different sizes, stack two on top of each other etc. Make sure you check out the documentation.
Delete Settings
User 
    
<a class="btn btn-danger" href="#">
<i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#">
<i class="fa fa-cog"></i> Settings</a>

<div class="btn-group">
    <a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
    <a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
    <a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
    <a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
</div>

<div class="input-group margin-bottom-sm">
    <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
    <input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
    <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
    <input class="form-control" type="password" placeholder="Password">
</div>

<div class="btn-group open">
    <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
    <span class="fa fa-caret-down"></span></a>
    <ul class="dropdown-menu">
        <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
        <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
        <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
        <li class="divider"></li>
        <li><a href="#"><i class="i"></i> Make admin</a></li>
    </ul>
</div>

Which icons to use?

Action Icon to use FA class
Toggling show/hide of content with up and down fa-angle-right, fa-angle-down
Deleting tabular or repeating data fa-times
Deleting stand alone items or important items fa-trash-o
Inline help buttons fa-question-circle

There is no standardization beyond these icons. Use of icons with or without buttons is very contexual to what the action is. Developers should err on the side of not using icons if in doubt and should not use icons outside their conventions (i.e. Link icons, save icons etc.)

Should we use icons with buttons?

YES if:
  • There are a lot of buttons, i.e in a toolbar
  • Icons are repeated in other sections of the page to show that they are related to button text
  • If narrow screens show only icons and not the text
  • The button is very widely used together with text in general user experience. I.e. Create, Delete, Edit type of single words get icons; but not "Create Registration"
NO if:
  • There is a stand alone button
  • Button text is not general enough to be natural (e.g. Make public)
  • The icon is not intuitive for that task, e.g.

If icons are use in buttons they should always be on the LEFT side

Font Awesome documentation

Components

Buttons

We use the default Bootstrap buttons EXCEPT: default button has light grey background rather than white. You don't need to add any classes, just use the standard bootstrap class for default.

Only one size is provided here, for more sizes please check Bootstrap documentation.

    
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

Which buttons to use:

Follow the colors and text below in your use of buttons. Mouseover the buttons for specific use cases.

Action Button and text to use
Non modifying changes:
Saving and adding
Removal
Information and settings
Other call to action

Guidelines for button text

  • Do not use OK, even if it makes sense with the question being asked. People skim to the button often and OK doesn't help understand the meaning quickly.
  • For modals that only provide information to the user, use a single button with text "Got it" that closes the modal. Also use the X on top right. Do not use a question mark as modal header.
  • Buttons should have verbs and should start with verbs, e.g. "Make public" instead of "Public" alone or "Visibility Setting".
  • The button does not need to repeat the header, e.g. "Add" is enough for the submit button for a modal that says "Add Contributors".
  • Be deliberate in your use of Cancel vs Close. Cancel is supposed to undo any potential visual or data change or to denote change of intention by the user (e.g. Don't Save). Close simply removes an element from view. Modals need a Close button and forms need a Cancel button. If the form has brought the user to a different page Cancel should bring them back to where they were.
  • Back should be used in an OSF guided activity, where the user has to do a series of steps, and wants to return to a previous step. For example, signing up for the Preregister Prize. If the path is user driven, for example, creating a project, use the Cancel button.
  • Don't abandon Cancel or Close buttons next to Save in favor of Dismiss buttons (x at the top right of content). Cancel is easier to find and click and the X button is more appropriate for deleting portions of content (e.g. deleting a single employment institution in the profile).

Form buttons

With forms don't use Submit. Use the word that the activity requires.

Action Text to use
Creating a new item Create
Editing the information of an existing item Save
Deleting an item Delete
Applying a setting (for instance add ons) Apply
Bootstrap documentation

OSF uses three types of links:

Regular link with color

Lorem ipsum dolor sit amet.

With solid line

Lorem ipsum dolor sit amet.

With dashed line

Lorem ipsum dolor sit amet.

When to Use link styles?

These three styles are not specific to certain use cases. In regular circumstances use the regular link. The alternatives are provided in case for design or development reasons an underline is required 


<a href="#">Lorem ipsum</a> dolor sit amet.
<a class="link-solid" href="#">Lorem ipsum</a> dolor sit amet.
<a class="link-dashed" href="#">Lorem ipsum</a> dolor sit amet.

Panels/widgets

Panels are boxes that have special styling for header, body and footer. They are often used as widgets. We use bootstrap style with minor overrides to flatten borders.

Tip: You can use the bootstrap colors for the panels by adding panel type such as "panel-info" as class. Footer is not going to change color.

Bootstrap documentation

Panel title

Button

Cras mollis viverra lorem at pretium. Praesent fringilla lacus vitae auctor porttitor. Suspendisse auctor tincidunt ipsum, eget pulvinar ipsum fringilla eget. Nam blandit faucibus augue, at tincidunt dolor condimentum ut. Mauris tempor luctus sem ac commodo. Praesent elit eros, cursus a eleifend vel, luctus et ex. Duis nec augue ligula. Quisque semper tristique ligula. Donec massa neque, vehicula id lectus et, ullamcorper iaculis nibh. Donec fermentum, lacus nec hendrerit ultrices, quam nulla sodales sem, quis tempor mauris urna et magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas blandit nunc enim, eget cursus tortor aliquet ac.

Praesent pulvinar leo a iaculis cursus. Nulla vitae bibendum purus, non venenatis eros. Etiam suscipit laoreet purus. Proin in varius elit. Morbi felis magna, posuere in ultrices vitae, commodo sit amet est. Nullam eget metus at ligula viverra suscipit. Nulla imperdiet molestie sapien, tincidunt scelerisque nunc rutrum quis.

Footer contents here. 
    
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Wiki</h3>
        <div class="pull-right">
            <a href="/abrs9/wiki/" class="btn btn-sm btn-default">
                Button
            </a>
        </div>
    </div>
    <div class="panel-body">
        <div class="break-word">
        <p>
        Cras mollis viverra lorem at pretium. Praesent fringilla lacus vitae auctor porttitor. Suspendisse auctor tincidunt ip...
        </p>
    </div>
    <div class="panel-footer clearfix">
        Footer contents here.
        <div class="pull-right">
            <button class="btn btn-success">Save</button>
        </div>
    </div>
</div>

Modals

OSF Uses modals that are based on the bootstrap versions but modified to be more flat and similar to the Google Material design modals. Use the code as shown below.

Bootstrap documentation 
    
<p><button class="btn btn-info" data-toggle="modal" data-target="#myModal">Click to open modal </button></p>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h3 class="modal-title" id="myModalLabel">Modal title</h3>
            </div>
            <div class="modal-body">
                <p> Cras mollis viverra lorem at pretium. Praesent fringilla lacus vitae auctor porttitor. Suspendisse auctor tincidunt ipsum, eget pulvinar ipsum fringilla eget. Nam blandit faucibus augue, at tincidunt dolor condimentum ut. Mauris tempor luctus sem ac commodo. Praesent elit eros, cursus a eleifend vel, luctus et ex. Duis nec augue ligula. Quisque semper tristique ligula. </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Styling modals for alert types

Sometimes you may want to adjust modals to show that the message contained is a significant delete and not just information. To this effect you can use the alert colors that were discussed in the alert section of this page. To use alert colors in the header add the pertinent alert-color class i.e. "alert-danger" as shown below:

Use only danger, warning, and info colors, do not use primary or success. Use colors as they relate to the operation. 

    
<div class="modal-header alert-danger">
...
</div>

<div class="modal-header alert-info">
...
</div>

<div class="modal-header alert-warning">
...
</div>

Guidelines for Modal Text

  • Modal titles should generally be clear, concise sentence fragments.
  • Modal titles should be in sentence case (first letter and proper nouns capitalized).
  • Modal titles should include question marks (if they are questions), but no other punctuation.
  • Follow 'Guidelines for Button Text' as shown above.
  • A user should be able to skip the body of the modal and still understand their general modal options.
  • Body text should be in full sentences.
  • These guidelines are modeled after how Google handles “Alerts with title bars.” See their guide for examples.

Alerts

Alerts are color coded important messages that should be used sparingly. Our alerts are adjusted versions of the bootstrap alerts and use the exact same syntax with minor design differences.

Bootstrap documentation 
    
<div class="alert alert-success" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

<div class="alert alert-info" role="alert">
    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>

        <div class="alert alert-warning" role="alert">
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

<div class="alert alert-danger" role="alert">
    <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>

<div class="alert alert-warning alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
    <strong>Dismissable Alert!</strong> click X to dismiss.
</div>

The navigation bar is one of the most edited styles borrowed from Bootstrap. If you need to add components to the OSF navigation bar follow the style shown in the example bar below. 

    

<nav class="navbar navbar-inverse" id="navbarScope" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/"><div class="osf-navbar-logo"></div>OSF</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse navbar-right">
            <ul class="nav navbar-nav">
                <li><a href="/dashboard/">My Dashboard</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Explore <span class="caret hidden-xs"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="/search/?q=*&filter=registration">Registry</a></li>
                        <li><a href="/meetings/">Meetings</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Help <span class="caret hidden-xs"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="/4znZP/wiki/home">About</a></li>
                        <li><a href="/faq/">FAQ</a></li>
                        <li><a href="/getting-started">Getting Started</a></li>
                    </ul>
                </li>
                <li>
                    <a href="${web_url_for('user_profile')}">
                        <span rel="tooltip" data-placement="bottom" title="Settings" class="fa fa-cog hidden-xs fa-lg"></span>
                        <span class="visible-xs">Settings</span>
                    </a>
                </li>
                <li>
                    <a href="${web_url_for('auth_logout')}">
                        <span rel="tooltip" data-placement="bottom" title="Log out" class="fa fa-sign-out hidden-xs fa-lg"></span>
                        <span class="visible-xs">Log out</span>
                    </a>
                </li>
                <li class="dropdown sign-in" data-bind="with: $root.signIn">
                    <div class="btn-group">
                        <button type="button" class="btn btn-info btn-top-login dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                            Sign in <span class="caret hidden-xs"></span>
                        </button>
                        <ul class="dropdown-menu" id="menuLogin" role="menu">
                            <form class="form" id="signInForm" data-bind="submit: submit" action="${login_url}" method="POST">
                                <div class="form-group"><input id="email" class="form-control" type="email" data-bind="value: username" name="username" placeholder="Email" aria-label="Username"></div>
                                <div class="form-group"><input name="password" id="password" class="form-control" type="password" placeholder="Password" data-bind="value: password" aria-label="Password"></div>
                                <div class="form-group"><button type="submit" id="btnLogin" class="btn btn-block btn-primary">Login</button></div>
                                <div class="text-center m-b-sm"> <a href="/forgotpassword/">Forgot Password?</a></div>
                            </form>
                        </ul>
                    </div>
                </li>
        </div><!--/.navbar-collapse -->
    </div>
</nav>

Project navigation

Another important navigation component is the project navigation: 

    
<div id="projectBanner">
    <header class="subhead" id="overview">
        <nav id="projectSubnav" class="navbar osf-project-navbar" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".project-nav">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="fa fa-bars fa-lg"></span>
                    </button>
                    <a class="navbar-brand visible-xs" href="/53dnv/">
                    Project Navigation
                    </a>
                </div>
                <div class="collapse navbar-collapse project-nav">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="/53dnv/" class="project-title"> Project Name</a></li>
                        <li><a href="#project">Files</a></li>
                        <!-- Add-on tabs -->
                        <li>
                            <a href="#project">
                            Wiki
                            </a>
                        </li>
                        <li><a href="#project">Statistics</a></li>
                        <li><a href="#project">Registrations</a></li>
                        <li><a href="#project">Forks</a></li>
                        <li><a href="#project">Sharing</a></li>
                        <li><a href="#project">Settings</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
</div>

Tabs

Use tabs to separate content within the page. Our design uses exact same Bootstrap syntax with some style changes. You do not need to use any additional classes to apply these styles, just use tabs as normal.

Your tabs will not be including margin and padding out of the box within the divs themselves. You can use helper classes or define contents as required.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non ex sit amet nulla viverra vulputate. Vestibulum tortor erat, efficitur in tincidunt sed, ultrices et est. Morbi vestibulum massa sed mi sollicitudin accumsan. Maecenas erat dolor, molestie ac turpis hendrerit, porttitor fringilla mauris. Praesent maximus neque at dui viverra, non fermentum eros placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis id velit ut dui feugiat pulvinar. Aliquam orci tortor, tempor quis lectus eu, pretium finibus augue. Duis suscipit tortor in orci malesuada ullamcorper. Proin eget elit vitae justo eleifend scelerisque sed eget risus. Quisque dignissim nec neque vel interdum. Mauris id lacus dui. In consequat velit mi, at pretium orci consequat vitae.
Nunc vitae augue in mi condimentum dignissim sed at ante. Praesent et imperdiet massa. Donec vel euismod turpis, sed elementum urna. Duis pharetra sapien vel libero tempor rutrum. Ut purus lectus, tincidunt eget nisl at, cursus dignissim magna. Aenean eu malesuada magna. Cras sed justo sollicitudin, luctus sem a, fermentum dui. Fusce eu tempor magna. Proin sed fermentum velit.
Proin scelerisque eget dui eu mattis. Donec convallis semper ligula in commodo. Pellentesque sit amet gravida ex. Quisque mattis tempor turpis, nec fermentum enim. Etiam sed imperdiet sapien. Curabitur vitae ex vel orci sodales vehicula non suscipit ex. Fusce et justo ac est tincidunt feugiat vel accumsan tortor.
Bootstrap documentation 
    
<div role="tabpanel">

    <!-- Nav tabs -->
    <ul class="nav nav-tabs m-b-md" role="tablist">
        <li role="presentation" class="active">
            <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>
        </li>
        <li role="presentation">
            <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
        </li>
        <li role="presentation">
            <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a>
        </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
    ...
    </div>
    <div role="tabpanel" class="tab-pane" id="profile">
    ...
    </div>
    <div role="tabpanel" class="tab-pane" id="messages">
    ...
    </div>
    </div>

</div>

When to use tabs:

  • When stacking vertically or horizontally doesn't make sense.
  • When tabbed contents are related and the relation is clear to the user.
  • When one tab does not need information from another tab, so users don't constantly switch between.

Loading indicators

Use of OSF logo loader is deprecated but available in this version for backwards compatibility. Please refrain from using osf logo loaders and use one of the options provided below.

The recommended loading indicators are provided by an external library ( https://connoratherton.com/loaders) but bundled in the base.css file for osf-style. Currently these options are supported, each for either light or dark backgrounds. Developers who need more types of loading indicators can add more through a feature Pull Request.

Ball-scale

Use for large content and center it horizontally (and vertically depending on container height)

Light
Dark 

    // dark backgrounds
    <div class="ball-scale">
        <div></div>
    </div>

    // light backgrounds
    <div class="ball-scale ball-dark">
        <div></div>
    </div>

Ball-pulse

Use for inline content in place of the element loading.

Light
Dark 

    // dark backgrounds
    <div class="ball-pulse">
        <div></div>
    </div>

    // light backgrounds
    <div class="ball-pulse ball-dark">
        <div></div>
    </div>

Progress bars

Progress bars come in the regular XS-XL sizes that we use throughout the size. In this case sizes denote the height of the bar.

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
20% Complete 
    
<div class="progress progress-bar-xs">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
        <span class="sr-only">40% Complete (success)</span>
    </div>
</div>

<div class="progress progress-bar-sm">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
        <span class="sr-only">20% Complete</span>
    </div>
</div>

<div class="progress progress-bar-md">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
        <span class="sr-only">60% Complete (warning)</span>
    </div>
</div>

<div class="progress progress-bar-lg">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
        <span class="sr-only">80% Complete (danger)</span>
    </div>
</div>

<div class="progress progress-bar-xl">
    <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
        <span class="sr-only">20% Complete</span>
    </div>
</div>

The height of the bar you use can be determined by looking at:

  • If you don't have enough space use smaller bars.
  • If the information is important use bigger bars.
  • If a lot of bars will repeat, use smaller bars.
  • If you need to put labels use medium to large bars.

Containers

Containers are simple boxes used for different purposes. We use the default Bootstrap "Well" with a few additions of our own using the color palette. Notice that padding and margins are added using helper classes.

Default well

Small well... Wells have sizes too like well-sm

OSF containers

Flat box, neutral background.
Flat box, light background.
Flat box, dark background.
Round box, neutral background.
Round box, light background.
Round box, dark background.

You can also use the boxes over light backgrounds:

This is a special box.
    
<div class="well well-sm">Small well... Wells have sizes too like well-sm</div>
<div class="m-b-md p-md osf-box">Flat box, neutral background.</div>
<div class="m-b-md p-md osf-box-lt">Flat box, light background.</div>
<div class="m-b-md p-md osf-box-dk">Flat box, dark background.</div>
<div class="m-b-md p-md osf-box box-round">Round box, neutral background.</div>
<div class="m-b-md p-md osf-box-lt box-round">Round box, light background.</div>
<div class="m-b-md p-md osf-box-dk box-round">Round box, dark background.</div>

Tips:

  • For general purpose use neutral background flat box.
  • For menus or sidebars use the round box
  • Use light or dark background depending on how much emphasis the items need to have.
  • Avoid using colored backgrounds with large amounts of text. We have a white background color scheme so we rarely need to use large text with colored backgrounds.

Box shadow

Box shadow is used to create shadow for osf box. It will make the box more obvious to the users. We offer five kinds of shadows to meet the needs of different settings

OSF box shadow demo for white color box

Flat box, neutral background with box-shadow-xs
Flat box, neutral background with box-shadow-sm
Flat box, neutral background with box-shadow-md
Flat box, neutral background with box-shadow-lg
Flat box, neutral background with box-shadow-xl

OSF box shadow demo for light color box

Flat box, light background with box-shadow-sm
Flat box, light background with box-shadow-md

OSF box shadow demo for dark color box

Flat box, dark background with box-shadow-lg
Flat box, dark background with box-shadow-xl

OSF box shadow in non-white background

This is a special box.
This is a special box.

Inputs

Use Bootstrap form styles in all forms as it is.

Text input

  • Add "noresize" class to remove the ability of the user to resize this box. 

<input type="text" class="form-control" placeholder="Text input">

Text area

  • Text area input should be used for long form inputs.
  • Add "noresize" class to remove the ability of the user to resize this box. 

<textarea class="form-control noresize" rows="3"></textarea>

Checkboxes and options

  • Use checkboxes for elements that can have multiple selections.
  • Use options for elements with single possible selection.
  • For short options text you should use ".checkbox-inline" or ".radio-inline" to keep everything in one line 

<div class="checkbox">
    <label>
        <input type="checkbox" value="">
        Option one is this and that—be sure to include why it's great
    </label>
</div>

<div class="checkbox disabled">
    <label>
        <input type="checkbox" value="" disabled>
        Option two is disabled
    </label>
</div>

<div class="radio">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
        Option one is this and that—be sure to include why it's great
    </label>
</div>

<div class="radio">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
        Option two can be something else and selecting it will deselect option one
    </label>
</div>
<div class="radio disabled">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
        Option three is disabled
    </label>
</div>

Selects

  • In general DO NOT USE Selects. Try to find an alternative solution
  • If you have fewer than 6 items consider using options input instead
  • Select works best with large amount of selection options
  • Alphabetize the option list if appropriate -- see more below

<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

Input and form tips:

  • Input elements will generally fill in the container unless size is specified. Try to combine row and column wrappers to maintain responsiveness or use inline and horizontal form styles shown in the Bootstrap documentation.
  • Avoid making form elements too wide, consider other options for layout if the window is too wide.
Bootstrap documentation