Elements and CSS Classes used in Site Pages
Site content
Tables
For tabular data.
Note: we're phasing out the use of tables that are purely for layout, but we still have some inherited from old code that are lying around, so those are still included here.
| Col 1 | Col 2 | Col 3 |
|---|---|---|
| entire row is striped odd | odd (row) | odd (row) |
| entire row is striped even | even (row) | even(row) |
| only one cell is striped odd | blah | blah |
| only one cell is striped even | blah | blah |
(Like in /manage/tags -- but is this a table, or is it just layout?)
| Category 1 | 1 |
|---|---|
| Category 2 | 2 |
| Category 3 | 3 |
table.grid
| Col 1 | Col 2 |
|---|---|
| 1-1 | 2-1 |
| 2-1 | 2-2 |
Tabbed content
Used in, e.g., the settings pages
- Tab 1
- Active tab
- (disabled)
Brief information about tab 1
Brief information about tab 2
Forms
simple-form
table-form
choice-list
highlighted simple-form
Buttons / Actions
action-bar extends across the whole page:
action-box displays a box surrounding the list (ul) of elements it contains:
Note: probably will be removed in favor of a consistently styled fieldset containing the submit button once we have all the markup fixed
(consider merging the two into one consistent display?)
collapsible subheader
Section Header 1
Section Header 2
Highlights
- item 1
- item 2
- item 3
.searchhighlight
Some search results with highlighted text. A highlighted link
Other Basic HTML Elements
h1: automatically inserted as a page title on every page
h2
h3
h4
h5
h6
- item 1
- item 2
- item 1
- item 2
- term 1
- definition 1
- term 2
- definition 2
quoted textcite
blockquoted text
code
Link Visited Link
| Col 1 | Col 2 |
|---|---|
| row 1 | row 1 |
| row 2 | row 2 |
| row 3 | row 3 |
| row 4 | row 4 |
Misc / accents
.preview-image:
comment table
| cmtbar odd | cmtbar odd screened | cmtbar odd highlight |
| cmtbar even | cmtbar even screened | cmtbar even highlight |
.column-table: very rarely used (only in managing tags)
| label | etc |
|---|---|
| label | more etc |
.disabled
.read
.detail
.note (merge with detail?)
.status-hint (for noting current status, and hint of actions to take)
User content
| Col 1 | Col 2 |
|---|---|
| row 1 | row 1 |
| row 2 | row 2 |
| row 3 | row 3 |
| row 4 | row 4 |
Things that are lacking:
- Some kind of consistent appearance for landing pages when viewing a security filter you're not allowed to see, or a tag that doesn't exist
- Need to figure out what to do for pages like change password, where the highlight box looks awkward extending across the entire page