Style sheets¶

Modular architecture¶

Every project needs some organization. Throwing every new style you create onto the end of a single file would make finding things more difficult and would be very confusing for anybody else working on the project.

// Modular mixins. These should generate no CSS of themselves but merely
// make mixins, variables and functions available and can be reused
// from site to site.
@import "buttons";
@import "shades";
...

// Project-specific modules (again: not producing any actual CSS output)
@import "variables";
@import "colours";
@import "fonts";

// Common site-wide components
@import "reset"; // Browser reset
@import "tags"; // Tag selectors
@import "grid"; // Grid system
@import "classes"; // Common classes (object-based / SMACSS)
@import "ids"; // Common ID-referenced styles (keep these to a minimum)

// App-specific overrides of common ids and classes
// (Try to minimize tag selectors here)
@import "admin";
@import "shop";
@import "blog";
...

// Media-specific overrides of tags, classes, apps and grid.
@import "media";

Style Precedence¶

CSS Specificity is one of the most difficult concepts to grasp in Cascading Stylesheets. The different weight of selectors is usually the reason why your CSS-rules don’t apply to some elements, although you think they should have.

Every selector has its place in the specificity hierarchy. There are four distinct categories which define the specificity level of a given selector:

1. Inline styles (Presence of style in document). An inline style lives within your XHTML document. It is attached directly to the element to be styled. E.g. <h1 style="color: #fff;">
2. IDs (# of ID selectors) ID is an identifier for your page elements, such as #div.
3. Classes, attributes and pseudo-classes (# of class selectors). This group includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
4. Elements and pseudo-elements (# of Element (type) selectors). Including for instance :before and :after.

Browser reset¶

A CSS Reset (or “Reset CSS”) is a set of CSS rules that resets the styling of all HTML elements to a consistent baseline across browsers.

Sass¶

Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of Compass.

$information-phone: "only screen and (max-width : 320px)";

@media #{$information-phone} {
  background: red;
}

@media screen and (max-device-width: 320px) {
  background: red;
}

Compass¶

Compass is a CSS authoring framework based on Sass providing:

• Cross browser CSS3 mixins that take advantage of available pre-spec vendor prefixes
• Mixins for common typography patterns.
• Mixins for other common styling patterns.
• An optional Browser reset component.
• Page layout modules for: grid backgrounds, sticky footers, stretching.

Grid systems¶

Several grid systems exist to make the life of web designers easier. We currently recommend the usage of the Susy responsive grid system, unless Twitter’s Bootstrap is used, which works better with the already included grid system.

CSS Workflow¶

See: https://vimeo.com/15982903

Viewport¶

For modern web development, we have to account for several types of viewports:

1. The visual viewport; the part of the page that’s currently on-screen.
2. The layout viewport; the viewport referenced to in CSS.
3. The ideal viewport, where the layout viewport is equal to the visual viewport.

In responsive designs we generally want an ideal viewport and adjust the elements to the available pixels instead of zooming the whole site. For this we use the viewport meta tag in the HTML header to disable zoom and set the width of the layout viewport equal to that of the device:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

For full-screen applications which are not meant to scroll, also set the height of the viewport to the device height:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">

Device Independent Pixels¶

Device pixel ratio¶

devicePixelRatio is the ratio between physical pixels and device-independent pixels (dips) on the device:

window.devicePixelRatio = physical pixels / dips