menu

Attributes

Color

Important color

#0096D8
rgb(0, 150, 216)
$color-main
#0F84BA
-hover
#0A72A1
-pressed
#ef7310
rgb(239, 115, 16)
$color-brand
#de6c10
-hover
#cf650e
-pressed

Other colors

#156ea0
rgb(21, 110, 160)
$color-dark-blue
#0F84BA
-hover
#0A72A1
-pressed
#3DB200
rgb(61, 178, 0)
$color-green
#84ab11
-hover
#7b9e10
-pressed
#edb400
rgb(237, 180, 0)
$color-yellow
#deaa00
-hover
#c99a00
-pressed
#d84021
rgb(216, 64, 33)
$color-red
#c93b1e
-hover
#bd371c
-pressed
#f5f5f0
rgb(245, 245, 240)
$color-warm-grey

Grey colors

Aa
rgba(0, 0, 0, .87)
$color-grey-87
Aa
rgba(0, 0, 0, .54)
$color-grey-54
Aa
rgba(0, 0, 0, .38)
$color-grey-38
rgba(0, 0, 0, .15)
$color-grey-15
rgba(0, 0, 0, .12)
$color-grey-12
rgba(0, 0, 0, .06)
$color-grey-6

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 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.
319px
600px
601px
960px
960px
961px
1200px
1201px
1920px
1921px
1201px

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)

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

add Add
remove Remove
arrow_back Back
arrow_drop_up Drop up
arrow_drop_down Drop down
check Check
clear Close
settings Settings
visibility Visibility
visibility_off Visibility off
history History
info_outline Info
lock_outline Lock
undo Undo
redo Redo
person User
menu Menu
help_outline Help
search Search
delete Delete
error_outline Error
priority_high Warning
keyboard_arrow_down Arrow down
keyboard_arrow_up Arrow up
keyboard_arrow_left Arrow left
keyboard_arrow_right Arrow right

Logos

If you want to refer directly to the file you can use the CDN URL, e.g. https://style-6a38.kxcdn.com/1.2.9/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://style-6a38.kxcdn.com/1.2.9/lib/images/apple-touch-icon-180x180-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="https://style-6a38.kxcdn.com/1.2.9/lib/images/apple-touch-icon-152x152-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="https://style-6a38.kxcdn.com/1.2.9/lib/images/apple-touch-icon-120x120-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="https://style-6a38.kxcdn.com/1.2.9/lib/images/apple-touch-icon-precomposed.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://style-6a38.kxcdn.com/1.2.9/lib/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://style-6a38.kxcdn.com/1.2.9/lib/images/favicon-16x16.png">
<link rel="manifest" href="https://style-6a38.kxcdn.com/1.2.9/lib/images/manifest.json">
<link rel="mask-icon" color="#5bbad5" href="https://style-6a38.kxcdn.com/1.2.9/lib/images/safari-pinned-tab.svg">