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 repository for quick start, issues and source code.
Inspect ignores custom example-page selectors: background blue, grey(s) and title.
Example Colors:
standard theme contrast theme dark theme dark contrast themedemo styles source folder
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.
$title-font-family
$title-font-color
$title-font-weight
$font-family
$font-color
$line-height
$line-height-1
$line-height-2
$line-height-3
$line-height-4
$outlined-border-radius
$button-border-radius
$button-round-radius
$button-icon-size
$button-icon-padding
$button-icon-sm-size
$button-icon-sm-padding
$button-icon-lg-size
$button-icon-lg-padding
Not possible:
The following reflect the current included default config.
$bg-body
, $bg-paper
, $bg-*
$outlined-border-color
$spacing
$color-success
$color-success-dark
$color-info
$color-info-dark
$color-warning
$color-warning-dark
$color-danger
$color-danger-dark
$base-border-radius
but possible for
$outlined-border-radius
,
$outlined-round-border-radius
Just shows some examples on this page.
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 NoneColored 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
Success Message
Lorem ipsum dolor sit amet.
Info Message
Lorem ipsum dolor sit amet.
Warning Message
Lorem ipsum dolor sit amet.
Danger Message
Lorem ipsum dolor sit amet.
Success Message
Lorem ipsum dolor sit amet.
Info Message
Lorem ipsum dolor sit amet.
Warning Message
Lorem ipsum dolor sit amet.
Danger Message
Lorem ipsum dolor sit amet.