core.css v0.4.1 – Documentation

Getting Started

To get things going, simply extract the Core package linked below to your application. The package contains all necessary files, including CSS, JS, images, fonts, etc.

Note: This is subject to change. Plans for the near future are to set up a centralized distribution server that will serve the Core styles to all applications that use them. This will enable cross-application caching and other advantages that come with serving resources from another domain.

  1. Resources
  2. Implementation
    1. CSS-Inclusion
    2. Page Structure
  3. Additional Includes
    1. Respond.js
    2. Modernizr

Resources

You can find the Core package in version 0.4.1 here:

Download Core resources, v0.4.1

Implementation

CSS-Inclusion

The core.css file is the heart of the Core styles. It will load all other necessary resources.

CSS inclusion (Location may differ depending on application file structure) 
<link rel="stylesheet" href="css/core.css" />

Page Structure

You only need one page-wrapper to get the default site-width of 984px. This page-wrapper have to be the first child of the body-tag.

page structure 
<body>
    <div id="page">
        ...
    </div>
</body>

Additional Includes – JavaScript Dependencies

The Core styles make heavy use of CSS media queries and CSS3 selectors. Both are generally not supported in some legacy browsers, most notably the Internet Explorer 8 and below.

There are two JavaScript libraries included in the Core package that will enlighten these more stubborn browsers.

Respond.js

The respond.js script is a lighweight (1kb gzipped) tool that will allow Internet Explorer 8 and below to understand media queries, which are integral to the responsive design tools included in the Core styles.

As the script is not needed in browsers other than IE8 and under, you can wrap it conditional comments to prevent more up-to-date browsers from loading it.

Respond.js include in IE-specific conditional comments (Location may differ depending on application file structure) 
<!--[if (lt IE 9) & (!IEMobile)]>
<script type="text/javascript" src="js/vendor/respond/respond-1.3.0.min.js"></script>
<![endif]-->

The script should be loaded as soon as possible after all your CSS includes to minimize layout jumps in the affected browsers.

Modernizr

The modernizr script is mainly a feature detection tool. It will also enable older browsers to display (though not understand) HTML5 elements, (such as the <header> and <article> tags found throughout this documentation).

Modernizr.js include (Location may differ depending on application file structure) 
<script type="text/javascript" src="js/vendor/modernizr/modernizr-2.6.2.custom.min.js"></script>

Note: You can leave this out if you are not going to use HTML5 elements and have no use for JS-based feature detection.