FormantaSass

Mini CSS Framework with modular Sass files, configuration by Sass variables, compatible with AMP.

Size: 46KB (gzip ~9.5KB) - or only 27.5B without responsive spacings!

npm i --save-dev @formanta/sass

Checkout the GitHub repository for quick start, issues and source code.

Documentation

Inspect ignores custom example-page selectors: background blue, grey(s) and title.

Example Colors:

standard theme contrast theme dark theme dark contrast theme

example with CSS Vars

demo styles source folder

CSS Vars

To support CSS vars, add a config like this to e.g. a style tag in your HTMLs head:

Must be valid CSS, only supports initially shown variables.

Then add a vars mapping to your Sass file, before all formanta/sass imports:

$color-primary: var(--color-primary);
$color-secondary: var(--color-secondary);

$title-font-family: var(--title-font-family);
$title-font-color: var(--title-font-color);
$title-font-weight: var(--title-font-weight);

$font-family: var(--font-family);
$font-color: var(--font-color);

$outlined-border-radius: var(--outlined-border-radius);
$outlined-round-border-radius: var(--outlined-round-border-radius);

// by default the `$input-border-radius`, `$button-border-radius` are using `$base-border-radius`,
// which can't be supplied by css-vars without a lot further changes
$input-border-radius: $outlined-border-radius;
$button-border-radius: $outlined-border-radius;

$bg-paper: var(--bg-paper);
$bg-body: var(--bg-body);
$bg-paper-transparent: rgba(0, 0, 0, 0.5);
$bg-backdrop: rgba(0, 0, 0, 0.75);

$bg-colors: (
    'paper': $bg-paper,
    'paper-transparent': $bg-paper-transparent,
    'body': $bg-body,
    'backdrop': $bg-backdrop,
    'success': var(--bg-success),
    'info': var(--bg-info),
    'warning': var(--bg-warning),
    'danger': var(--bg-danger),
);

What is possible?

Some Sass variables can use CSS vars directly, others must be supplied at build time due to e.g. color calculations in sass.

To fully support variables likecolors-semantic, rewrite the `_meta`/`_var` files, like $text-colors, $outlined-colors, $bg-colors to not use e.g. rgba from Sass.

With custom config mappings nearly all sass variables can be used with CSS variables.

(Some of the) possible variables:

The following reflect the current included default config.

Not possible:

The following reflect the current included default config.

Contents

Just shows some examples on this page.

Buttons

standard size, normal vs. elevations:

Click   Click   Click   Click   Click   Click  
Click   Click   Click   Click   Click   Click  

small size, normal vs. elevations:

Click   Click   Click   Click   Click   Click  
Click   Click   Click   Click   Click   Click  

works also with a tags:

Click   Click   Click   Click   Click   Click   Click   Click   Click  

filled with .btn-<semantic>:

                 

outlined colors with .btn-<semantic>-o:

                 

only text with .btn-text / .btn-<semantic>-text:

                    

sizes .btn-sm, .btn, .btn-lg, normal vs. .btn-round:

Click   Click   Click   Click   Click   Click  
Click   Click   Click   Click   Click   Click  

icons with .btn.btn-ic, supporting all semantics:

button groups with .btn-group on the parent:

button reset .btn-raw for easy custom buttons:

Typography

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6

Subtitle 1

Subtitle 2

Lorem 1 ipsum dolor sit amet.

Lorem 2 ipsum dolor sit amet.

Bold

Regular

Italic

Caps

Left align

Center

Right align

Justify Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.

No wrap

Underline

Truncate

Font Family Inherit

Font Size Inherit

Text Decoration None

Colored Text .color-primary

Colored Text .color-secondary

Colored Text .color-success

Colored Text .color-info

Colored Text .color-warning

Colored Text .color-danger

Colored Text .color-light

Colored Text .color-strong

Alert / Info Box

Info

Success Message

Lorem ipsum dolor sit amet.

Info

Info Message

Lorem ipsum dolor sit amet.

Info

Warning Message

Lorem ipsum dolor sit amet.

Info

Danger Message

Lorem ipsum dolor sit amet.

Info

Success Message

Lorem ipsum dolor sit amet.

Info

Info Message

Lorem ipsum dolor sit amet.

Info

Warning Message

Lorem ipsum dolor sit amet.

Info

Danger Message

Lorem ipsum dolor sit amet.