{"id":15041302,"url":"https://github.com/bemit/formantasass","last_synced_at":"2026-02-18T11:37:09.690Z","repository":{"id":19007698,"uuid":"258880173","full_name":"bemit/FormantaSass","owner":"bemit","description":"46KB Mini CSS Framework with modular Sass files, compatible and optimized for AMP! Configurable class namings: bootstrap or basscss variant.","archived":false,"fork":false,"pushed_at":"2024-11-06T22:27:43.000Z","size":1870,"stargazers_count":2,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-03T07:38:13.733Z","etag":null,"topics":["accelerated-mobile-pages","amp","basscss","css","css-framework","css-grid-layout","sass","sass-framework","sass-library","scss","scss-framework","scss-library","scss-styles"],"latest_commit_sha":null,"homepage":"https://formanta.bemit.codes","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bemit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-25T21:41:26.000Z","updated_at":"2024-11-06T22:28:28.000Z","dependencies_parsed_at":"2024-09-25T01:35:46.474Z","dependency_job_id":"e1ec037a-14f4-4037-a399-1d7c7c5c6543","html_url":"https://github.com/bemit/FormantaSass","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/bemit/FormantaSass","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bemit%2FFormantaSass","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bemit%2FFormantaSass/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bemit%2FFormantaSass/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bemit%2FFormantaSass/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bemit","download_url":"https://codeload.github.com/bemit/FormantaSass/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bemit%2FFormantaSass/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260443485,"owners_count":23010028,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accelerated-mobile-pages","amp","basscss","css","css-framework","css-grid-layout","sass","sass-framework","sass-library","scss","scss-framework","scss-library","scss-styles"],"created_at":"2024-09-24T20:45:55.770Z","updated_at":"2026-02-18T11:37:04.648Z","avatar_url":"https://github.com/bemit.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://formanta.bemit.codes\" rel=\"noopener noreferrer\" target=\"_blank\"\u003e\u003cimg width=\"125\" src=\"https://formanta.bemit.codes/formanta_logo.svg\" alt=\"Formanta Logo\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eFormantaSass\u003c/h1\u003e\n\n[![npm (scoped)](https://img.shields.io/npm/v/@formanta/sass?style=flat-square)](https://www.npmjs.com/package/@formanta/sass)\n\nFeature rich Sass library with small output size: `~46KB` *(gzip `9.5KB`)* CSS - or **only `~27.5KB`** *(gzip `6.7KB`)* without responsive spacings!\n\nLow-level OOCSS framework with modular style files (optional CSS output), contains additionally ready to use components to speed up development and page load!\n\nCSS 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`.\n\n**Take a look \u0026 inspect the [example page](https://formanta.bemit.codes)** for all selectors and styles. For implementation details check the [documentation](https://formanta.bemit.codes/docs/) of Sass and CSS.\n\n*Compatible with [AMP](https://amp.dev).*\n\n- [Quick Start](#quick-start)\n- [Config](#config)\n- [Modular Imports](#modular-imports)\n- [Aims](#aims)\n- [Pre Build CSS](#pre-build-css)\n- [License](#license)\n\n\u003e Easily build your homepage with a modern static site generator, try out [create-amp-page]((https://github.com/bemit/create-amp-page)) with one of the [starter repos](https://github.com/bemit/create-amp-page#starter-templates), for AMP or PWA-enhanced pages.\n\n## Quick Start\n\nInstall package: `npm i --save-dev @formanta/sass`\n\nAdd imports, config and custom styles in your `.scss`/`.sass` file:\n\n```scss\n// `@import` may differ depending on your setup\n\n// overwrite default variables here\n$color-primary: pink;\n\n// get mixins, functions, variables from Formanta\n@import \"node_modules/@formanta/sass/meta\";\n\n// a global reset for `p`, as there is no default `p` rule included since formanta `0.22.0`\np {\n    margin: 0;\n    // or apply `body1` style:\n    // @include body1();\n}\n\n// own styles which may use Formanta Sass\n.bg-grey {\n    background: $color-gray-600;\n    margin: space(1);\n}\n\n// get everything that actually produces CSS from Formanta or import only the wanted styles\n@import \"node_modules/@formanta/sass/style\";\n\n// maybe, maybe overwrite Formanta styles here\n// add styles which rely on component variables (e.g. `$panel-shadow`)\n```\n\nLoad the transpiled CSS file - faster style your next awesome project!\n\nSmall boilerplate to get you started, also on [codesandbox](https://codesandbox.io/s/formanta-starter-9onf2), for a more real life example check the [example page](https://formanta.bemit.codes).\n\n## Config\n\nFor a full list of variables consult the [documentation](https://formanta.bemit.codes/docs/).\n\nMost important:\n\n- [`$class-style`](https://formanta.bemit.codes/docs/#vars:naming-variable-class-style)\n- [`$color-primary`](https://formanta.bemit.codes/docs/#vars:colors-semantic-variable-color-primary)\n- [`$color-secondary`](https://formanta.bemit.codes/docs/#vars:colors-semantic-variable-color-secondary)\n- [`$spacing`](https://formanta.bemit.codes/docs/#spacing-variable-spacing)\n- [`$line-height`](https://formanta.bemit.codes/docs/#typography-variable-line-height)\n- [`$font-weight`](https://formanta.bemit.codes/docs/#typography-variable-font-weight)\n- [`$font-color`](https://formanta.bemit.codes/docs/#typography-variable-font-color)\n- [`$font-family`](https://formanta.bemit.codes/docs/#typography-variable-font-family)\n- [`$font-family-mono`](https://formanta.bemit.codes/docs/#typography-variable-font-family-mono)\n- [`$title-font-color`](https://formanta.bemit.codes/docs/#typography-variable-title-font-color)\n- [`$title-font-family`](https://formanta.bemit.codes/docs/#typography-variable-title-font-family)\n- [`$container-sizes`](https://formanta.bemit.codes/docs/#container-variable-container-sizes)\n\n## Modular Imports\n\nThe Sass files are structured, so it's possible to include just the needed styles, but have all variables and mixins ready.\n\nThe general overriding order is `low-level \u003e specific` for variables (`_meta*`) and `specific \u003e 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.\n\n\u003e `specific` = more complex structures, mostly called `components` in this library\n\u003e\n\u003e `low-level` = low-level / object-oriented CSS rules, called `elements` / `base` / `attributes` in this library\n\u003e\n\u003e `base` = lowest low-level CSS rules, based/inspired upon `Basscss@v8`\n\nThis file shows one way to re-build it:\n\n```scss\n// 1. here the base vars can be overwritten\n$spacing: 8px;\n$color-light: #f3f3f3;\n\n// 2. import: base, spacing vars and mixins\n@import '~@formanta/sass/meta-base';\n\n// here reuse the base vars, e.g.\n//    - configure `color-semantic` and attribute/component colors using the `color-map` vars\n//    - configure the component sizing, using the spacing vars and mixins\n\n$title-font-color: $color-gray-900;\n$font-color: $color-gray-700;\n$line-height: 1.45;\n$color-primary: #6224ff;\n$container-sizes: (\n    'small' : $bp-small,\n    'medium' : $bp-medium,\n    'large' : $bp-large + 100,\n    'xlarge' : $bp-xlarge,\n);\n$button-padding: space(2) space(3);\n\n// 3. import the missing vars and the low-level/basic mixins/variables\n@import '~@formanta/sass/meta-attributes';\n\n// here the component vars can be reconfigured, using vars and mixins from the attributes/elements\n\n// 4. import the component defaults/mixins\n@import '~@formanta/sass/meta-components';\n\n// 5. get everything that actually produces CSS from Formanta or import only the wanted styles\n@import '~@formanta/sass/style-global'; // global html, body style\n@import '~@formanta/sass/style-components'; // complex structures (e.g. panel) and basic components\n@import '~@formanta/sass/style-elements'; // basic HTML elements (e.g. `h1 - h6`, `body1`, `code`, `blockquote`)\n\n// add own custom structures here, so they can be overwritten using the low-level styles,\n// but can override basic styles of titles, links, buttons etc.\n\n// 6. get the low-level CSS output rules\n@import '~@formanta/sass/style-attributes'; // low-level attribute rules, incl. typography attribute styles, responsive spacings\n@import '~@formanta/sass/style-base'; // low-level base rules\n\n// here - if really necessary - the low-level rules can be overwritten\n```\n\n## Aims\n\nHaving a code-controlled CSS framework, which produces CSS from variable configurations and provides logic components, to ease config-based styles in clean-data environments.\n\n**additional aim since `0.20.0`:**\n\nCombining the flexibility of low-level style architectures, like Basscss, with the readyness and consistency of frameworks like Bootstrap.\n\nUsing the CSS generator (Sass) var overriding together with optional CSS output and CSS overriding patterns to produce a small-size output.\n\n\u003e From Version `\u003e0.20.0` onwards this library is inspired and based upon [mustard-ui](https://kylelogue.github.io/mustard-ui) and [Basscss](https://basscss.com/). 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.\n\n**additional aim since `0.23.0`:**\n\nOptimal 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.\n\n## Versions\n\nThis project is **in beta**.\n\nThis package is managed [in a monorepo](https://github.com/bemit/Formanta).\n\n## Pre Build CSS\n\nPrebuild CSS are available to try it out with some default configs.\n\n\u003e build together with [normalize.css v8.0.1](https://github.com/necolas/normalize.css), except the two files with the `-no-normalize` suffix\n\n- [defaults.css](https://formanta.bemit.codes/styles/prebuild/main.css)\n    - [defaults no-normalize](https://formanta.bemit.codes/styles/prebuild/main-no-normalize.css)\n    - uses just the defaults\n    - source files in demo monorepo:\n        - [prebuild/main](https://github.com/bemit/Formanta/blob/master/packages/demo/src/styles/prebuild/main.scss)\n        - [prebuild/main-no-normalize](https://github.com/bemit/Formanta/blob/master/packages/demo/src/styles/prebuild/main-no-normalize.scss)\n- [defaults-no-responsive-spacings.css](https://formanta.bemit.codes/styles/prebuild/main-no-responsive-spacings.css)\n    - [defaults no-responsive-spacings no-normalize](https://formanta.bemit.codes/styles/prebuild/main-no-responsive-spacings-no-normalize.css)\n    - uses just the defaults, but does not include responsive spacings\n    - source files in demo monorepo:\n        - [prebuild/main-no-responsive-spacings](https://github.com/bemit/Formanta/blob/master/packages/demo/src/styles/prebuild/main-no-responsive-spacings.scss)\n        - [prebuild/main-no-responsive-spacings-no-normalize](https://github.com/bemit/Formanta/blob/master/packages/demo/src/styles/prebuild/main-no-responsive-spacings-no-normalize.scss)\n- [contrast.css](https://formanta.bemit.codes/styles/prebuild/main-contrast.css)\n    - source files in demo monorepo:\n        - [config/_vars-contrast](https://github.com/bemit/Formanta/blob/master/packages/demo/src/styles/config/_vars-contrast.scss)\n        - [prebuild/main-contrast](https://github.com/bemit/Formanta/blob/master/packages/demo/src/styles/prebuild/main-contrast.scss)\n- [dark.css](https://formanta.bemit.codes/styles/prebuild/main-dark.css)\n    - source files in demo monorepo:\n        - [config/_vars-dark](https://github.com/bemit/Formanta/blob/master/packages/demo/src/styles/config/_vars-dark.scss)\n        - [prebuild/main-dark](https://github.com/bemit/Formanta/blob/master/packages/demo/src/styles/prebuild/main-dark.scss)\n- [dark-contrast.css](https://formanta.bemit.codes/styles/prebuild/main-dark-contrast.css)\n    - source files in demo monorepo:\n        - [config/_vars-dark-contrast](https://github.com/bemit/Formanta/blob/master/packages/demo/src/styles/config/_vars-dark-contrast.scss)\n        - [prebuild/main-dark-contrast](https://github.com/bemit/Formanta/blob/master/packages/demo/src/styles/prebuild/main-dark-contrast.scss)\n- [dark-cssvars.css](https://formanta.bemit.codes/styles/prebuild/main-dark-cssvars.css)\n    - source files in demo monorepo:\n        - [prebuild/main-dark-cssvars](https://github.com/bemit/Formanta/blob/master/packages/demo/src/styles/prebuild/main-dark-cssvars.scss)\n\n## License\n\nFormanta: Michael Becker / bemit [MIT License](https://github.com/bemit/FormantaSass/blob/master/LICENSE)\n\nSince 0.20.0 influenced and based upon:\n\nBasscss: Copyright (c) 2013 – 2016 Brent Jackson, [MIT License](https://github.com/basscss/basscss/blob/master/LICENSE.md), *used as initial source of `base`/low-level rules*.\n\nMustard-UI: Copyright 2018 Kyle Logue, [MIT License](https://github.com/kylelogue/mustard-ui/blob/master/LICENSE), *used as initial code for forms, buttons and other elements, the general influence of components*.\n\n## Copyright\n\n2015 - 2024 | [Michael Becker](https://i-am-digital.eu), [bemit](https://bemit.codes)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbemit%2Fformantasass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbemit%2Fformantasass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbemit%2Fformantasass/lists"}