{"id":15112257,"url":"https://github.com/standardkit/styles","last_synced_at":"2025-08-19T14:32:12.863Z","repository":{"id":52853037,"uuid":"327087144","full_name":"standardkit/styles","owner":"standardkit","description":"Styles for the StandardKit Design \u0026 Component System. Configurable \u0026 Extendable. Use it with components to quickly build your web platform!","archived":false,"fork":false,"pushed_at":"2021-04-16T11:06:53.000Z","size":350,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-02T22:45:48.136Z","etag":null,"topics":["css","design-system","scss","scss-framework","standardkit"],"latest_commit_sha":null,"homepage":"https://standardkit.io","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/standardkit.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}},"created_at":"2021-01-05T18:37:54.000Z","updated_at":"2021-04-16T11:06:58.000Z","dependencies_parsed_at":"2022-09-06T16:30:26.286Z","dependency_job_id":null,"html_url":"https://github.com/standardkit/styles","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/standardkit%2Fstyles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/standardkit%2Fstyles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/standardkit%2Fstyles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/standardkit%2Fstyles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/standardkit","download_url":"https://codeload.github.com/standardkit/styles/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230359875,"owners_count":18214153,"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":["css","design-system","scss","scss-framework","standardkit"],"created_at":"2024-09-26T00:43:23.809Z","updated_at":"2024-12-19T00:42:51.757Z","avatar_url":"https://github.com/standardkit.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"| :warning: | PRE-ALPHA |\n|-----------|:----------|\n\n# StandardKit Styles\n\nSCSS Framework for the StandardKit Design \u0026 Component System\n\u003chr\u003e\n\n## Principles\n\nThe idea of StandardKit is based on a collection of thoughts and issues with the state of SCSS Frameworks, Component\nLibraries \u0026 UI Kits. To name a few:\n\n- It should be easy to use\n- It should look good by default\n- It should take into account accessibility \u0026 other web-standards\n- I want to customize variables like colors, margins or corners\n- I want to add my own custom flavors\n- I should be able to easily override anything (without !important)\n- I should be able to extend it and add my own behaviour\n- I should be able to solve problems in my or my teams way of working\n- It should guide me in the right direction\n- I do not want to repeat myself\n- HTML should be clean \u0026 simple to use\n- I don't want any boilerplate code, I just want exactly what I need in my bundle\n- I want good documentation where I can find specifically what EVERYTHING does\n- I should be able to quickly build something with it\n- Different parts of the framework should work as they do elsewhere\n\nAll of this is meant to put the developer first. You should be able to quickly \u0026 easily design \u0026 build quality\napplications for your users.\n\nThis makes StandardKit a great fit for Rapid Prototyping but also prepared for expansion.\n\nThese ideas distill into the four main principles to which we validate our framework.\n\n\u003chr\u003e  \n\n### Defaults \u0026 Standards\n\nEverything should look \u0026 work simply by default. It uses standards to give you multiple way of doing things while\nremaining consistent \u0026 straight-forward.\n\nEasy way to style a button:\n\n```html\n\n\u003cbutton class=\"button\"\u003e\n    Click\n\u003c/button\u003e\n```\n\nAn example of standards: Modifiers work the same across components.\n\n```html\n\u003c!--A button with modified margin--\u003e\n\u003cbutton class=\"button margin--xl\"\u003e\n    Click\n\u003c/button\u003e\n\n\u003c!--An alert with modified padding--\u003e\n\u003cdiv class=\"alert padding--xl\"\u003e\n    Message\n\u003c/div\u003e\n```\n\n\u003csub\u003eJust an example, it is possible with configuration to set `padding--xl` for all alerts by default\u003c/sub\u003e\n\u003chr\u003e\n\n### Multi-Path Solutions\n\nThere are no one-way solutions. Instead, we provide utilities for different strategies.\n\n\u003csub\u003eIf you find a strategy, perspective or solution that is missing, let us know!\u003c/sub\u003e\n\n\u003chr\u003e\n\n### Cascading Configuration\n\nEverything should be configurable and cascade on multiple levels.\n\n```scss\n// configuration.scss\n$components: (\n  button: (\n    default-color: primary,\n    save: (default-color: success, default-fill: outline),\n    cancel: (extend: save, default-color: error)\n  )\n);\n```\n\n```html\n\u003c!--page.html--\u003e\n\u003cbutton class=\"button\"\u003eButton\u003c/button\u003e\n\u003cbutton class=\"button--save\"\u003eSave\u003c/button\u003e\n\u003cbutton class=\"button--cancel\"\u003eCancel\u003c/button\u003e\n```\n\n\u003csub\u003eHere, the `cancel` button extends and overwrites the `save` button, which overwrite the `default` button.\u003c/sub\u003e\n\n\u003chr\u003e\n\n### Built-to-Extend\n\nEverything should be easily extendable, we even expect you to add your own customizations.\n\n```scss\n// Adding a custom color\n$colors: (\n  custom: #abcdef\n);\n\n// Extending the button and adding behaviour\n@extend .button--custom\n{\n  border-radius: 1rem;\n  transition: background-color 2s ease-out;\n}\n```\n\n\u003chr\u003e\n\n## Modifiers, Flavors, Components \u0026 Types\n\n\u003chr\u003e\n\n### Modifiers\n\nA modifier is a characteristic that can be modified. Something that you can change. Examples are:\n\n- `color`\n- `fill`\n- `margin`\n\n\u003csub\u003eExample selection, please check the documentation website for a full list.\u003c/sub\u003e\n\nAll modifiers work the same from the outside. For example to apply a different `padding` to a component, you would say:\n\n```html\n\n\u003cdiv class=\"padding--xl\"\u003e\n    A div with padding 'xl'\n\u003c/div\u003e\n```\n\nAs you can probably tell, we use two hyphens (BEM-style) to select an alternative.\n\n\u003chr\u003e\n\n### Flavors\n\nModifiers can have a number of flavors defined. For example:\n\n```scss\n$color: (\n  error: red,\n  warning: orange,\n  info: blue,\n  success: green\n);\n```\n\n\u003csub\u003eThis is a simplified example. Check the `theme` for the actual values.\u003c/sub\u003e\n\n\u003chr\u003e\n\n### Custom Flavors\n\nThere are two types of modifiers; `static` \u0026 `configurable`.\n\n#### Static Modifiers\n\nAn example of a `static` modifier is:\n\n- `case` (`lowercase`, `uppercase` `capitalized`).\n\nSince there is a limited / hardcoded number of options here, it doesn't make sense to expand.\n\n\u003csub\u003e\nIf however you feel that there is a usecase to expand on one of the static modifiers, \nplease create an issue and let us know! \u003cbr\u003e\nStandardKit is never perfect and you should be able to use it the way you want it.\n\u003c/sub\u003e\n\n#### Configurable Modifiers\n\nMost modifiers are configurable. This means that you can add your own flavors, as well as override pre-defined ones. For\nexample:\n\n```scss\n// Override the error color to 'purple' and adding our own 'custom' color\n$colors: (\n  error: purple,\n  custom: hotpink\n);\n```\n\nNow you could use this the following way:\n\n```html\n\n\u003cdiv class=\"color--custom\"\u003e\n    My custom colored div\n\u003c/div\u003e\n```\n\n\u003chr\u003e\n\n### Components\n\nA component (e.g. `alert` or `button`) usually has a number of modifiers available. For instance, let's look at\nthe `button` component.\n\n```html\n\n\u003cbutton class=\"button color--primary margin--xl padding--xs\"\u003e\n    Click me\n\u003c/button\u003e\n```\n\nNext to the modifiers that you can see are being set here, like `padding--xs`, the component also has a number of\ndefault modifiers. As you might have expected from StandardKit, you can override / configure this. For example:\n\n```scss\n$components: (\n  button: (\n    default-color: primary,\n    default-margin: xl,\n    default-padding: xs\n  )\n);\n```\n\nNow, you can just use:\n\n```html\n\n\u003cbutton class=\"button\"\u003e\n    I am a configured button\n\u003c/button\u003e\n```\n\nThis becomes useful when you have more buttons scattered through-out your application.\n\n\u003chr\u003e\n\n### Types\n\nMost of the time, applications tend to have multiple definitions of a button. For example, we might have a `cta-button`,\na `save-button` and a `cancel-button`. Using just the component configuration, you can only optimize for one situation.\nWith types, we don't have to.\n\n##### Types are a compound component definition that combines multiple modifiers on top of the default modifiers\n\nFor example:\n\n```scss\n$components: (\n  button: (\n    default-color: primary,\n    cta: (default-color: custom, default-margin: xl),\n    save: (default-padding: xs),\n    cancel: (default-color: error)\n  )\n);\n```\n\nTo now use these three buttons, I can just:\n\n```html\n\n\u003cbutton class=\"button--cta\"\u003eCall-to-Action\u003c/button\u003e\n\n\u003cbutton class=\"button--save\"\u003eSave\u003c/button\u003e\n\n\u003cbutton class=\"button--cancel\"\u003eCancel\u003c/button\u003e\n```\n\nVery simple yet powerful.\n\n\u003chr\u003e\n\n### Special Cases\n\nA couple of modifiers are special.\n\n#### Color \u0026 Fill Combo\n\nThis is relevant because `color` depends on `fill`. \u003cbr\u003e\nFor instance, with a `fill: 'fill'` the `text` color is the `contrast` color and the `background` is the `main` color.  \n\u003csub\u003eSee `Color Generation` for more information about colors and their (generated) subsets.\u003c/sub\u003e\n\n#### Complex Modifiers\n\nSome modifiers can be configured a little bit more than others. For example:\n\n```scss\n// Colors\n$colors: (\n  primary: #fff,\n  secondary: (main: #fff, complement: #f00, contrast: #000, complement-contrast: #0ff)\n);\n\n// Elevation\n$elevation: (\n  high: 20,\n  custom: () // TODO : Implement \n);\n```\n\n\u003csub\u003eIn this case all values are optional, but you need at least `main` or `complement` to generate the others.\u003c/sub\u003e\n\n#### Breakpoints\n\nBreakpoints are configurable modifiers, you can add or change them to your liking. \u003cbr\u003e\nBy default it's using `em` but feel free to change to what you want.\n\nHowever, sometimes you want to change the behaviour of other modifiers based on the viewport. For example:\n\n```scss\n$margins: (\n  custom: (start: square, s: 3rem, l: round)\n)\n```\n\nAs you can see, something weird is going on. I'm using `round` which is one of the flavors, but I'm also\nspecifying `3rem`, an actual value. This always looks for the flavor first. So it would be unwise to call a flavor by\none of the values.\n\nStandardKit uses the `start` keyword to distinguish if this is a breakpoint-scenario. This is only needed in case of\ncomplex modifiers, like `color` or `elevation`.\n\n##### This means that StandardKit is 'mobile-first'\n\n## Configuration\n\n### Theme Options\n\nA list of the default theme options.\n\n```scss\n$options: (\n  prefer-dark-colors: false, \n  exclude-default-theme-selector: false,\n  contrast-threshold: 42%,\n  contrast-value-percentage: 2%,\n  complement-value-percentage: 7%,\n  brightness-weights: (\n    red: .229,\n    green: .576,\n    blue: .119\n  ),\n  include-fonts : true or false, // default: true\n  merge-modifiers: 'replace' or 'merge', // default: merge\n  modifier-sets: 'none' or 'minimal' or 'basic' or 'all' // default: all\n)\n```\n\n\u003chr\u003e\n\n### Modifier Options\n\n```scss\n$configuration: (\n  color-options: (\n    set: 'none' or 'minimal' or 'basic' or 'all',\n    exclude: [],\n    include: [],\n    merge: 'merge' or 'replace'\n  )\n)\n```\n\n## Modifiers\n\nBelow is a list of all modifiers and their default flavors. The values in the format are placeholders, check the theme\nreference for actual values.\n\n### Configurable Modifiers\n\n#### Complex ( e.g. #fff or (main: #fff, contrast: #000) )\n- color\n- fill\n- elevation\n- breakpoint\n- animation\n  \n#### Dynamic ( value based e.g. 1rem )\n- corner\n- border\n- font\n- font-import\n- margin\n- padding\n- size\n- width\n\n### State ( combines other modifiers on state e.g. different fill on hover )\n- active\n- disabled\n- focus\n- hover\n\n## Static\nFor these modifiers you can not add your own flavors. However, you can of course still in- or exclude certain sets or\nindividual standard flavors.\n- alignment\n- case\n- highlight\n- position\n- vertical-alignment\n\n### Complex Modifiers\n\n| Modifier | Format | Description | \n|---|---|---|\n\u0026nbsp;|\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\ncolor | #fff, red \u003cbr\u003e(\u003cbr\u003emain: #fff,\u003cbr\u003ecomplement: #fff,\u003cbr\u003econtrast: #fff,\u003cbr\u003ecomplement-contrast:\u0026nbsp;#fff\u003cbr\u003e) | A single color or a color map. all values of the map are optional, but it needs at least a main or a complement to generate the rest.\nfill | (\u003cbr\u003etext: main,\u003cbr\u003eborder: contrast,\u003cbr\u003ebackground: complement\u003cbr\u003e) | The way color is used to fill elements.\nelevation |\n\n## Components\n\n- alert\n- button\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstandardkit%2Fstyles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstandardkit%2Fstyles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstandardkit%2Fstyles/lists"}