{"id":15041525,"url":"https://github.com/woylie/barker","last_synced_at":"2025-04-14T20:23:01.941Z","repository":{"id":37941450,"uuid":"435818528","full_name":"woylie/barker","owner":"woylie","description":"SCSS starter kit for design systems","archived":false,"fork":false,"pushed_at":"2025-04-14T05:49:50.000Z","size":7023,"stargazers_count":9,"open_issues_count":9,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-14T06:34:04.899Z","etag":null,"topics":["design-system","sass","scss","scss-framework","starter-kit"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/woylie.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":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"woylie"}},"created_at":"2021-12-07T09:30:17.000Z","updated_at":"2025-04-14T05:49:52.000Z","dependencies_parsed_at":"2024-02-10T01:23:44.785Z","dependency_job_id":"a221f4ce-54dc-4c2b-a15f-845922f8fa79","html_url":"https://github.com/woylie/barker","commit_stats":null,"previous_names":["woylie/tinnef-scss-starter-kit"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/woylie%2Fbarker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/woylie%2Fbarker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/woylie%2Fbarker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/woylie%2Fbarker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/woylie","download_url":"https://codeload.github.com/woylie/barker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248952939,"owners_count":21188526,"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":["design-system","sass","scss","scss-framework","starter-kit"],"created_at":"2024-09-24T20:46:11.877Z","updated_at":"2025-04-14T20:23:01.914Z","avatar_url":"https://github.com/woylie.png","language":"SCSS","funding_links":["https://github.com/sponsors/woylie"],"categories":[],"sub_categories":[],"readme":"# Barker\n\nBarker is an SCSS starter kit for design systems.\n\nIt includes:\n\n- A [Style Dictionary](https://v4.styledictionary.com/) configuration for defining design tokens.\n- A sensible project layout and organized SCSS files for themes, components, layouts, and base styles.\n- SCSS mixins and functions for accessing design tokens.\n- [Esbuild](https://esbuild.github.io/) configuration with [dart-sass](https://sass-lang.com/dart-sass/), [PostCSS](https://postcss.org/), [autoprefixer](https://github.com/postcss/autoprefixer), and [PurgeCSS](https://purgecss.com/).\n- A [Stylelint](https://stylelint.io/) configuration.\n- [pnpm](https://pnpm.io/) as package manager.\n\nSCSS is used to generate functions and utility classes from the design\ntokens. You can either use a set of accessor functions to reference the design\ntokens or use SCSS variables. Although SCSS functions or variables are used in\nthe code, the final output relies on CSS custom properties (variables). This\nensures that only defined variables are used. Themes are created by assigning\ndifferent values to these CSS custom properties.\n\n## Usage\n\nThis kit cannot be installed and does not include any generators. Instead, clone\nthe repository into your project and adapt it to your needs.\n\n```bash\ngit clone git@github.com:woylie/barker.git\ncd barker\nrm -rf .github .git\npnpm install\n```\n\n## Configuration\n\n- `build.js`: Contains the build configuration for Esbuild, as well as the\n  PostCSS configuration and PurgeCSS configuration (disabled by default).\n- `style-dictionary.js`: Contains the configuration for Style Dictionary. You\n  can modify the output formats for the design tokens here. Note that the SCSS\n  files depend on the `scss` output format.\n\n## Commands\n\n| Description                                         | Command                   |\n| --------------------------------------------------- | ------------------------- |\n| Development build (tokens, CSS, JS, etc.)           | `pnpm build:dev`          |\n| Production build (tokens, CSS, JS, etc.)            | `pnpm build:prod`         |\n| Watch mode (does not watch Style Dictionary tokens) | `pnpm build:dev:watch`    |\n| Build Style Dictionary tokens                       | `pnpm build:tokens`       |\n| Run linters                                         | `pnpm lint`               |\n| Fix linter issues                                   | `pnpm lint:fix`           |\n| Run Prettier                                        | `pnpm lint:prettier`      |\n| Fix Prettier issues                                 | `pnpm lint:prettier:fix`  |\n| Run Stylelint                                       | `pnpm lint:stylelint`     |\n| Fix Stylelint issues                                | `pnpm lint:stylelint:fix` |\n\n## Folder Structure\n\n    .\n    ├── build                   # Build artefacts (token definitions, CSS, etc.)\n    │   ├── css                 # CSS output\n    │   └── tokens              # Token output\n    │       ├── css             # CSS custom properties\n    │       ├── js              # JavaScript\n    │       ├── json            # JSON definitions\n    │       └── scss            # SCSS mixins and variables\n    ├── src                     # Source files\n    │   ├── css                 # Styles\n    │   ├── js                  # JavaScript\n    │   └── tokens              # Design Tokens\n    └── ...\n\n### Build Folder\n\nThe build folder contains the build artefacts.\n\n    .\n    ├── ...\n    ├── build                   # Build artefacts\n    │   ├── css                 # CSS output\n    │   └── tokens              # Token output\n    │       ├── css             # CSS custom properties\n    │       ├── js              # JavaScript\n    │       ├── json            # JSON definitions\n    │       └── scss            # SCSS mixins and variables\n    └── ...\n\n### CSS Folders\n\nThe CSS styles are divided into the layers `base`, `components`, `layouts`,\n`themes`, and `utilities`. More details about each layer can be found in the\ncorresponding `_index.scss` files.\n\n    .\n    ├── ...\n    ├── src\n    │   ├── css\n    │   │   ├── base                    # Global base layer\n    │   │   │   ├── _animations.scss    # Keyframe animations\n    │   │   │   ├── _general.scss       # Global styles\n    │   │   │   ├── _index.scss         # Entry point for base layer\n    │   │   │   └── _typography.scss    # Global typography styles\n    │   │   ├── components              # Components are styled elements\n    │   │   ├── layouts                 # Layouts arrange components on the page\n    │   │   ├── themes                  # Place for light/dark themes etc.\n    │   │   ├── utilities               # Utility classes generated from design tokens\n    │   │   ├── _extends.scss           # SCSS placeholders for @extend\n    │   │   ├── _functions.scss         # SCSS functions for using design tokens\n    │   │   ├── _mixins.scss            # SCSS mixins\n    │   │   └── main.scss               # Entry point\n    │   └── ...\n    └── ...\n\n## Resources\n\n- The design token structure is based on [Design Tokens Format](https://design-tokens.github.io/community-group/format/) where possible.\n- The structure is inspired by [CubeCSS](https://cube.fyi/), even though it isn't a faithful implementation.\n- Barker is based on ideas described in the\n  [Design Systems article series](https://www.mathiaspolligkeit.com/tags/design-systems/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwoylie%2Fbarker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwoylie%2Fbarker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwoylie%2Fbarker/lists"}