menu

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.

Test

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
Any suggestions to improve this styleguide are highly appreciated.

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/1.6.7/lib/ricardo.min.css" type="text/css">
  </head>
  <body>
    ...
  </body>
  <script src="//style-6a38.kxcdn.com/1.6.7/lib/ricardo.min.js">
</html>

Contribute

Github repository