Cito

Introduction

Cito is my personal design system. It functions like a customized scaffolding arrangement, serving as a repository of ideas, concepts and code snippets. It functions as a starting point for my work.

The CSS is designed to be compatible with any project setup adhering to standard web conventions. The only remaining task for users is scoping. In React context CSS modules is the recommended way. At the moment no direct links to Github are provided.

Buttons

button.cito-btn
button.cito-btn.primary
button.cito-btn.primary.small
button.cito-btn.danger
button.cito-btn.danger.small
button.cito-btn.subtle
button.cito-btn.subtle-danger

Anchors

a.anchor
Link to somewhere

Colors

Alerts

Success!
All went pretty ok!
Warning!
Something might go wrong!
Error!
An error occured!
Info!
By the way, did you know about this and that?
Just a box of text
Nothing more, nothing less.

Cards

Berlin Rathaus
The Rotes Rathaus is the town hall of Berlin, located in the Mitte district on Rathausstraße near Alexanderplatz.
Berlin Rathaus
The Rotes Rathaus is the town hall of Berlin, located in the Mitte district on Rathausstraße near Alexanderplatz.
Did you know?
You can also make better choices

Checkboxes

Key-value lists

Key of
The value
Another key
And another value
Last key
Value not set
Key of
The value
Another key
And another value
Last key
Value not set
Key of
The value
Another key
And another value
Last key
Value not set
Key of
The value
Another key
And another value
Last key
Value not set

Grid containers

Unknown amount of items. First and last to be stuck on ends. Rest flows in the center. Suitable for dynamically changing custom containers (e.g. table row), where each child is directly under the parent and template structure is preferred to be kept intact.

Example 1

1
2
3
4 – and additional length here that is way too big for the cell
5
6
7
8
9

Example 2

1
2
3
4 – and additional length here that is way too big for the cell
5
6
7
8
9

Clip paths

Start
This here
That one
End

App chrome starters

Example 1

Shadows

Shadow 100
Shadow 200
Shadow 300
Shadow 400
Shadow 500
Shadow 600
Inset 100
Border 100
Border 200