Versions Compared

Key

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

Purpose: Write a concise description of this modules purpose.

Category: Give it a few categories

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

Process Phase: Drafting

Version: 1.0

 

...

Description

Give a more detailed description of this module.

 

Deck of Cards
idcomponent_details
startHiddenfalse
Card
iddesktop-usage
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:

  • ...
Card
idresponsive-usage
labelResponsive Usage

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
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.

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:

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.

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 decision.