Ricardo styleguide
Make (auto.)ricardo.ch easy and exciting
The styleguide is a code repository that provides engineers with a toolset to build Ricardo-like web applications easy and fast. It's the single source of truth for both engineers and designers for the user experience on products from the ricardo Group. The styleguide is a showcase of the styles itself as well.
Goals
- fast to integrate for engineers
- easy to maintain for designers
- single source of truth for both engineers and designers
- consumer of itself (showcase)
How to use it
Try to use only the classes that are documented. If a .ric- class is not documented
it can changes between versions (even minor). .mdl- classes inherited from MDL are generaly
safe to use.
This styleguide is regularly tested on many devices.
Design principles
All elements and components are designed and should be used in conformity with the following principles:
Interactive
dynamic content personnalized
Seamless
one page flow
Emotional
exciting experience
Quick start
We recommend using the CDN version like so:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500" type="text/css">
<link rel="stylesheet" href="//style-6a38.kxcdn.com/9.0.3/lib/ricardo.min.css" type="text/css">
</head>
<body>
...
</body>
<script src="//style-6a38.kxcdn.com/9.0.3/lib/ricardo.min.js">
</html>