FormantaSass

Feature rich Sass library with small output size: ~46KB (gzip 9.5KB) CSS - or only ~27.5KB (gzip 6.7KB) without responsive spacings!

Low-level OOCSS framework with modular style files (optional CSS output), contains additionally ready to use components to speed up development and page load!

CSS semantics like bootstrap or Basscss (e.g. col-md-6 or md-col-6). Used CSS selectors can be changed for most components, like applying button styles only to .btn and not on .btn, button or using .button/.button-round/.button-lg instead of .btn/.btn-round/.btn-lg.

Take a look & inspect the example page for all selectors and styles. For implementation details check the documentation of Sass and CSS.

Compatible with AMP.

• Quick Start
• Config
• Modular Imports
• Aims
• Pre Build CSS
• License

Easily build your homepage with a modern static site generator, try out create-amp-page with one of the starter repos, for AMP or PWA-enhanced pages.

Quick Start

Install package: npm i --save-dev @formanta/sass

Add imports, config and custom styles in your .scss/.sass file:

1// `@import` may differ depending on your setup
2
3// overwrite default variables here
4$color-primary: pink;
5
6// get mixins, functions, variables from Formanta
7@import "node_modules/@formanta/sass/meta";
8
9// a global reset for `p`, as there is no default `p` rule included since formanta `0.22.0`
10p {
11    margin: 0;
12    // or apply `body1` style:
13    // @include body1();
14}
15
16// own styles which may use Formanta Sass
17.bg-grey {
18    background: $color-gray-600;
19    margin: space(1);
20}
21
22// get everything that actually produces CSS from Formanta or import only the wanted styles
23@import "node_modules/@formanta/sass/style";
24
25// maybe, maybe overwrite Formanta styles here
26// add styles which rely on component variables (e.g. `$panel-shadow`)

Load the transpiled CSS file - faster style your next awesome project!

Small boilerplate to get you started, also on codesandbox, for a more real life example check the example page.

Config

For a full list of variables consult the documentation.

Most important:

• $class-style
• $color-primary
• $color-secondary
• $spacing
• $line-height
• $font-weight
• $font-color
• $font-family
• $font-family-mono
• $title-font-color
• $title-font-family
• $container-sizes

Modular Imports

The Sass files are structured, so it's possible to include just the needed styles, but have all variables and mixins ready.

The general overriding order is low-level > specific for variables (_meta*) and specific > low-level for most styles (_style*), this enables the reuse of low-level variables while configuring the more complex structures. But with the inversion at the style order, it is possible to overwrite more specific structures with the low-level CSS styles again.

specific = more complex structures, mostly called components in this library

low-level = low-level / object-oriented CSS rules, called elements / base / attributes in this library

base = lowest low-level CSS rules, based/inspired upon Basscss@v8

This file shows one way to re-build it:

1// 1. here the base vars can be overwritten
2$spacing: 8px;
3$color-light: #f3f3f3;
4
5// 2. import: base, spacing vars and mixins
6@import '~@formanta/sass/meta-base';
7
8// here reuse the base vars, e.g.
9//    - configure `color-semantic` and attribute/component colors using the `color-map` vars
10//    - configure the component sizing, using the spacing vars and mixins
11
12$title-font-color: $color-gray-900;
13$font-color: $color-gray-700;
14$line-height: 1.45;
15$color-primary: #6224ff;
16$container-sizes: (
17    'small' : $bp-small,
18    'medium' : $bp-medium,
19    'large' : $bp-large + 100,
20    'xlarge' : $bp-xlarge,
21);
22$button-padding: space(2) space(3);
23
24// 3. import the missing vars and the low-level/basic mixins/variables
25@import '~@formanta/sass/meta-attributes';
26
27// here the component vars can be reconfigured, using vars and mixins from the attributes/elements
28
29// 4. import the component defaults/mixins
30@import '~@formanta/sass/meta-components';
31
32// 5. get everything that actually produces CSS from Formanta or import only the wanted styles
33@import '~@formanta/sass/style-global'; // global html, body style
34@import '~@formanta/sass/style-components'; // complex structures (e.g. panel) and basic components
35@import '~@formanta/sass/style-elements'; // basic HTML elements (e.g. `h1 - h6`, `body1`, `code`, `blockquote`)
36
37// add own custom structures here, so they can be overwritten using the low-level styles,
38// but can override basic styles of titles, links, buttons etc.
39
40// 6. get the low-level CSS output rules
41@import '~@formanta/sass/style-attributes'; // low-level attribute rules, incl. typography attribute styles, responsive spacings
42@import '~@formanta/sass/style-base'; // low-level base rules
43
44// here - if really necessary - the low-level rules can be overwritten

Aims

Having a code-controlled CSS framework, which produces CSS from variable configurations and provides logic components, to ease config-based styles in clean-data environments.

additional aim since 0.20.0:

Combining the flexibility of low-level style architectures, like Basscss, with the readyness and consistency of frameworks like Bootstrap.

Using the CSS generator (Sass) var overriding together with optional CSS output and CSS overriding patterns to produce a small-size output.

From Version >0.20.0 onwards this library is inspired and based upon mustard-ui and Basscss. But written in Sass, with more configuration options through Sass variables, which where not existing in mustard or done by CSS vars in Basscss. Sass mixins are included for easier reuse without copying Sass/CSS.

additional aim since 0.23.0:

Optimal design translations from UI language specifications, through better interoperable low-level attributes and elements which use e.g. Material-UI influenced color semantics, together with the low-level/OOCSS type of naming, modular components and controlled CSS output.

Versions

This project is in beta.

This package is managed in a monorepo.

Pre Build CSS

Prebuild CSS are available to try it out with some default configs.

build together with normalize.css v8.0.1, except the two files with the -no-normalize suffix

• defaults.css
  • defaults no-normalize
  • uses just the defaults
  • source files in demo monorepo:
    • prebuild/main
    • prebuild/main-no-normalize
• defaults-no-responsive-spacings.css
  • defaults no-responsive-spacings no-normalize
  • uses just the defaults, but does not include responsive spacings
  • source files in demo monorepo:
    • prebuild/main-no-responsive-spacings
    • prebuild/main-no-responsive-spacings-no-normalize
• contrast.css
  • source files in demo monorepo:
    • config/_vars-contrast
    • prebuild/main-contrast
• dark.css
  • source files in demo monorepo:
    • config/_vars-dark
    • prebuild/main-dark
• dark-contrast.css
  • source files in demo monorepo:
    • config/_vars-dark-contrast
    • prebuild/main-dark-contrast
• dark-cssvars.css
  • source files in demo monorepo:
    • prebuild/main-dark-cssvars

License

Formanta: Michael Becker / bemit MIT License

Since 0.20.0 influenced and based upon:

Basscss: Copyright (c) 2013 – 2016 Brent Jackson, MIT License, used as initial source of base/low-level rules.

Mustard-UI: Copyright 2018 Kyle Logue, MIT License, used as initial code for forms, buttons and other elements, the general influence of components.

Copyright

2015 - 2024 | Michael Becker, bemit