Tuesday, the 12th of September 2017

Version 4!

Step by step, Röcssti has evoluted since its version 3, released more than a year ago. I didn’t detailled here every update by lack of time, you may follow this on Github.

Version 4: 100%

Here is the complete list of updates and enhancements coming to you with version 4:

New features

  • Added information of current breakpoint based on body::before content, that can be used from JavaScript;
  • Added a lot of responsive atomic helpers (see below about it);
  • Added more aggresive reset on button, input, etc.;
  • Added .nonvisible { visibility: hidden ; } class, very useful for apps;
  • Added a lot of variables for colors, for .button, body, etc.;
  • Added variables to use (or not) clear classes for floats;
  • Added .inline-row { display: inline-table ; } class, also very useful for some layouts;
  • Updates on the Röcssti-Builder, that offers almost same features as Sass version.

A touch of atomic

Röcssti is compatible with a lot of CSS approaches (and never get ashamed to use them in its way). However, with a lot of projects, I note that the atomic CSS brings a lot of benefits, and even meets production constraints (see in french Des tendances intéressantes en « atomique à la main »).

That is why a lot of responsive atomic helpers have been added. They are prefixed by their breakpoint, here are some examples:

  • .onmobile-aligncenter will center the text from mobile breakpoint;
  • .ontablet-pl0 will set up padding-left to 0 from tablet breakpoint, etc.

Some of these helpers can be generated automatically.

Bugfixes, enhancements, deletions

  • button, input, etc. with disabled attribute won’t have mouse cursor anymore (as they are disabled :);
  • The hyphenation system has been enhanced (based on Knacss’ idea);
  • Added default style for [hidden];
  • Removed defaults styles for .button;
  • Enhanced reset4print class;
  • Removed default border style for dialog tag;
  • Updated str-replace function (still written by Hugo Giraudel) Sass version ;
  • Updated some reference URL;
  • Updated comments in Sass version;
  • Fixed a lot of typos.

And for the pleasure, Röcssti website has now a Service Worker and works like a PWA. 4 websites have been added to the gallery.

In a near future

Röcssti is and remains a micro-framework designed to be light, the CSS of Röcssti with a standard build is very light, less than 3kb gzipped and minified. This philosophy is not about to change!

The documentation is going to be updated, following these updates. Other fixes and addings will follow. If you have ideas or suggestions, please open an issue on Github, this will be a pleasure for me.

Thursday, the 2nd of June 2016
(Aquatic Train Battles)

Röcssti reached its version 3!

It wasn’t expected so soon, but for some reason, a slight delay of five hours in an airport has freed up time!

Here is the list of additions:

  • Added new variables for body colors (background color and text color);
  • Added ability to choose the units for typography (em, rem orrem with fallback in em);
  • Added a breakpoint for tiny screens;
  • Added ability to enable or disable the reset of 62.5% on the html tag (which simplifies calculations for rem, 1.4rem are equivalent to 14px);
  • And various fixes/improvements on the comments, fixed on some Sass variables, etc.

The first good news is that this major release does not break backward compatibility with CSS previously created with Röcssti (except on versions with pre-processors, but simply adapt the first two files, and everything will be fine).

The second good news is that the Röcssti-Builder also offers all these features, in both languages (PHP becomes a CSS preprocessor…).

I would like to thank people for their suggestions and discussions on Twitter.

Sunday, the 6th of March 2016
(Voldemort has been fired up)

Gulp tasks, NPM and fixes

If you follow the activity of Röcssti on Github, you have noticed a lot of updates these days.

  • Röcssti is now available on NPM: Röcssti on NPMjs.com;
  • Gulp tasks are proposed to minify CSS and compile Sass and LESS versions;
  • The tree file of Github repositery has been updated (src and dist folders);
  • And two minor fixes have been added (the .no-scroll class and an enhancement of the typographic fix for some form elements).

Thursday, the 31st of December 2015
(Flawless victory)

https for this website and some minor updates

The main update for this website is a full move to https, thanks to the great initiative Let’s Encrypt which proposes a system to have free SSL certificates, and also thanks to my hosting Infomaniak (partner of the initiative) which quickly deployed this feature, in a quite practical way for the user, me.

This last update results in a a nice note from Dareboost, a tool which tests the quality of websites.

Two minor updates have been made on Röcssti: a quick fix on button typography and the removal of the last remaining id in the CSS (for all versions).

By the way, I wish you a happy New Year 2016!

Sunday, the 15th of November 2015
(Paris, I love you)

