negomi/css3-foundation

A Compass-based CSS3/HTML5 bootstrap for modern, responsive web apps (bundled with fiftyfive-wicket)

55 Minutes CSS3/HTML5 Foundation

This project is a Compass-based CSS3/HTML5 template for crafting modern web applications. We're particularly focused on establishing patterns that work well with server-side frameworks like Rails, Django and Wicket.

To use this project, the following must be installed on your computer:

• Ruby
• RubyGems
• Bundler
• compass gem
• sassy-buttons gem

Feature Highlights

• A fluid, responsive layout following the principles of Responsive Web Design.
• Best practices recommended by the 320 and Up boilerplate project, as well as our own experience developing web applications.
• Integration with the jQuery and jQuery UI JavaScript libraries, as well as 55 Minutes' own set of JS utilities and conveniences.
• A style guide similar to the Twitter bootstrap containing examples of the default styles defined in the project.
• The 1140 CSS grid for rapid prototyping.
• Integration with various icon-font libraries: Font Awesome, Elusive, Entypo and Typicons, with help from Rico Sta. Cruz's Sass Icon Fonts project.
• Ruby version management: if you have either RVM or rbenv installed, this project comes bundled with a .rbenv-version file to make your environment setup easier.

Getting Started

1. Install Ruby, RubyGems and Bundler, or verify that they are already installed.

2. Change into the css3-foundation/ directory in your favorite terminal application and type bundle install.

3. Steps 1 and 2 are one-time-only setup requirements. Hereafter, all you need to do is run the following command from css3-foundation/:

    bundle exec compass watch
   

   This will monitor changes to your source files and recompile the output on demand. To compile the code one time only, type:

    bundle exec compass compile
   

   More details can be found in the Compass documentation.

   If you're interested in using this foundation with the Apache Wicket framework, you'll want to check out our fiftyfive-wicket project, which includes a Maven archetype that bundles all of these CSS3 and HTML5 practices and integrates them nicely with Wicket.

   If you plan to use it with Ruby on Rails, read our recent blog post on integrating Compass and Rails 3.1/3.2.

File organization

Files in this project are organized into directories like so:

css3-foundation/
├── images
├── scripts
│   └── lib
├── styles
│   ├── basics
│   └── shared
└── styles-compiled

Please refer to individual source files for details on what should be included there, but here are some general guidelines for file organization:

• styles/ contains the Sass source files. We use the SCSS syntax for this project.
  • styles/basics/ contains the building blocks of our styles: the colors, the typography, the grid, and the reset stylesheet.
  • styles/shared/ contains application-wide styles like header, footer and form styles. Default styles for the basic HTML tags should also be included here.
• styles-compiled/ contains the compiled stylesheets, the CSS files that we will include in our markup. This directory is not checked into source control, but will be generated by Compass when you run compass watch.
• scripts/ contains all of the project's JavaScript files. Put custom JavaScript at the top level of this directory.
  • scripts/lib/ contains libraries like jQuery and jQuery UI.

CSS rule organization

A single CSS rule set can quickly grow large and unwieldy, so to promote ease of reading, we recommend following a prescribed order for writing your CSS rules. In general, we work from the outside in, from layout to text:

selector
{
  /* Display and positioning */
  display: …;
  visibility: …;
  position: …;
  top: …;
  right: …;
  bottom: …;
  left: …;
  z-index: …;
  clear: …;
  float: …;

  /* Transforms and animations */
  transform: …;
  animation: …;
  transition: …;

  /* Box model/layout */
  box-*: …;
  margin: …;
  outline: …;
  border: …;
  padding: …;
  width: …;
  min-width: …;
  max-width: …;
  height: …;
  min-height: …;
  max-height: …;
  overflow: …;
  clip: …;
  resize: …;
  table-layout: …;

  /* Alignment */
  vertical-align: …;
  text-align: …;

  /* Background/foreground color */
  background: …;
  color: …;
  opacity: …;

  /* Text properties */
  font-family: …;
  font-size: …;
  line-height: …;
  direction: …;
  font-style: …;
  font-variant
  text-decoration: …;
  text-indent: …;
  text-transform: …;
  letter-spacing: …;
  word-spacing: …;
  word-break: …;
  word-wrap: …;
  quotes: …;
  page-break-*: …;
  list-style: …;
  white-space: …;
}

This is of course not required; some teams prefer, for example, to alphabetize the rules instead. The important thing is that whatever your team chooses, there is a consistent, documented pattern.