Browsers

The Markup Framework is extensively tested with these web browsers:

  • Internet Explorer (9, 10, 11)
  • IE Mobile (latest)
  • Chrome (latest)
  • Chrome for Mobile (latest)
  • Firefox (latest)
  • Firefox for Android (latest)
  • Safari (latest)
  • Safari for iOS (latest)
  • Opera (latest)
  • Opera Mobile (latest)
  • Android 4.4 browser

This framework targets modern, standards-compliant web browsers. You should not use this framework if you still need to support Internet Explorer < 9.

Usage

There are four parts to the Markup Framework:

  1. Reset
  2. Elements
  3. Layouts
  4. Widgets

To start a new web design, start with the reset and elements style sheets, and one layout. Finally, choose one or more widgets – commonly occurring user interface patterns such as navigation menus, sidebars, and footnotes.

Each component has its own style sheet. We recommend keeping them separate while you develop a new web design. This makes it easier to change things.

<link href="reset.css" media="all" rel="stylesheet" />
<link href="elements.css" media="all" rel="stylesheet" />
<link href="layouts/1col-a.css" media="all" rel="stylesheet" />
<link href="widgets/box.css" media="all" rel="stylesheet" />
<link href="widgets/intro.css" media="all" rel="stylesheet" />
<link href="widgets/legal.css" media="all" rel="stylesheet" />
<link href="widgets/logo.css" media="all" rel="stylesheet" />
<link href="widgets/navbar.css" media="all" rel="stylesheet" />

Notice that the reset style sheet comes first, followed by elements, then layout and widgets. The order is important for proper style cascades.

When your design is ready for production, merge and minify the style sheets into a single cached file.

<link href="cache/2014-01-20.min.css" media="all" rel="stylesheet" />

The Markup Framework provides only a starting point for new web designs. It is not intended for production as is. Choose the layout and widgets that you need, and develop your own web themes from there.

You are also free to extend the style sheets with variables and mixins from your preprocessor of choice: Less, Sass, Stylus, etc.

Follow

For news and updates, follow us on Twitter @newvintagemedia. Comments and suggestions to hello@newvintagemedia.com, please.