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.

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.

font-size: 2rem;
margin: 1.34rem 0;

font-size: 1.5rem;
margin: 1.245rem 0;

font-size: 1.17rem;
margin: 1.17rem 0;

font-size: 1rem;
margin: 1.33rem 0;

font-size: .83rem;
margin: 1.386rem 0;

font-size: .67rem;
margin: 1.561rem 0;

<hr/> elements have been tweaked slightly though to allow developers to more easily style them. For example:

Inline Typographical Elements

<q>q element <q>inside</q> a q element</q> example

<small>small element</small> example

<span>span element</span> example

<strong>strong element</strong> example

<sub>sub element</sub> example

<sup>sup element</sup> example

<var>var element</var> example

<cite>cite element</cite> example

<del>del element</del> example

<dfn>dfn element</dfn> example

<dfn title="Title text">dfn element with title</dfn> example

<em>em element</em> example

<i>i element</i> example

<ins>ins element</ins> example

<mark>mark element</mark> example

<mark>mark element</mark> example

<ruby>ruby</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

Hidden Example: Red means hidden

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.

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.

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.