Common Style Inventory
Index
The idea here is to collect a lot of standards layouts in this area so they can be referenced for all portal projects. More styles will be added as we find they are needed. This page is best used by viewing its source code to see how each of the examples is built. In all these examples, the <blockquote> tag is merely for offsetting the code and not intended to be included in the examples themselves.
Testing
HTML5 Validation
All content should be displayed using valid HTML5 markup. Validate the code your application creates by using the W3C Markup Validation Service. Copy the source code from your page and use the "Validate by Direct Input" option in the validator site. (This bypasses the problems with scanning applications that live behind the portal login.) Alternatively, you can save a copy of your HTML5 output to another webserver and validate it using the default method.
Even after your code has been completely validated, the W3C Validator service continues to give the warning "Using experimental feature: HTML5 Conformance Checker." It basically means their service is still in development.
Accessibility
Once a page has been validated for HTML5 compliance, it should then be tested for accessibility using the Web Accessibility Evaluation Tool. This service requires that a copy of your output HTML be hosted on a webserver outside the portal for testing. Our targets are 0 errors and minimal alerts. Errors are obvious problems, but alerts can sometimes be false alarms. Rules for accessible code are often ambiguous and difficult to scan for automatically. When in doubt, go ahead and fix the alerts, too.
Sometimes an element that is required for accessibility is not necessary to be displayed. Instead of omitting it, you can move these elements off of the screen by using class="offscreen" as an attribute. This removes the element from view, but still keeps it in the page's flow for screen readers.
Browser Identification
Sometimes your code will not function the same way on one browser that it does on others. If want to alert people who are using the faulty browser that they may need to use a different one, you'll need to identify which browser they are using.
You are using other.
Tools
Firefox: Alt + Command + m
This handy key combination converts the Firefox content panel into a resizable area with height and width dimensions, customizable presets, and even a built-in screenshot maker. This is great for testing a page's responsiveness across different screen sizes.
Regular Text
Text not associated with any other elements should usually be in <p> tags. Use paragraphs to separate paragraphs of text rather than tossing in <br>s everywhere.
This paragraph uses class='generated' to make the text smaller and italic. This is the style we use for statements like "This report was generated at 12:34:56 p.m. on July 17, 2014."
Links
Most links do not need special styling, but there are some notable exceptions. Some applications have defined icons that are associated with certain links: Examples include links to maps, dates and times, etc. If your application needs a specialized icon, please let me know.
Links using the standard attribute target='_blank' to open in a new window receive a special icon indicating this action. If you already have another icon associated with the link, you may use a different target value such as target='newwindow' and the new window icon will not appear on that link.
Linkify is a javascript tool that can convert plain text URLs into links. The following URL is *not* linked in the HTML - https://github.com/SoapBox/linkifyjs/blob/master/README.md. Code for using Linkfy is at the bottom of the source code of this page.
Details / Summary
One of the new HTML5 tags is <details> which, along with its partner <summary>, allows you to create a simple expandable section without the need for additional javascript:
Here is the summary
The rest of the content is available when a user clicks the summary.
Tabs
If you need to conceal part of your content behind one or more tabs, this is the simplest tabs example I could find that didn't require any javascript. It's responsive and passes the accessibility test with only a warning about the use of radio buttons outside of a fieldset. (It's not wrong, but it should be avoided if possible.)
Special Formatting
1,000 |
500 |
1,500 |
- class="currency" : for dollar amounts, aligns number to right and adds "$"
- class="total" : for the sum of a column of numbers, draws line above the number signifying this is the total
- class="currency total" : combines properties for currency and total for a column of dollar amounts
Icon Links
If you want to link an icon instead of text, there is a particular construction that you'll need to use.
<a href="whatever.html" class="icon-classes"><span class="offscreen"></a>
The classes used must match something already defined in the CSS. Our practice has been to combine a class of "icon" (which defines all the styles these icons will have in common) with a second one that specifies which image to use. Here are some that we have defined so far.
Open in a new window Close window Print Email Refresh Whatever this means in its context Whatever this means in its context
View the source of these for the code. Note that I have also added a "dkblue" class in case we want to extend the icon set to use different colors in the future.
Miscellaneous
Sections
The <section> tag can be used to break up pages into manageable groups of related content. Extra space is added between sections. Use class="border" if you want a line separating sections. By default, sections have a limited width so that they don't span the entire width of wide screens. This can be overridden in the style portion of your page with #main section {max-width: none;}.