Organization of reimagine.css

reimagine.css

1. Normalize
2. Global styles
3. Global "helpers"
4. Layout/Grid (and media queries)
5. Typography and content
6. Theme
7. Components

Normalize

normalize.css. Just to start with stable foundations.

Global styles

Global styles can be summarized as "styles with single element selectors".

For example:

* {
  content-sizing: border-box;
}

body {
  font-size: 16px;
  line-height: 1.2em;
}

/* ... */

table {
  border-collapse: collapse;
}

/* ... */

a {
  text-decoration: none;
}

a:hover, a:active, a:focus {
  text-decoration: underline;
}

GOOD:

• Styles that are not browser defaults, but that we want to have on all instances of an element (eg, border-collapse on table)
• Default styles that we don't want on all the elements (eg, text-decoration on a)
• Base styles (eg, font-size and color on body) that we want to cascade

BAD:

• classes, ids, anything that is not a tab name
• nested selectors (unless they are nested by nature, like ul li)
• styles that we do not want on every single element on every single site

Global "helpers"

I call helpers classes that provide a set of styles that we reuse often on many different types of elements.

Examples:

/*
 * Clearfix: contain floats
 */ 
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

/* ... */

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

GOOD:

• small snippets
• class based
• one level of selectors max
• COMMENTED CODE, with examples

BAD:

• id, tag name selectors
• not generic
• defining styles that may cascade to children elements

Layout/Grid (and media queries)

This part should define a set of rules that can be used to easily create a responsive layout.

Example:

.container_12 {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}

/* ... */

.container_12 .grid_5 {
  width: 380px;
}

/* ... */

.container_12 .prefix_4 {
  padding-left: 320px;
}

(note: this is just a rough example, and does not necessarily represent how it will be implemented)

GOOD:

• defining rules that define vertical and horizontal placements
• defining a set of typical layouts we have across all the apps (eg, "full width body", "body with sidebar", etc.)
• COMMENTED CODE, with examples
• defining versions for all the media elements
• writing HTML that can be used as test for the fluidity of the layouts
• although nesting makes sense here, we should be careful not to nest things too deeply. We should try to use neat's span-columns(X of Y) + a little bit of documentation to keep our selectors less than 3 levels deep.

BAD:

• defining page/site specific layouts
• defining components layouts (see components)
• forgetting that IE8 does not support :last-child
• forgetting about some of the media
• pixels, absolutes...

Typography and content

This part includes:

• fonts declarations
• the flow of text-based content

Fonts

Styles related to the inclusion of custom fonts. Should define all the fonts versions and sources.

// scss + bourbon
@include font-face(SourceSansPro, '/path/to/font-Regular');
@include font-face(SourceSansPro, '/path/to/font-Bold', bold);
@include font-face(SourceSansPro, '/path/to/font-Italic', normal, italic);

GOOD:

• include all the versions (normal, italic, bold...)
• use (bourbon) helpers, because the syntax is really ugly and easy to mess up
• avoid as much as possible adding new fonts.
• Use native fallbacks

BAD:

• add fonts only used on one site, one section, or page...
• typekit.

Flow

Flow of the content is how elements place and space next to one another.

It's something that should be taken into consideration for every single component we build, but "text" content should have a pre-set, which should be thought through enough so we can always count on it.

Resources:

• Compose to a vertical rhythm
• Vertical Rhythm in Typography
• Compass' typography/vertical rhythm

This is one of the cases where using ems and being independent of the size of the font in px helps a lot.

Extra resources

• Viewport sized typography
• Interactive Guide to Blog Typography

Theme

This is all about colors, sizes, go crazy. The theme name is "ChallengePost".

Really be careful about bleeding/cascading styles here. Also, there's no good reason for defining font-sizes here.

This section is very tied to Components

Components

Components are "widgets", or reusable and composed bits of HTML.

Examples:

.button {
  border: .3em solid transparent;
  background: background(linear-gradient(blue, teal) left repeat);
  /* ... */
}

/* ... */

.form-large {
  fieldset {
    display: block;
  }

  .form-label-inline {
    display: inline-block;
    /* ... */
  }

  /* ... */
}

GOOD:

• carefully name the CSS elements.
  • Good examples of naming conventions:
    • Twitter Bootstrap
    • OOCSS
    • SMACSS
• COMMENTED CODE, with examples
• define all the states
• prefer class names to tag names

BAD:

• "bleeding"/cascading styles. ie, unintentionally style elements within (or worse, outside) the component

Examples:

form label { 
  font-weight: bold;
}

/* ... */

.some-section {
  li {
    font-size: .75em
  }
}