Röcssti-Builder and MIT license

Several updates have been made this week-end. The most important one is a new tool named the Röcssti-Builder. It will allow you saving time by preprocessing your CSS based on Röcssti.

To sum up, you specify some font sizes for tags like h1, if you need the RTL option, etc. and the Röcssti-Builder will build your CSS with all these parameters already set up.

And as we are always too serious (in our job), the Röcssti-Builder will randomly and freely add a Röcssti-quote, only for the pleasure of smiling.

Second important update, Röcssti is now distributed under MIT license: you are free to use it as you want, if you give appropriate credit and provide a link to the license (and the author can be happy to know that you are using Röcssti).

From bugs side, a small fix for RTL has been added, and some discrete fixes for indentation and typography have been made, mostly in english-speaking versions.

Thursday, the 20th of August 2015
(beginning of truffle pig year in papu calendar)

Sass mobile-first version in english

The mobile-first version of Röcssti is now available in english, on this website and on Github.

Some missing translations in french versions have been fixed too.

Tuesday, the 11th of August 2015
(commemoration holidays)

The abbr and Firefox 40

Today, Firefox 40 has been released. If you use the abbr element, as I do it here when I’m speaking of CSS, Röcssti includes an update that will not be minor for you.

Firefox was styling by default the abbr with border-bottom: dotted 1px; (so Röcssti does to have the same render on other browsers). However, Firefox 40 is styling it now with text-decoration: dotted underline by default. To sum up, if you are using this tag, you can have two ugly dotted lines below an abbr.

As the render text-decoration: dotted underline is not fantastic compared to border-bottom: dotted 1px;, Röcssti chooses to keep border-bottom: dotted 1px; for abbr and to remove Firefox default styling with text-decoration: none.

If you follow the updates of Röcssti on Github, you might have noticed that the update has been made 2 weeks ago, just to let you react easily if you were concerned by the problem.

A minor fix for a wrong value has been also fixed in the print section (minor update).

Thursday, the 25th of June 2015
(Battle of the Pelennor Taxis in Paris)

Organization, some facts

Maybe you already know the tool CSS Stats, which analyses your CSS and provides informations on them: uniques properties Vs total, specificity graph, etc.?

As for all statistics, of course you have to be able to read and understand them, however it is always interesting to get some trends on your work.

In fact, the organisation of Röcssti can provide also some interesting feedback: in which ratio a project is consistent or needs some specificities. Let’s take the organization of Röcssti:

* 05 -- layout & modules
* 06 -- structure (page / skip links / header / main content / footer)
* 08 -- inside content
* 10 -- tablets - major breakpoint
* 12 -- mobile - major breakpoint

