Guideline of Röcssti, examples

Layout

Röcssti offers various systems to manage common positionning. Some background colors and/or borders have been added to the code, in order to better understand the examples.

Floats

.left and .right classes can transform an element into a floating. .mod class can create “block formatting context”, it will avoid floatings from overflowing their container.

<div class="mod"> 
  <div class="left w10"> here the content </div>
  <div class="left w80"> 
    here<br />a<br />long<br />content<br />I say
  </div>
</div> 

Giving:

.w10 and .w80 classes can size blocks with percentages values.
Other example, a text “like a h2” which is on the right:

<div class="h2 right mt0 pt0 ml2">Here h2 text on the right</div>
       
<p>loremipsum toussa machin bidule et loremipsum toussa machin bidule et loremipsum et…</p> 

Giving:

loremipsum toussa machin bidule et loremipsum toussa machin bidule et loremipsum et…

Table-layout

.row and .col classes can be used to set up CSS table-layout positionning. This layout is really powerful: you can have same size columns, vertical centering is easy and simple to set up.

<div class="row w100">  
  <div class="col alignbottom w30">
   Content a
  </div>
  <div class="col w5 gut"> </div>
  <div class="col w30">
    Content b<br />
    longer
  </div>
  <div class="col w5 gut"> </div>
  <div class="col w30">
    Content c<br />
    much<br />
    longer
  </div> 
</div> 

This displays as:

.col is top-aligned by default (vertical-align: top). In the example above, the first cell uses alignbottom to put content at the bottom of the cell (alignmiddle can make vertical centering). .gut can simulate gutters.

Inline-block

Using display: inline-block or .inbl class is very useful: this allows to size inline elements without transforming them into blocks, it can also facilitate creating nice forms without getting headaches.

<label for="id_field" class="bl">
  <span class="inbl w250p alignright pr1">The field</span>
  <input type="text" name="field" id="id_field" />
</label>
<label for="id_field2" class="bl">
  <span class="inbl w250p alignright pr1">Other field</span>
  <input type="text" name="field2" id="id_field2" />
</label>

This displays as:

The field Other field

You can also create grids (see the tab for this subject) or position elements side by side with a lot of flexibility for responsive, especially in mobile-first. A bl class (which makes a display: block) is added on label to “stack” elements.

Creating grids

Röcssti can easily set up grids, by using table-layout or via .grid (inline-block and vertical-align: top) classes or inbl (inline-block). .gut class is used for spacing (and to indicate empty elements).
Example with .grid :

<div class="redborder">
   <div class="grid w25">...</div><!--
--><div class="grid w25">...</div><!--
--><div class="grid w25">...</div><!--
--><div class="grid w25">...</div>
</div>

This displays as:

Notes: adding a custom class on the elements you can easily specify the width, and vary according to the resolutions in one or more media-queries. It is what I’ve used on the home page (3×2 elements then 2×3 then 1×6, with gutters if needed).

As you are clever, you might have noticed comments between elements. As elements are “inline”, any space between them will be made (white-space). A lot of “hacks” and crafts are existing to avoid them, however, comments are still the cleanest and the simplest method. If you can minify HTML code, it works too.

I highly recommend the .grid method for mobile-first.

Typography elements

Managing Hx structure uses values that creates a vertical rythm, which make reading more pleasant. These values are inspired from Vertical Rhythm Tool from @eQRoeil. If you are using the CSS version of Röcssti, you can use this tool and insert results when you customize your project. The Sass and LESS versions include an automatic calculation of the vertical rythm, with 3 possible variants.

As you are clever (or not), you might have noticed that in the Hx structure, some helpers and media-queries are defined in em. This unit has many advantages:

• Accessibility: this unit is relative, so it allows global or text-only zoom on all browsers;
• Respects user-preference: it behaves very well if your user has defined a different font size by default;
• Ergonomics/accessibility: em-media-queries can trigger breakpoints in proportion to the default font size. If your user needs a powerful text zoom on a big screen, it will show the mobile version with very large font. To sum up, contents remain nicely displayed regardless of the zoom level.

