1.0.4 • Published 9 months ago
FARI Style
A CSS library that exports both plain CSS and Sass (SCSS).
Table of Contents
Installation
npm i @fari-brussels/style
Usage
Plain CSS
@use '@fari-brussels/style';
Sass
@use '@fari-brussels/style/sass' as *; // or any other namespace
Classes
Borders
| Class | Property |
|---|
rounded-none | border-radius: 0 |
rounded-md | border-radius: 1rem |
rounded-lg | border-radius: 3rem |
Extended Borders
| Class | Property |
|---|
rounded-es-none | border-end-start-radius: 0 |
rounded-es-md | border-end-start-radius: 1rem |
rounded-es-lg | border-end-start-radius: 3rem |
rounded-ee-none | border-end-end-radius: 0 |
rounded-ee-md | border-end-end-radius: 1rem |
rounded-ee-lg | border-end-end-radius: 3rem |
Colors
Text Colors
| Class | Property |
|---|
color-blue | color: #183e91 |
color-primary | color: #2e4fbf |
color-white | color: #f6f6f6 |
color-black | color: #181716 |
Background Colors
| Class | Property |
|---|
bg-color-blue | background-color: #183e91 |
bg-color-primary | background-color: #2e4fbf |
bg-color-white | background-color: #f6f6f6 |
bg-color-black | background-color: #181716 |
Stroke & Fill
| Class | Property |
|---|
stroke-color-blue | stroke: #183e91 |
fill-color-blue | fill: #183e91 |
Spacing
| Class | Property |
|---|
m-none | margin: 0 |
m-xs | margin: 0.75rem |
m-sm | margin: 1.75rem |
m-md | margin: 2rem |
Padding
| Class | Property |
|---|
p-none | padding: 0 |
p-xs | padding: 0.75rem |
p-sm | padding: 1.75rem |
p-md | padding: 2rem |
Typography
| Class | Property |
|---|
font-family-base | font-family: 'Inter', sans-serif |
font-size-base | font-size: 16px |
font-size-title | font-size: 4.5rem |
Variables
Border Variables
$none: 0;
$border-md: 1rem;
$border-lg: 3rem;
Color Variables
$blue: #183e91;
$primary: #2e4fbf;
$white: #f6f6f6;
$black: #181716;
Spacing Variables
$space-xs: 0.75rem;
$space-sm: 1.75rem;
$space-md: 2rem;
$space-lg: 3rem;
Typography Variables
$inter: 'Inter', sans-serif;
$base: 16px;
$title: 4.5rem;