Getting Started

Overview

Circutor CDS (Circutor Design System) is a set of rules to unify the interfaces of Circutor applications. There are several ways to associate the CDS with a front end project:

Circutor UI

Circutor UI is the most agnostic and flexible system of the entire CDS, it is the base of the all systems. It is created with sass and I offered several ways to use it.

UI for node

If your application uses node you can install the library with a command line in the terminal

npm i circutor/ui

By executing this command you already have the circutor ui as a dependency. We recommend that you update the version manually, and remove the circumflex accent, e.g. "@circutor/ui": "1.0.19"

You have 2 ways to use the library:

Using css

You must import from Circudor UI the core and place it so that it is always present. e.g. @circutor/ui/css/cds-core.css

Also for each element you use you must import the corresponding css, for example if you use buttons you must use the @circutor/ui/css/cds-buttons.css

Using scss

Also for each element you use you must import the corresponding css, for example if you use buttons you must use the

///*! cds-config.scss | Circutor Design System 
/// ======================================================

/// Set the config variables to create the font-face
/// * Only needed if your project use Circutor typography or another custom typography.
/// ======================================================

/*
$cds-cfgff-name-400: "NettoPro";
$cds-cfgurl-400: "path/to/your/resources/font/folder/your_font.otf";
$cds-cfgformat-400: "opentype";
$cds-cfgfw-400: 400;

$cds-cfgff-name-700: "NettoProBold";
$cds-cfgurl-700: "path/to/your/resources/font/folder/your_font.otf";
$cds-cfgformat-700: "opentype";
$cds-cfgfw-700: 400;

/// Set the path variables of Circutor Icons location
/// ======================================================

$cds-cfgurl-eot-icons: "path/to/your/resources/icons/folder/CDSIcons.eot";
$cds-cfgurl-ttf-icons: "path/to/your/resources/icons/folder/CDSIcons.ttf";
$cds-cfgurl-woff-icons: "path/to/your/resources/icons/folder/CDSIcons.woff";
$cds-cfgurl-svg-icons: "path/to/your/resources/icons/folder/CDSIcons.svg";
*/

/// Override the font family variables
/// ======================================================

/*
$cds-font-family-400: sans-serif;
$cds-font-weight-400: 400;
$cds-font-family-700: sans-serif;
$cds-font-weight-700: 700;
*/

/// Override config variables
/// ======================================================

/*
$cds-size-factor: 0.2;
$cds-br: 0rem; //Use base-10 in rem. I.e. 20px = 2.0rem
*/

/// Override available color variables
/// ======================================================

/*
$cds-color-body-light: black;
$cds-color-primary-light: blue;
$cds-color-background-light: rgb(222, 225, 235);
*/

@import '@circutor/ui/scss/common/cds-core';

Finally you will see that we import the cds-core which is in charge of preparing all the CDS to be used.

You will need to use this file in the head of your project or for each of the templates you want to provide with CDS.

To use the different CDS elements you should import them, e.g. @circutor/ui/scss/common/cds-buttons.css.