Normalize
Responsive provides lots of building blocks that are specifically designed to speed up your development by boilerplating common components from normalized styles.
The base CSS for this has been carefully adapted from Normalize.css; an open-source project by Nicolas Gallagher and Jonathan Neal.
Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It's a modern, HTML5-ready, alternative to the traditional CSS reset.
Typography
Responsive does not add any additional styles to basic typographical elements such as <p/>
. Header tags and other elements conform to cross-browser normalized standards.
Header Element | Default Dimensions |
---|---|
h1 |
|
h2 |
|
h3 |
|
h4 |
|
h5 |
|
h6 |
|
<hr/>
elements have been tweaked slightly though to allow developers to more easily style them. For example:
Responsive also adds some light styling to code driven elements. See Code for examples of that styling.
Inline Typographical Elements
Example
Code |
---|
q elementexampleinsidea q element
|
small element example
|
span element example
|
strong element example
|
sub element example
|
sup element example
|
var element example
|
cite element example
|
|
dfn element example
|
dfn element with title example
|
em element example
|
i element example
|
ins element example
|
mark element example
|
abbr example
|
ruby example
|
Visibility helpers.
These helpers allow you to toggle the visibility of elements as the viewport scales. rem values are calculated at the browser body default of 16px = 1rem.
Visible Example: Green means visible
< 37.5em
.visible-xxs
< 37.5em
.visible-xxs
37.5em to 48em
.visible-xs
37.5em to 48em
.visible-xs
48em to 62em
.visible-s
48em to 62em
.visible-s
62em to 75em
.visible-m
62em to 75em
.visible-m
> 75em
.visible-l
> 75em
.visible-l
Hidden Example: Red means hidden
< 37.5em
.hidden-xxs
< 37.5em
.hidden-xxs
37.5em to 48em
.hidden-xs
37.5em to 48em
.hidden-xs
48em to 62em
.hidden-s
48em to 62em
.hidden-s
62em to 75em
.hidden-m
62em to 75em
.hidden-m
> 75em
.hidden-l
> 75em
.hidden-l
Extra Visibility Helpers
These extra utility classes help you perform addition visibility tasks.
.hidden
- Hides an element from both screen-readers and browsers.
.visuallyhidden
- Hides an element visually, but has it available for screen readers.
.visuallyhidden.focusable
-
Extends the
.visuallyhidden
class to allow the element to be focusable when navigated to via the keyboard .invisible
- Hides an element visually and from screen readers, but maintain layout.
.ir
- Hides an elements text so that a background image can be used instead; requires the height of the element to be set via CSS to work. Useful for logos.
Layout Helpers
Responsive also comes bundled with utility classes help you layout elements within the grid columns.
Floating Classes
Push or pull elements floating them to the extremes of their immediate parent. Add the class .clearfix
to the parent element to contain floats without resorting to using presentational markup.
.push
.pull
Heads Up!
Both .push
and .pull
have .push/.pull-{grid range}
and .push/.pull-{grid range}-only
variants for each grid range.
Display Classes
The following classes are available for changing the layout of elements
.block
- Changes an elements display style to block.
.inline-block
- Changes an elements display style to inline-block.
.inline
- Changes an elements display style to inline.
Heads Up!
.block
, .inline-block
, and .inline
have {display}-{grid range}
and {display}-{grid range}-only
variants for each grid range.
Text Layout Helpers
Responsive provides methods for lining up text within a container
The following classes are available for changing the layout of text
.text-push
- Lines up text to the right hand side of the container. Left in rtl mode.
.text-pull
- Lines up text to the left hand side of the container. Right in rtl mode.
.text-center
- Lines up text to the center of the container.
Heads Up!
.text-pull
, .text-push
, and .text-center
have {text}-{grid range}-{align}
and {text}-{grid range}-{align}-only
variants for each grid range.