{"id":30107041,"url":"https://github.com/benignware/ssuit","last_synced_at":"2025-10-14T23:46:54.468Z","repository":{"id":57369071,"uuid":"168864178","full_name":"benignware/ssuit","owner":"benignware","description":"A scss library for creating modular css","archived":false,"fork":false,"pushed_at":"2019-02-14T17:19:11.000Z","size":159,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-03T11:16:40.057Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/benignware.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-02-02T18:34:03.000Z","updated_at":"2019-02-14T17:19:13.000Z","dependencies_parsed_at":"2022-09-15T16:20:24.585Z","dependency_job_id":null,"html_url":"https://github.com/benignware/ssuit","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/benignware/ssuit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benignware%2Fssuit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benignware%2Fssuit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benignware%2Fssuit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benignware%2Fssuit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benignware","download_url":"https://codeload.github.com/benignware/ssuit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benignware%2Fssuit/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269604151,"owners_count":24445845,"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","status":"online","status_checked_at":"2025-08-09T02:00:10.424Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-08-10T01:31:57.683Z","updated_at":"2025-10-14T23:46:49.436Z","avatar_url":"https://github.com/benignware.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ssuit\n\nA scss library for creating modular css\n\n\n## Install\n\n```cli\nnpm i ssuit -D\n```\n\n## Usage\n\nssuit consists of several mixins and functions representing modular css structures, e.g. components, modifiers etc, thus it provides an abstraction layer which hides all the ugly shit from your source.\n\n\u003e Note: `ssuit` is intented for being used at application level and is currently not suited for being incorporated into a dedicated scss library\n\nWhile being designed to be compliant with [SUIT](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md), it can be configured to match classic BEM as well. However, maintained support for BEM is currently not in scope of the project.\n\nHere's how it works at a blush...\n\n\n### Components\n\nApart from the component structure itself typically consists of so-called \"modifiers\", \"descendents\" as well as \"states\". All of these are represented by mixins that take a block of scss-code. Apart from that, with every structure, correspondent functions exist by which you retrieve the actual name containing its appropriate delimiters.\n\n```scss\n@include component(Button) {\n  -webkit-appearance: none;\n  cursor: pointer;\n  padding: 0.25rem 0.5rem;\n  border-width: 1px;\n  background: lightgray;\n  border-color: lightgray;\n  border-style: solid;\n  $self: \u0026;\n\n  @include modifier(primary) {\n    background: yellow;\n    border-color: yellow;\n  }\n\n  @include modifier(secondary) {\n    background: peachpuff;\n    border-color: peachpuff;\n  }\n\n  \u0026#{modifier(secondary)} {\n    background: peachpuff;\n    border-color: peachpuff;\n  }\n\n  @include modifier(outline) {\n    background: white;\n    border-color: lightgray;\n\n    \u0026#{modifier(primary)} {\n      border-color: yellow;\n    }\n\n    \u0026#{modifier(secondary)} {\n      border-color: peachpuff;\n    }\n  }\n\n  @include descendent(label) {\n    text-transform: uppercase;\n  }\n\n  @include state(disabled) {\n    border-style: groove;\n  }\n\n  \u0026#{state(disabled)} {\n    background: pink;\n  }\n}\n```\n\nWhich compiles to:\n\n```css\n.Button {\n  -webkit-appearance: none;\n  cursor: pointer;\n  padding: 0.25rem 0.5rem;\n  border-width: 1px;\n  background: lightgray;\n  border-color: lightgray;\n  border-style: solid;\n}\n\n.Button--primary {\n  background: yellow;\n  border-color: yellow;\n}\n\n.Button--secondary {\n  background: peachpuff;\n  border-color: peachpuff;\n}\n\n.Button--secondary {\n  background: peachpuff;\n  border-color: peachpuff;\n}\n\n.Button--outline {\n  background: white;\n  border-color: lightgray;\n}\n\n.Button--outline--primary {\n  border-color: yellow;\n}\n\n.Button--outline--secondary {\n  border-color: peachpuff;\n}\n\n.Button .Button-label {\n  text-transform: uppercase;\n}\n\n.Button.is-disabled {\n  border-style: groove;\n}\n\n.Button.is-disabled {\n  background: pink;\n}\n```\n\n### Utilities\n\nUtilities may optionally have a value as well as a breakpoint identifier, such as `sm`, `md`, `lg`. By default, a value identifier gets concatenated by camelizing while breakpoint is inserted within the utility prefix (typically `u-`) and the actual utility name. However, this may be configured.\n\n```scss\n@include utility('background', primary) {\n  background-color: yellow;\n}\n\n@include utility('background', secondary) {\n  background-color: peachpuff;\n}\n\n@include utility('background', secondary, $breakpoint: sm) {\n  background-color: peachpuff;\n}\n```\n\nCompiles to:\n\n```css\n.u-backgroundPrimary  {\n  background-color: yellow;\n}\n\n.u-backgroundSecondary  {\n  background-color: peachpuff;\n}\n\n.u-sm-backgroundSecondary  {\n  background-color: peachpuff;\n}\n```\n\n\n### Namespace\n\nIt is recommended to insert a namespace during further pre-compilation. This could be done by [postcss-namespace](https://www.npmjs.com/package/postcss-class-namespace), [postcss-modules](https://www.npmjs.com/package/postcss-modules) or whatever other tool of your preference. However, there's also a `namespace`-mixin provided by this package which wraps its content within the given selector.\n\n```scss\n@include namespace(ns) {\n  @include component(Button) {\n    font-size: 30px;\n\n    @include modifier(primary) {\n      background: yellow;\n      border-color: yellow;\n      outline: 2px solid peachpuff;\n    }\n  }\n}\n```\n\nWhich results in:\n\n```css\n.ns-Button {\n  font-size: 30px;\n}\n\n.ns-Button--primary {\n  background: yellow;\n  border-color: yellow;\n  outline: 2px solid peachpuff;\n}\n```\n\n### Variables\n\nssuit can be configured by global variables. Please note that if you plan to build some scss-library on top of ssuit, you shouldn't touch variables but instead pass in all your specific parameters as arguments to the individual mixins and functions.\n\n```scss\n$namespace: '' !default;\n$namespace-delimiter: '-' !default;\n\n$modifier-delimiter: '--' !default;\n$modifier-style: '' !default;\n$modifier-value-delimiter: '' !default;\n\n$state-prefix: 'is-' !default;\n\n$descendent-delimiter: '-' !default;\n\n$utility-prefix: 'u-' !default;\n$utility-style: camelCase !default;\n$utility-breakpoint-delimiter: '-' !default;\n$utility-value-delimiter: '' !default;\n```\n\n\n## Development\n\nIn order to run specs, issue the following from your terminal:\n\n```cli\nnpm test\n```\n\nRun dev-server\n\n```cli\nnpm start\n```\n\nCreate a build (for whatever purpose)\n\n```cli\nnpm run build\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenignware%2Fssuit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenignware%2Fssuit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenignware%2Fssuit/lists"}