The Markup Framework introduces a brand new reset style sheet.

The reset style sheet was developed specifically for the Markup Framework, and all other style sheets are dependent upon it. You should not swap the Markup Framework's reset style sheet for another. Doing so will change the presentation of elements, layout – everything!

The reset style sheet does lots of things. But these are the most important bits…

White space

Margins and padding on every element is set to zero.

* {
    margin: 0;
    padding: 0;
}

The elements, layouts and widgets style sheets reapply margins and padding to some elements. But the reset style sheet makes sure that there is never any top margin on the first child of any parent element, nor any bottom margin on the last child of any parent element.

*:first-child {
    margin-top: 0 !important;
}


*:last-child {
    margin-bottom: 0 !important;
}

The purpose is to ensure that the white space around elements is always determined by the elements themselves and never by their children. This makes it much easier to keep control over the spacing between different parts of a web interface. And it means that layouts remain completely independent of the elements and widgets that are nested within each layout zone.

Floats

Floats are commonly used in layouts. But there's a problem. Elements that contain only floats will have no height. This is how CSS is meant to work, but it is often undesirable behavior in layouts.

We tend to want layout zones to always fully encapsulate all of their content.

The Markup Framework's reset style sheet takes care of this by applying the well-known clearfix hack to every

element. 

div:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}

As long as you use divs exclusively for layouts and to encapsulate widgets, then you don't have to worry about clearing any inner floats. Layout and widget containers will always wrap fully around their contents.

Typography

The Markup Framework's reset style sheet strips out all default styles for headings, paragraphs, lists, and other typographic elements. Bullets are removed from lists, underlines are removed from hyperlinks, and even text does not appear bold.

What you are left with resembles a plain text document – see for yourself.

The idea is that the elements style sheet starts with a clean slate. You have to explicitly define every style that you want to include in your web design. You can't rely on browser defaults – there aren't any.

And the reset style sheet makes it much easier to define custom styles. It introduces more efficient and more consistent style cascades. For example, preformatted text blocks and tables are made to inherit all of their style properties from body, in keeping with other typographic elements. And the reference font size for everything – paragraphs, headings, tables, even buttons and textareas – is changed to 10px. This makes it easier to set sizes in ems. For example, to give something a font size of 15px, we divide 15 by 10 to get 1.5em. Simple.

h2 {
    font-size: 1.5em; /* 15px (15/10) */
    margin-bottom: 1em; /* 15px (15/15) */
}


div.layout.banner {
    margin-bottom: 2em; /* 20px (20/10) */
}

Other typographic changes include:

  • Nested lists adopt the same font size of the parent list.
  • The small tag is changed to a block-level element, because it is commonly used as such.
  • Font smoothing is enabled in browsers that support it.
  • Text wrapping is disabled for preformatted text blocks.
  • Table borders and cell spacing are removed.

Forms

As with typographic styles, default browser styles for forms, buttons and input controls are removed as much as possible – see for yourself.

So when you design form, inputs, buttons, and other interactive elements, you are starting from scratch. For example, if you don't want borders around buttons by default, there's no need to remove them. The reset style sheet has already taken care of it.

Other effects of the Markup Framework's reset style sheet on forms and controls include:

  • In Safari, search boxes look like normal text boxes again.
  • Textarea resizing is disabled.
  • And various other cross-browser inconsistencies are ironed out.

Print

A key aim in developing the Markup Framework was to make it easier to create print-friendly web pages.

So the reset style sheet sets up some initial print-specific styles, so there's less for you to think about when you start work on a new web design.

When a document is printed, the Markup Framework's reset style sheet will:

  • Clear backgrounds, box shadows, and text shadows.
  • Remove underlines from hyperlinks, and print the link URLs in brackets.
  • Hide forms, inputs, buttons, audio, video, and other interactive elements.
  • Apply appropriate page breaks, orphans and widows properties to typographic elements.

Plus, there's a useful modifier class called -noprint which you can use on any element or layout zone to stop it from being printed.

Miscellany

The Markup Framework's reset style sheet also:

  • Provides some polyfills, such as for the hidden attribute.
  • Keeps the vertical scrollbar visible, even on short pages.
  • Makes images, audio, video and other multimedia objects responsive.

And more. We recommend that you read through the comments in the reset.css file itself before using it.