Base
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 comes from Normalize.css; an open-source project by Nicolas Gallagher and Jonathan Neal. In their own words:
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 element |
|
h2 element |
|
h3 element |
|
h4 element |
|
h5 element |
|
h6 element |
|
<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
q element
exampleinside
a q element
s element example
small element example
span element example
strong element example
sub element example
sup element example
u element example
var element
example
cite element example
del element example
dfn element and dfn element with title examples
em element example
i element example
ins element example
mark element example
abbr
example
ruby example
Helper Classes
A selection of classes that perform regular tasks.
Responsive helpers.
Pixel sizes are based on 1em being equal to 16px.
Visible Example: Green means visible
Mobile < 48em (768px)
.visible-phone
Mobile < 48em (768px)
.visible-phone
Tablet 48em - 61.1875em (768px - 979px)
.visible-tablet
Tablet 48em - 61.1875em (768px - 979px)
.visible-tablet
Desktop > 61.1875em (979px)
.visible-desktop
Desktop > 61.1875em (979px)
.visible-desktop
Hidden Example: Red means hidden
Mobile < 48em (768px)
.hidden-phone
Mobile < 48em (768px)
.hidden-phone
Tablet 48em - 61.1875em (768px - 979px)
.hidden-tablet
Tablet 48em - 61.1875em (768px - 979px)
.hidden-tablet
Desktop > 61.1875em (979px)
.hidden-desktop
Desktop > 61.1875em (979px)
.hidden-desktop
Other Helpers
.clearfix
- Contain floats without resorting to using presentational markup.
.push-left
- Floats an element to the far left of its parent container.
.push-right
- Floats an element to the far right of its parent container.
.hidden
- Hides an element from both screen-readers and browsers.
.visuallyhidden
- Hides an element visually, but has it available for screen readers.
.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. Useful for logos.
.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.
.fade-out
- Changes an elements opacity to 0 fading it out with a CSS animation.
.fade-in
- Changes an elements opacity to 1 fading it in with a CSS animation.