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)
hide on phone screen < 600px (display:none)
hide on medium screen > 960px (display:none)
<p class="ric-layout__small--hide">
hide on small screen < 960px (display:none)
</p>
<p class="ric-layout__small--show" style="display:none">
show on small screen < 960px (display:block)
</p>
<p class="ric-layout__phone--hide">
hide on phone screen < 600px (display:none)
</p>
<p class="ric-layout__phone--show" style="display:none">
show on phone screen < 600px (display:block)
</p>
<p class="ric-layout__medium--hide">
hide on medium screen > 960px (display:none)
</p>
<p class="ric-layout__medium--show" style="display:none">
show on medium screen > 960px (display:block)
</p>
<span class="ric-layout__medium--show--inline" style="display:none">
show on medium screen > 960px for an inline element (display:inline)
</span>
Breakpoints
This table represent all the different media queries that will be use by designers.
Media queries | Explanations |
---|---|
Small phones | This is use to hide some information which would take too much space on really small phones. |
Phones | 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 | 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 | 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 | 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 | We will use when we will support 4k screens. |
Extra large screens | We will use when we will support 4k screens. |
All large screens | 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.