Röcssti, a CSS micro-framework

Download Röcssti (CSS, 20kb) Use the Röcssti-Builder

Rö-css-ti?

Röcssti – pronounce Rosh-ti – is my CSS micro-framework. Voluntarily minimalist, simple, lightweight and customizable at will, it is built for responsive sites, whether complex or much simpler.

Röcssti was created to respond to rapid production constraints, with efficiency and qualitative aspects, it is the micro-framework used for all projects of Prezenz web agency.

What is in it?

Although its name might suggest a high concentration of potatoes, it specifically provides:

  • A work organization (via a structure and coding conventions);
  • A good starting point, including some accessibility features, such as skip links to be sure not to forget them;
  • An approach that meets many constraints of modern design and CSS maintainability;
  • A system of reusable and extensible classes, favoring DRY approach;
  • Small best practices and tips that facilitate the design and use of a site;
  • And especially a strong base proven by many achievements in the workplace who use it and constantly feed it.

See websites “Made with Röcssti”

Cool… and how does it work?

<link rel="stylesheet" href="rocssti.css" media="all" />

It’s not more complicated than that. Of course, it’s even better to dive in and customize it. In fact, that’s the whole point.

If you want to start smoothly, you may use the Röcssti-Builder, which will pre-process some values.

If you are a fan of NPM, you can use npm install rocssti.

See examples Study commented CSS code

Is the CSS only in english?

Just for you, there are CSS, LESS, Sass versions, with a mobile-first dedicated Sass version. They are all maintained in French and English. Yes, on Github. You can also make bower install rocssti if you are a fan of Bower, it will download automatically all last versions.

Röcssti on Github Pre-processor versions of Röcssti

But why the weird name?

  1. You probably noticed it, Röcssti was designed with love in the green pastures of Switzerland, which is quite obsessive with the idea of quality, and where you can eat excellent… röstis!
  2. The röstis gave their name to the “rösti barrier” or Röstigraben (literally “rösti ditch”) that mark the difference in mentality between French-speaking Switzerland and German-speaking Switzerland. We talk of Röstigraben when a federal vote in the French speaking region gets very different results than the German speaking region. If you do not understand, look at Switzerland geography lesson by Marie-Thérèse Porchet (french-speaking).
  3. This name is also a poke at Knacss, an excellent CSS micro-framework made by Raphaël Goetter, who gave me a lot of good ideas to create Röcssti.

In short, I could find 42 reasons for calling Röcssti like this, but basically it is because it’s fun, and I do not like to be too serious..

A Röcssti-quote among others in History

♪ ’Cause this is Röcssti, Röcssti night ♫ — Michael Jackson