Attributes
Color
Important color
Other colors
Grey colors
Typography
Font family
font-family: Roboto, Helvetica, Arial, sans-serif;
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500' rel='stylesheet' type='text/css'>
Font sizes
You can simply use the natural semantic tags that come with special margins or use the specific CSS classes.
Big title h1
.ric-typo__big-title
is 64px 300
Main title h1
.ric-typo__main-title
is 34px 400
Subtitle h2
.ric-typo__subtitle
is 24px 400
Headline h3
.ric-typo__headline
is 20px 500
Default text p
.ric-typo__body
is 14px 400
Layout
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.
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) to a container |
.ric-layout__medium-container--centered | This will center and set the max-width to medium (960px) to a container |
.ric-layout__vertical or ric-layout__horizontal | Set the container as a flexbox of the chosen orientation |
.ric-layout__small--hide | Hide the element when screen is small < (960px) |
Icons
Logos
If you want to refer directly to the file you can use the CDN URL, e.g. http://ricstyle-6a38.kxcdn.com/1.2.6/images/Logo_ricardo_Standalone_2x.png
<div class="ric-logo-responsive--auto" ></div>
<div class="ric-logo-responsive" ></div>
<div class="ric-logo-icon-1x" ></div>
<div class="ric-logo-standalone-1x" ></div>
<div class="ric-logo-slogan-german-1x" ></div>
<div class="ric-logo-slogan-french-1x" ></div>
<div class="ric-logo-icon-2x" ></div>
<div class="ric-logo-standalone-2x" ></div>
<div class="ric-logo-slogan-german-2x" ></div>
<div class="ric-logo-slogan-french-2x" ></div>
Favicons
Here the HTML block we use for the favicons:
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="https://ricstyle-6a38.kxcdn.com/1.2.6/lib/images/apple-touch-icon-180x180-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="https://ricstyle-6a38.kxcdn.com/1.2.6/lib/images/apple-touch-icon-152x152-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="https://ricstyle-6a38.kxcdn.com/1.2.6/lib/images/apple-touch-icon-120x120-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="https://ricstyle-6a38.kxcdn.com/1.2.6/lib/images/apple-touch-icon-precomposed.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://ricstyle-6a38.kxcdn.com/1.2.6/lib/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://ricstyle-6a38.kxcdn.com/1.2.6/lib/images/favicon-16x16.png">
<link rel="manifest" href="https://ricstyle-6a38.kxcdn.com/1.2.6/lib/images/manifest.json">
<link rel="mask-icon" color="#5bbad5" href="https://ricstyle-6a38.kxcdn.com/1.2.6/lib/images/safari-pinned-tab.svg">