Let’s go deeper into it:

  • first the modules that can be reused everywhere on the site: boxes, etc.;
  • then global layout (which are going to shape these modules, which also invites you to define module as independant as possible;
  • then specific elements (for some pages, for example, the home page is often a particular case, this website is not an exception);
  • Then tablets and mobiles, etc.

To sum up: modules, global structure, specific. Which is – strange coincidence – what you will find in major breakpoints, example:

@media (max-width: 40em) { /* equiv 640px */
   * layout/modules
   * global structure adaptation (page / skip links / header / main content / footer)
   * inside content (other styles for pages)

Just to avoid or limitate the creation of non-necessary styles. If you have a look at the quantity of styles in each part, I can provide informations that can be useful for the project.

  • A lot of page-specific styles? You might need to modularize some elements (if possible).
  • Very little number of line in global structure? The website has been easy to build with elements of layout section. Or the dev has misplaced some elements (which is another problem).
  • The section modules has a lot of elements and the page-specific section is empty? It seems to be great: global styles are very well used and the layout seems to be globally consistent.
  • Etc.

Of course, it is not an end in itself, some projects might need page-specific styles, and it is not an issue. However, these informations may sometimes warn you: too many page-specific styles could be changed into more global one’s to make website more consistent (one of OOCSS precepts), etc.

To sum up, be very careful with the organization of your CSS, it is really important. This will also make you react if something unusual happens!

Monday, the 26th of April 2015
(transition to Summer time on Westeros)

Vertical Rythm, my love…

Röcssti has now 3 different variants to calculate vertical rythm on preprocessor versions.

These 3 ways are inspired from the Vertical Rhythm Tool, created by Pascal, which I would like to thank for this fantastic tool.

By the way, all the versions are now using a vertical rythm based on margin-bottom, more simple and practical. LESS and Sass versions can choose their variant using the variable vertical-rythm, and all the values will be computed automatically, without any effort.

The variable section of the LESS version has been also cleaned up.

Tuesday, the 14th of April 2015
(Death of Schrödinger’s cat… or not)

Changes on LESS version + alignments

Big update on the LESS version of Röcssti (english and french): its structure is now the same as the Sass version, in split files (suggestion made by Étienne).

For all versions, alignments mostly used by table-layout (.aligntop, .alignmiddle, .alignbottom) have been moved into “layout” section, just below the table-layout part, in order to facilitate the use of table-layout (suggestion made by Samuel and solution proposed by Thomas).

An unnecessary comment has been removed from Sass versions.

In this site, a small update has been made in the guideline to better explain the example with the form and inline-block, and direct links to tabs (example: to the typography tab of the guideline) had a small bug (the tab was not highlighted), now fixed (problems solved thanks to Samuel).

Friday, the 3rd of April 2015

English-speaking version of Röcssti

Here it is, now this website speaks french and english.

A big thanks to John Elbing for his help on the translation, and Alain Riad for adapting the layout.

Wednesday, the 23th of March 2015
(End of the world in Paco Rabanne calendar)

Additions for table and lists

Not a big revolution in these two updates, just the addition of unstyled class which is dedicated for ul/ol lists without any style.

From “table-layout” side, a feature has been added with the line class (which makes a display: table-row;) to create a line in a .row (same as tr tag).

No need to worry about the actual use of .row and .col: it changes nothing, anyway the examples provided in the guideline are still exact (and I use them myself).

To sum up, if an element with .row doesn’t have as direct child an element with .line but with .col, the browser will automtically create it: these elements are named anonymous elements. It is the same case if an element with .line doesn’t have a .row as parent, it is created in an anonymous way.

Then, why add it? In some cases, you can take advantage of some properties like border-collapse, which can simplify some CSS constructions (see this example).

You are probably using anonymous elements without knowing it.

Wednesday, the 18th of February 2015
(Astral conjunction Moon/Saturn/Susan Boyle)

Winter cleanup

After a relative calm period, many small structural changes and a cleanup for Röcssti have been made.

  • Module place in section Layout/Modules is clearly indicated by a structure comment…
  • … and this update has been propagated to breakpoints sections.
  • A lot of code examples have been put into comments.
  • A tiny bug has been fixed in mobile-first version.

Wednesday, the 10th of December2014
(un-birthday day of the Hatter)

Bulk news

  • Röcssti website is going to have an english-speaking version.
  • Hyphenation is still available, but has been disabled by default.
  • And this “über-wonderful” website uses CSP (for your security and my curiosity), thanks to Damien Jubeau of Dareboost.

Tuesday, the 4th of November 2014
(The day after yesterday)

First modifications

Several suggestions were made on Github, in details:

  • HTML5 reset has been refined for audio, canvas, progress and video (displayed in inline-block);
  • box-sizing is set up by default;
  • a typo has been removed.

A great thank for these suggestions, do not hesitate if you have others.

Monday, the 3rd of November 2014

Launch of new Röcssti website

It is beautiful, nice, surely not perfect but there it is. Now, I will be able to tell you to “read the manual”.

A big thank to Fabien Sauter for this fresh design.

Tuesday, the 23th of September 2014
(beginning of rottweiler year in chinese calendar)

Media-queries use em

I was doing it for a long time, but I forgot to suggest it in CSS versions, media-queries are now defined in em. Review your division by 16, it will be very useful.

Wednesday, the 10th of September 2014
(Thermidor month)

box-sizing: border-box suggestion

As indicated in the comment, if you don’t care about IE7 and lower (and this is a good idea), you may activate box-sizing with border-box value. This box model simplifies the creation of responsive websites.

Standard box model gives for an element: real width = width + padding + border. In other words, you can’t put two blocks that are 50%-width aside with a padding, because they will be wider than 50%, and could’t stand aside.

With box-sizing: border-box, whatever padding value you will use, width will be 50%. No need to tell you how easier it will be, even if it is possible to deal with standard box model.

Up to you to use it… or not.

Sunday, the 7th of September 2014
(07/09/2014 = 7 + 9 - 2 = 14, it’s a trap)

Added svg tag

Inline svg can be quiet, they will adapt themselves to their container without overflowing.

Here a spatiotemporal weakness, Great Scott!

Wednesday, the 16th of October 2012
(First Age in the Middle-Earth, year 42)

Birth of Röcssti

Yes, it has to start sometime.