Tofi's UI Kit


Typography

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

H1 Bootstrap heading (Semibold 40px)

H2 Bootstrap heading (Semibold 29px)

Body Copy

Bootstrap's global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Alignment Classes

Easily realign text to components with text alignment classes.

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

Lists

Unordered

A list of items in which the order does not explicitly matter.

  • Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

Buttons

Button Tags

Anchor Tags

Full Width Mobile


Forms

Basic Example

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.

Example block-level help text here.

Don't mix form groups with input groups

Do not mix form groups directly with input groups. Instead, nest the input group inside of the form group.

$
.00

Honrizontal Form

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a <form>). Doing so changes .form-groups to behave as grid rows, so no need for .row.

Specific Form Controls

Text Area

Form control which supports multiple lines of text. Change rows attribute as necessary.

Checkboxes and Radios

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

Disabled checkboxes and radios are supported, but to provide a "not-allowed" cursor on hover of the parent <label>, you'll need to add the .disabled class to the parent .radio, .radio-inline, .checkbox, or .checkbox-inline.

Use the .checkbox-inline or .radio-inline classes on a series of checkboxes or radios for controls that appear on the same line.

Should you have no text within the <label>, the input is positioned as you'd expect. Currently only works on non-inline checkboxes and radios. Remember to still provide some form of label for assistive technologies (for instance, using aria-label).

Dropdowns

This dropdown uses the formstone dropdown library. Found here.

There is a z-index issue where the dropdowns appear through each other when opened. To fix that add a style tag with the z-index starting at 100 then decrease each consecutive select by 1.

Without z-index
With z-index
Custom Hover State

Static Control

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

email@example.com

Validation States

@

To do this requires javascript.


Grid

Containers

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

Use .container for a responsive fixed width container.

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

Use .container-fluid for a full width container, spanning the entire width of your viewport.

<div class="container-fluid"> ... </div>

Grid Options

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 Desktops (≥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 12
Column width Auto ~62px ~81px ~97px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

Example: Stacked-to-horizontal

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.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
TODO Add fluid container? http://getbootstrap.com/css/#grid-example-fluid

Example: Mobile, Tablet, Desktop

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

MJenkins Example

Shows all sizes based on screen resizing. Note on mobile the first row has no padding due to the content so they will stay on the one line.

.col-lg-1 .col-md-1 .col-sm-1 .col-xs-1
.col-lg-1 .col-md-1 .col-sm-1 .col-xs-1
.col-lg-1 .col-md-1 .col-sm-1 .col-xs-1
.col-lg-1 .col-md-1 .col-sm-1 .col-xs-1
.col-lg-1 .col-md-1 .col-sm-1 .col-xs-1
.col-lg-1 .col-md-1 .col-sm-1 .col-xs-1
.col-lg-1 .col-md-1 .col-sm-1 .col-xs-1
.col-lg-1 .col-md-1 .col-sm-1 .col-xs-1
.col-lg-1 .col-md-1 .col-sm-1 .col-xs-1
.col-lg-1 .col-md-1 .col-sm-1 .col-xs-1
.col-lg-1 .col-md-1 .col-sm-1 .col-xs-1
.col-lg-1 .col-md-1 .col-sm-1 .col-xs-1
.col-lg-2 .col-md-2 .col-sm-2 .col-xs-2
.col-lg-2 .col-md-2 .col-sm-2 .col-xs-2
.col-lg-2 .col-md-2 .col-sm-2 .col-xs-2
.col-lg-2 .col-md-2 .col-sm-2 .col-xs-2
.col-lg-2 .col-md-2 .col-sm-2 .col-xs-2
.col-lg-2 .col-md-2 .col-sm-2 .col-xs-2
.col-lg-3 .col-md-3 .col-sm-3 .col-xs-3
.col-lg-3 .col-md-3 .col-sm-3 .col-xs-3
.col-lg-3 .col-md-3 .col-sm-3 .col-xs-3
.col-lg-3 .col-md-3 .col-sm-3 .col-xs-3
.col-lg-4.col-md-4 .col-sm-4 .col-xs-4
.col-lg-4.col-md-4 .col-sm-4 .col-xs-4
.col-lg-4.col-md-4 .col-sm-4 .col-xs-4
.col-lg-5.col-md-5 .col-sm-5 .col-xs-5
.col-lg-5.col-md-5 .col-sm-5 .col-xs-5
.col-2
.col-lg-6.col-md-6 .col-sm-6 .col-xs-6
.col-lg-6.col-md-6 .col-sm-6 .col-xs-6
.col-lg-7.col-md-7 .col-sm-7 .col-xs-7
.col-5
.col-lg-8.col-md-8 .col-sm-8 .col-xs-8
.col-4
.col-lg-9.col-md-9 .col-sm-9 .col-xs-9
.col-3
.col-lg-10.col-md-10 .col-sm-10 .col-xs-10
.col-2
.col-lg-11.col-md-11 .col-sm-11 .col-xs-11
.col-1
.col-lg-12.col-md-12 .col-sm-12 .col-xs-12

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 the bootstrap responsive utility classes.

Column Ordering

Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.


Images

Responsive Images

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.

To center images which use the .img-responsive class, use .center-block instead of .text-center. See the helper classes section for more details about .center-block usage.

SVG images and IE 8-10

In Internet Explorer 8-10, SVG images with .img-responsive are disproportionately sized. To fix this, add width: 100% \9; where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.

Responsive image

Image Shapes

Add classes to an img element to easily style images in any project.

Cross-browser compatibility

Keep in mind that Internet Explorer 8 lacks support for rounded corners.

rounded
circle
thumbnail

Full Screen Banner


Videos


Helper Classes

Contextual Colors

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

Text muted

Text primary

Text success

Text info

Text warning

Text danger

Dealing with specificity

Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <span> with the class.

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies - such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the contextual colors are only used to reinforce meaning that is already present in the text/markup), or is included through alternative means, such as additional text hidden with the .sr-only class.

Contextual Backgrounds

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.

Background primary

Background success

Background info

Background warning

Background danger

Caret and Close Icon

Use the generic close icon for dismissing content like modals and alerts.

Quick Floats

Float an element to the left or right with a class. !important is included to avoid specificity issues. Classes can also be used as mixins.

Pull left

Pull Right

Not for use in navbars

To align components in navbars with utility classes, use .navbar-left or .navbar-right instead. See the navbar docs for details.

Center Content Blocks

Set an element to display: block and center via margin. Available as a mixin and class.

rounded

Showing and Hiding Content

Force an element to be shown or hidden (including for screen readers) with the use of .show and .hidden classes. These classes use !important to avoid specificity conflicts, just like the quick floats. They are only available for block level toggling. They can also be used as mixins.

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1. Use .hidden or .sr-only instead.

Furthermore, .invisible can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document.

Screen Reader and Keyboard Navigation Content

Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following accessibility best practices. Can also be used as mixins.

Image Replacement

Utilize the .text-hide class or mixin to help replace an element's text content with a background image.


Javascript Validation

The validation for this form is using parsley.js which can be found here.


Value 1 Value 2

Procurement
Skilled, a large global recruiter installed the Agilyx ERP solution which supports a rapidly growing workforce of over 60,000.
29
Jun
News title here
Three lines of copy can go here. Three lines of copy can go here. Three lines of copy can go here. Three lines of copy can go here Three lines of copy can go here. Three lines of copy can go here.