- Covers FSS Considerations (see below)
- CSS Reset / Normalization
- Responsive layouts
The following classes are used by UIO and Exploration Tool:
- fixed-width containers: 100, 150, 200, 250, 300, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000px
- relative width containers: auto, flex[1-99]
- This may not be a critical feature anymore since frameworks offer flexible and responsive layouts.
- equal-width columns: 2 / 3 / 4 / 5 column layouts.
- fixed-width columns: 100, 150, 200, 250, 300
- flexible columns: flexible-width column to left or right of a fixed-width column
- Turn UL and LI into tabs
- Align: left, center, right
- Active tab styling
- Foundation - replaced by Foundation's Sections. Traditional tabs possible using Top Bar?
- Vertical Menu:
- Turn UL of anchors into a vertical navigation menu
- Active menu item styling
- Grid item layout:
- A fixed height (150px) grid of a list (UL) of images, captions, or other content
- align element left, center, or right
- push / force element onto its own line
- linearization of content
- Foundation is mobile first - default is single column layout (linearized).
- force an element to 16x16 pixels and hides descriptive text.
- Foundation - you can use the thumbnail class and do some mixins so it does similar to a 16x16 icon.
forms and controls
- Apply button styling to an element
- alignment: left, right
- control and label alignment: left, center, rightscrollbars:
- clearfix to remove scrollbars from appearing when padding is used with 100% width elements.
- movable containers that emcompass elements that collectively create a "widget" (i.e. a calendar or search field).
- Foundation - semantically, use Sections?Foundation has a Panel style which is like a callout.
- contains: title, options, and content sections.
- progressive enhancement
- visibility / content hiding
- 5 modes of hiding:
- hidden to browsers and ATs
- hidden to browsers and ATs, but maintaining layout
- hidden to browsers but available to ATs
- hide text and replace with image
- size, spacing between characters
- Bootstrap - defined via
- font loading: serif, sans, monospace, times, courier, arial, verdana
- alignment: left, right, center