Documentation

Documentation > Introduction

Introduction

RichCSS is a CSS framework providing default structures for reusable css elements. It’s built around an Architectural Style that organizes your code in a way that allows: reusability of your css, versioning, the use of css plugins and the ease of using it. RichCSS is bringing convention and organization to CSS that anyone can understand and use.

RichCSS is the V2 of ROOCSS. It’s a CSS Framework that makes it easy to organize and use CSS in teams.

RichCSS id driven by a community of individuals that power it's development and use every day. It's an open source project created by Richardson Dackam, hosted, developped and maintained on Github.

Advantages

RichCSS has the following advantages

  • Little efforts to get started
  • A simple set of convention, structure and organization
  • Find classes easily and reuse them
  • Not having to explain how you organized your CSS to someone else
  • Rapidly take over someone’s else CSS code
  • Projects not handcuffed
  • Scalable : can be used by many with no confusion over classes names and structure
  • Versioning capabilities
  • Save Time

What's Object Oriented CSS?

Nicole Sullivan from Yahoo invented the concept of Object Oriented CSS.

The Object Oriented CSS framework is based on 2 main principles: Separation of structure from skin and separation of containers and content. RichCSS differs from OOCSS in many aspects. The separation is extended to the way folders and files are organized and it’s not limited to the grid system. The definition of the “Object” in RichCSS is also very different.

As Nicole explains on her the wiki; In Object Oriented CSS a CSS object consists of four things:

  1. HTML, which can be one or more nodes of the DOM
  2. CSS declarations about the style of those nodes all of which begin with the class name of the wrapper node
  3. Components like background images and sprites required for display
  4. JavaScript behaviours, listeners, or methods associated with the object.

“This can be confusing because each CSS class is not necessarily an object in its own right, but can be a property of a wrapper class.

There is no confusion In RichCSS because in this framework Everything is an object.

Philosophy

RichCSS was inspired by Ruby on Rails so the philosophy it follows comes from Rails:

  1. Everything is an object
  2. Convention over configuration
  3. Stay DRY ( Don’t Repeat Yourself )

How is RichCSS different from other framework such as Bootstrap & Foundation

RichCSS is an organizational framework. Its primary focus is to make it easy to provide an organizational style that make it easy to reuse CSS code. Frameworks such as Bootstrap & Foundation focus on making it easier and faster to get a website done following a defined style. RichCSS doesn't have a defined style but you can use any type of style pr framework with it. You can also use other framework with it.

e.g: There is no such thing as a RichCSS's button while there is a bootstrap button and a foundation button that you can both use on RichCSS when installing the Bootstrap or Foundation parts or adding bootstrap.css or foundation.css to your project.

RichCSS provide a standard format and organization for writting and sharing CSS code. You can use bootstrap, foundation or any other framework with RichCSS but We encourage those using these other framework to write or find version of these framework that follow the RichCSS standard.

You might be able to find bootstrap & foundation parts on cssparts.com. You can Contribute by submitting your own parts for your favourite frameworks..