{"id":21890854,"url":"https://github.com/chantastic/elements","last_synced_at":"2026-04-12T04:37:06.003Z","repository":{"id":141974457,"uuid":"155618561","full_name":"chantastic/elements","owner":"chantastic","description":"Created with CodeSandbox","archived":false,"fork":false,"pushed_at":"2018-11-07T18:21:09.000Z","size":90,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-22T03:11:45.893Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/github/chantastic/elements","language":"JavaScript","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/chantastic.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-31T20:22:15.000Z","updated_at":"2019-06-25T14:10:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"00b02f1f-4f16-4a9b-92ea-d488a3492111","html_url":"https://github.com/chantastic/elements","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chantastic/elements","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantastic%2Felements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantastic%2Felements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantastic%2Felements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantastic%2Felements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chantastic","download_url":"https://codeload.github.com/chantastic/elements/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantastic%2Felements/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31704492,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T21:17:31.016Z","status":"online","status_checked_at":"2026-04-12T02:00:06.763Z","response_time":58,"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":"2024-11-28T12:17:41.332Z","updated_at":"2026-04-12T04:37:05.962Z","avatar_url":"https://github.com/chantastic.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Elements\n\n## What is this\n\nIt's an exploration of of a design system artifact at planning center.  \nIt uses standard CSS for styling and theming.  \nIt uses JS (likely TS soon) functions to augement className composition.  \nIt will expose React components for use in React environments.\n\n## What's a design system\n\nLet's start with what it's not.  \nIt's not an artifact in your favorite tech.  \nA design system is rules and boundaries.  \nIt's like [The Elements of Style](https://www.amazon.com/Elements-Style-William-Strunk-Jr/dp/194564401X) by William Strunk .\nOr [The Elements of Typographic Style](https://www.amazon.com/Elements-Typographic-Style-Version-Anniversary/dp/0881792128/ref=sr_1_3?s=books\u0026ie=UTF8\u0026qid=1541017945\u0026sr=1-3\u0026keywords=robert+bringhurst) by Robert Bringhurst.\n\nA design system is the what and why.  \nNot the how.\n\nOur design system lives in articles at [planningcenter.design](https://planningcenter.design).decodeURI\n\nThis is an artifact, using the elements of ui style retained there.\n\n## Core concepts\n\n### Standard\n\nStandards stand the test of time.  \nThey're widely documented.  \nThey're easier to train people in.  \nThey're easier to hire for.  \nThey're stack agnostic.  \n\nThe main exports of this project are browser-standard — CSS and JavaScript.  \nIn addition, there are non-standard React component consumers.\n\n## Thinking as of 11/4\n\nThis is how it decomposes:\n\n```jsx\n// App-level\n\u003cLargeCreateAction /\u003e\n\u003cCreateAction size={6} /\u003e\n\u003cDestroyAction size={6} /\u003e\n\n// primary-library-export\nimport Action from \"@planningcenter/elements/action\"\n\u003cAction size={6} variant=\"create\" /\u003e\n\n// library-level export\nexport function Action(props) {\n  return \u003cButton\n    className={[\n      \"action\",\n      `action--variant_${props.varient}`,\n      `action--size_${props.size}`,\n    ].join(\" \")}\n  /\u003e\n}\n\n// browser-output\n\u003cbutton\n  type=\"button\"\n  className=\"button button--variant_create button--size_6\"\n/\u003e\n```\n\n\n\n## Thinking as of 11/1\n\n### \"button\" is the wrong abstraction\n\nI find `button` to be subtly subversive.  \nI question if it's the main contributor to poor markup in the anchor/button decision.\n\nDuring a Free-Week research project, I floated the idea of `action` to Dustin, Jon, and Allie.  \nThey were on board.\n\nIt maps better to the action driven names I proposed to Groups/Giving years ago.  \nDustin says they feel like a very robust primitive.\n\nI'm going to roll with those and see how it goes.\n\nI'd like to see these classes present themselves as markup-agnostic.  \nThis would be inline with that goal.\n\nExample: `create-action`, `destroy-action`, `navigation-action | route-action`.\n\n## Thinking as of 10/31\n\nThis is how it decomposes:\n\n```jsx\n// App-level\n\u003cLargeCreateButton /\u003e\n\u003cCreateButton size={6} /\u003e\n\u003cActionButton size={6} /\u003e\n\u003cDestroyButton size={6} /\u003e\n\n// primary-library-export\n\u003cElementsButton size={6} variant=\"create\" /\u003e\n\n// secondary-library-export\n\u003cButton\n  className={[\n    \"button\",\n    buttonAction(\"create\"),\n    buttonSize(6)\n  ].join(\" \")}\n/\u003e\n\n// browser-output\n\u003cbutton\n  type=\"button\"\n  className=\"button button--variant_create button--size_6\"\n/\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchantastic%2Felements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchantastic%2Felements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchantastic%2Felements/lists"}