Getting Started

Overview

Circutor CDS (Circutor Design System) is a set of rules for unifying the interfaces of Circutor applications. There are several ways to associate the CDS to a front-end project. This React-UI library is the dependency for react-based projects:

Circutor react-UI

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 (local files).
/// * If you want to use any system font, you don't need this block code. Keep it commented.
/// ======================================================

// $config-typography-400-path: 'your/path/NettoPro.otf';
// $config-typography-400-format: 'opentype';
// $config-typography-400-font-family: 'NettoPro';
// $config-typography-400-font-weight: 400;

// $config-typography-700-path: 'your/path/NettoProBold.otf';
// $config-typography-700-format: 'opentype';
// $config-typography-700-font-family: 'NettoProBold';
// $config-typography-700-font-weight: 400;

/// Set the path variables of Circutor Icons location
/// * Only needed if you want to use Circutor icons set. In other cases, iconized components will be unuseful.
/// * If you want to use your custom icons, the typography files should match the icons position.
/// * Refer to the icon font documentation (to do) to get the code of each icons.
/// ======================================================

// $config-icons-path-eot: 'your/path/CDSIcons.eot';
// $config-icons-path-ttf: 'your/path/CDSIcons.ttf';
// $config-icons-path-woff: 'your/path/CDSIcons.eoff';
// $config-icons-path-svg: 'your/path/CDSIcons.svg';

/// Override the font family variables
/// * Use this block to set the Font-family & Font-weight for regular and bold fonts.
/// * If you are using a system font, use its name. 
/// * If your are using a custom font, use the name setted in $cds-cfgff-name-*** vars before.
/// ======================================================

// $cds-font-family-400: 'font family name';
// $cds-font-weight-400: font weight;

// $cds-font-family-700: 'font family name';
// $cds-font-weight-700: font weight;

// $cds-font-family-code: 'font family name';

/// Override available color variables
/// * You can override COLOR Semantic variables with your own values.
/// * Only functional and meaning color vars can be overriden.
/// ======================================================
/// Note: You can override the dark themed variables just adding "-dark" before each variable name. I.e.: $cds-color-text-dark


@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.