close
ricardo.ch wird neu. Auch diese Seite gehört dazu. Mehr erzählen wir dir hier: ricardo stories
ricardo styleguide v.9.0.3

Implementation

For the moment there is very little official support for layout in the styleguide. You are welcome to extend it at src/lib/ricardo/layout. If you want it to be reused by others please document your work here.

CSS classes Effect
.ric-layout__large-container--centered This will center and set the max-width to large (1200px)
.ric-layout__medium-container--centered This will center and set the max-width to medium (960px)
.ric-layout__vertical or ric-layout__horizontal Set the container as a flexbox of the chosen orientation
.ric-layout__100vh--min Set a min-height of 100vh on a container

Show And Hide

Hide and show depending of screen sizes

Hide on small screen < 960px (display:none)

Show on small screen < 960px (display:block)

Hide on phone screen < 600px (display:none)

Show on phone screen < 600px (display:block)

Hide on medium screen > 960px (display:none)

Show on medium screen > 960px (display:block)

To show a inline element add the --inline modifier

      <p class="ric-layout__small--hide">
      	Hide on small screen &lt; 960px (display:none)
      </p>
      
      <p class="ric-layout__small--show">
      	Show on small screen &lt; 960px (display:block)
      </p>
      
      <p class="ric-layout__phone--hide">
      	Hide on phone screen &lt; 600px (display:none)
      </p>
      
      <p class="ric-layout__phone--show">
      	Show on phone screen &lt; 600px (display:block)
      </p>
      
      <p class="ric-layout__medium--hide">
      	Hide on medium screen &gt; 960px (display:none)
      </p>
      
      <p class="ric-layout__medium--show">
      	Show on medium screen &gt; 960px (display:block)
      </p>
      
      <span class="ric-layout__medium--show--inline">
        To show a inline element add the --inline modifier
      </span>

Breakpoints

This table represent all the different media queries that will be use by designers.

Media queries From To Examples Explanations
Small phones 0 319 Mobile XS This is use to hide some information which would take too much space on really small phones.
Phones 0 600 Mobile S/M/L Here you have all the different mobile (small phones included). We describe the specificity of element on mobile device. For example, we merge the metadata bar and the footer.
Small screens 601 960 Tablet This is we describe the tablet experience. We are using this range to display more content than on mobile. This will affect compoment like the filter area or the structure of some pages.
All small screens 0 960 Mobile S/M/L & Tablet Used at least to break the menu and display it as an horizontal bar. It is used to describe an experience which affect all the small screens.
Medium screens 961 1200 Laptop In this range we have menu display vertically on the right and the main content takes all the space available.
-> at 1200px we have the main content width equal to 960px.
Large screens 1201 1920 Desktop We will use when we will support 4k screens.
Extra large screens 1921 X Screen 4k We will use when we will support 4k screens.
All large screens 1201 X Desktop / Screen 4k In this breakpoint, the website will always be in full size (1200px). All the element of a page should be display and in their maximal size.

Responsiveness

This part only describes the width of important blocks by showing these blocks in some popular widths.

What we try to achieve with this responsiveness is to have always the main content as big as possible but not higher than 960px.
This is the reason why we have a max width of the main content equals to 960px. When the screen width is smaller than 1200px the main content will take all the available space minus the menu width (240px). The website is breaking again at 960px by moving the menu below the header and horizontally. The content of this bar will highly depends of the page's context.

Also when the screen has the size < 600px (Phone screens), the metadata bar (autoricardo link, help, language) is merged with the footer. The content of this is for us not important enough to be displayed in such important area on phone screens.

320px
375px
425px
768px
1024px
1440px
2560px
Header (100%)
Menu (100%)
Main (100%)
Header (100%)
Menu + Option (100%)
Main (100%)
Header (100%)
Menu + Option (100%)
Main (100%)
Header (100%)
Menu + Option (100%)
Main (100%)
Header (100%)
Menu (240px)
Main (100%)
Header (100%)
Menu (240px)
Main (960px)
Header (100%)
Menu (240px)
Main (960px)