Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Section
Column
width80%
Panel
bgColor#f6f6f6
titleBGColor#333333
borderStylesolid
titleTablesPage Layout and Grid
borderColor#cccccc
titleColorwhite

Purpose: Write a concise description of this modules purpose Define the Bootstrap grid and show how to use it effectively for desktop layout and mobile responsiveness.

Category: Give it a few categories Page layout, grid

Related jiras: Paste any related JIRA's here, they'll be converted to links automagically.

Process Phase: Drafting

JIRA
columnskey,summary,type,created,updated,due,assignee,reporter,priority,status,resolution
serverKuali: Jira
serverIdbe3acfec-fcc2-335b-8051-b2b053a39956
keyUXI-369

Process Phase:

  •  UXI JIRA Created (insert link above)
  •  Component Specification draft complete
  •  UXI code review complete
  •  Reconcile with UIM and KRAD for differences
  •  Conduct user testing if needed
  •  Routed for review with Kuali UX Working Group and UX/KRAD Working Group
  •  Reviewed with KAI
  •  Rice JIRA Created (in KULRICE Project)
  •  KRAD Implementation complete
  •  Component released (insert rice release version below)

Version: 1.0

 

...

Description

Give a more detailed description of this module.

 

Bootstrap offers a really powerful responsive grid layout based on screen percentages. This component spec will detail how to use it effectively to easily create and maintain layouts. Relying on the Bootstrap grid, and avoiding custom styling will allow your layouts to work as expected in all browsers, and bring in robust responsiveness.

Deck of Cards
idcomponent_details
startHiddenfalse

Responsive Usage

Typically this will match up with the previous section

Provide graphics if necessary.

Quick summary of features:

  • ...

When to use this component:

...
Card
Card
idresponsive-usage
labelResponsive Usage
iddesktopbootstrap-usagegrid
defaulttrue
labelDesktop Usage

Desktop Usage

Example with graphic

Quick summary of features:

  • ...

When to use this component:

  • ...

Maybe offer another example here

Quick summary of features:

  • ...

When to use this component:

  • ...
Bootstrap Grid

Bootstrap Grid

12-columns, automatic responsiveness

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 (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
  • The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
  • If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
  • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

Quick summary of features:

  • Simple, clean columnar layout based on percentages of the screen width for consistent, always working layouts.
  • Built-in responsiveness that adjusts automatically for different screen sizes and devices.
Card
idgrid-options
labelGrid Options

Grid Options

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

 

 Extra small devicesPhones (<768px)Small devices Tablets (≥768px)Medium devicesDesktops (≥992px)Large devices Desktops (≥1200px)
Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpoints
Container widthNone (auto)750px970px1170px
Class prefix.col-xs-.col-sm-.col-md-.col-lg-
# of columns12
Column widthAuto~62px~81px~97px
Gutter width30px (15px on each side of a column)
NestableYes
OffsetsYes
Column orderingYes
Card
idresponsive
labelResponsive

Responsive

The Bootstrap grid is automatically responsive. So long as the grid and its containers are used properly, your layout will become responsive whenever the .sm, .md, .lg breakpoints are hit.

Upon hitting said breakpoint, the Bootstrap grid columns stack and take the width of the container, which is usually 100%. Form fields and in some cases buttons (if specified) will also display: block; and span 100% width of the layout.

Please see the JSFiddle in the Demo section for a working example of this.

Card
iddemos
labelDemos

Demos

HTML

Below is basic yada yada showing yida yida. To add responsive functionality to yada, simply add a class of "uif-responsive" to the yida. Make sure you use the correct code language in the Code Block.

Code Block
linenumberstrue
languagephp
firstline1
<?php
$demo = "World";
echo "Hello, " . $demo . "!";
?> 

CSS

And the custom styles for this table.

Code Block
linenumberstrue
languagecss
firstline1
.red {
    color: #ffff00;
}

JSFiddle

If you've created a JSFiddle or CodePen example, you can place that link (or links) here. Include any notes or caveats.Bootstrap grid markup is simple. Simple use .col-[size]-[num-of-cols] to determine size. As noted above, [size] is either sm, md, or lg. Here's an example of a basic layout using a left-side navigation that's three columns wide, and a main content area that's 9 columns wide. Columns should always total 12.

Code Block
languagexml
<div class="container">
    <div class="col-sm-3">
        <nav>
            Navigation
        </nav>
    </div>
    <div class="col-sm-9">
        <main>
            Main content area
        </main>
    </div>
</div>

JSFiddle

See this JSFiddle for working examples of the Bootstrap Grid.

Card
idaccessibility
defaulttrue
labelAccessibility Considerations
nextAfter0
Section

Accessibility Considerations

Required Level of Compliance:

In order to meet WCAG 2.0 guidelines, these are some considerations that may apply to this component:

1.3.1 Tables are used for tabular data. Where necessary, data cells are associated with their headers. Data table captions and summaries are used where appropriate.

H73 Use the caption to give an overview of the data table. The caption may be positioned off-screen using CSS to hide it visually. Alternatively, the summary attribute may be used to give a brief description of the table data. However, the summary is not included in the HTML5 spec and isn't well supported.
H63 Use the scope attribute to associate header cells and data cells.
H43 Use IDs and header attributes to associate data cells with header cells. (not recommended)

Behavior without scripting:

Detail how this module should function if JavaScript is turned off or borked.

Accessibility Resources:

There are no special accessibility considerations for CSS layouts, so long as the markup remains semantic and error-free.

Behavior without scripting

Since the grid layout included with Bootstrap relies on CSS media-queries rather than JavaScript, so long as the browser can understand media-queries, there's no alternative behavior. If the interface is viewed on an older browser, or one that doesn't recognize media queries, the desktop view will be used.

Accessibility Resources

W3 HTML Validator
WebAim WAVE 

Card
idkeyboard-shortcuts
labelKeyboard Shortcuts

Keyboard Shortcuts

List any keyboard shortcuts. Since this is a web app, we should probably avoid using these.None

Card
idcomponent_discussion
titleResearch and Discussion
labelResearch & Discussion

Research and Discussion

Includes usability research findings and recommendations, information from the UIM discussion page, links, chapters, articles, etc that supports the design decisionThere is an ongoing discussion about potentially using another grid, or appending additional code such as Flexbox or Skeleton. Once that discussion is finalized this component spec will be updated.