Yes, even responsive is function of the typography!

Managing hyphenation is possible, it can be activated on the whole project or on a particular element via the .cut class. Other default styles for tags abbr, code, kbd, etc. are also available.

Responsive

Röcssti offers several systems to facilitate the creation of responsive websites. The first contains several classes to hide/show content depending if you look at it on desktop, tablet or mobile.

<p>This content should stay in all cases.</p>
<p class="nomobile">This content will disappear on mobile.</p>
<p class="noprint">This content won’t be printed.</p>
<p class="nodesktop">This content won’t be displayed on desktop (so will appear starting from tablets).</p>
<p class="nodesktop notablet">This content will appear on mobile.</p>
<p class="hidden onprint">This content will appear only on printed version.</p> 

This displays as (resize your window to see the result):

Another possibility is to “stack” positioned elements via floating or table-layout from tablets/mobile using classes .autotablet and .automobile. Using the example above:

<div class="row w100">  
  <div class="col-noalign alignbottom w30 automobile">
   Content a
  </div>
  <div class="col w5 gut nomobile"> </div>
  <div class="col w30 automobile">
    Content b<br />
    longer
  </div>
  <div class="col w5 gut nomobile"> </div>
  <div class="col w30 automobile">
    Content c<br />
    a lot<br />
    longer
  </div> 
</div> 

This displays as:

If you resize the window, you will see that the three blocks positioned side by side will pile magically on mobile. This also works for floating elements.

Right to Left websites

If the site is multilingual with a language that reads from right to left, Röcssti offers some tools to simplify the adaptation of a template for a RTL language. Example:

• Text alignments are adapted, example: [dir="rtl"] .alignright { text-align: left; }
• Floatting elements are reversed, example: [dir="rtl"] .left { float: right; }
• Some helpers are also adapted: [dir="rtl"] .mr0 { margin-left: 0; }
• On old IE, table-layouts are adapted with a fallback using floats, which are adapted also for RTL.
• Etc.

Note: the table-layout will adapt itself to a change to RTL (as elements in display: inline-block, no need to do anything).

Old IE

Prerequisites for old IE

Some tools are available to manage old IE, even if these ones are slowly disappearing. Here is an example of conditionnal classes set on html element.

<!--[if lte IE 6]> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" class="ie6 oldies"> <![endif]-->
<!--[if lte IE 7]> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" class="ie7 oldies"> <![endif]-->
<!--[if IE 8]> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" class="ie8 oldies">  <![endif]-->
<!--[if IE 9]> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" class="ie9">  <![endif]-->
<!--[if gt IE 9]><!--> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr"> <!--<![endif]--> 

They allow for example fixing some elements for IE.

.my-module {
…
}
.ie7 .my-module {
/* here a fix  */
} 

Note: if you really want to adapt quick and dirty for old IE, classes .nooldies (we hide on IE8 and lower), .noie6 (7, 8 and 9 are also available) allow to hide too-advanced elements for microsoft Brontosaurus.

Things to know

Table-layout works only from IE8. For IE7 and lower, it is fallback-ed using floats. So if you really want to take into account old IE7 and lower, you will have to size each cell, if not you will have bad surprises.

Classes .inbl and .grid (everything that is in display: inline-block) will work on old IE only if they are applied to elements that are inline by default (as links a, span, etc.). If not, you will have to add a hack like this:

.element { 
  zoom: 1; /* HasLayout */
  display: inline;
} 

As told in the news about border-box, border-box will work only starting from IE8. If you have to make a template on older versions, it can be done, you just have to avoid setting up a padding on a block with dimensions, and set up the padding in the bloc, example:

<div class="w33">
 <div class="p1">
  …
 </div>
</div>
 

Yes, it is a bit less elegant, a little less beautiful, but it will help you avoid crying tears of blood when you test and adapt your stylesheet on IE6/7.