{"id":13467340,"url":"https://github.com/tedconf/shed-css","last_synced_at":"2025-03-26T01:30:46.140Z","repository":{"id":138189205,"uuid":"58952898","full_name":"tedconf/shed-css","owner":"tedconf","description":"Functional and customizable CSS utilities with familiar names","archived":true,"fork":false,"pushed_at":"2017-12-22T00:11:54.000Z","size":515,"stargazers_count":92,"open_issues_count":4,"forks_count":8,"subscribers_count":17,"default_branch":"master","last_synced_at":"2024-10-29T20:36:46.980Z","etag":null,"topics":["atomic-css","css","functional-css","layout","utility-classes"],"latest_commit_sha":null,"homepage":"http://tedconf.github.io/shed-css/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tedconf.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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}},"created_at":"2016-05-16T17:30:44.000Z","updated_at":"2024-07-01T14:53:49.000Z","dependencies_parsed_at":"2024-01-18T20:05:08.067Z","dependency_job_id":null,"html_url":"https://github.com/tedconf/shed-css","commit_stats":null,"previous_names":[],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tedconf%2Fshed-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tedconf%2Fshed-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tedconf%2Fshed-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tedconf%2Fshed-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tedconf","download_url":"https://codeload.github.com/tedconf/shed-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245571714,"owners_count":20637383,"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":["atomic-css","css","functional-css","layout","utility-classes"],"created_at":"2024-07-31T15:00:55.217Z","updated_at":"2025-03-26T01:30:45.625Z","avatar_url":"https://github.com/tedconf.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"# shed.css – The Beginning of the End of CSS\n\nShed.css came about after I got tired of writing CSS. All of the CSS in the world has already been written, and there's no need to rewrite it in every one of our projects. After a bikeshedding session with [@brnnbrn](https://mobile.twitter.com/brnnbrn) \u0026 [@samselikoff](https://mobile.twitter.com/samselikoff), and [me](http://mobile.twitter.com/vinspee), we came up with a naming scheme we were satisfied with, and [shed.css](http://github.com/tedconf/shed-css) was born.\n\n[What does shed accomplish?](http://tedconf.github.io/shed-css/docs.html#essential-concepts)\n\n[What does it look like?](http://tedconf.github.io/shed-css/docs.html#examples)\n\n## Use\n\n#### _In a hurry? Clone [this repo](https://github.com/VinSpee/shed-starter) to get going with a starter kit and skip all of the setup._\n\n### First, install shed using [npm](http://www.nearform.com/nodecrunch/nodejs-sudo-free/).\n\n    ❯ yarn add -D shed-css\n\nAt this point, we come to a fork in the road. Choose one of these options:\n\n#### 🚳 Single Speed\n\n— I just want to use it.\n\n    @import \"shed-css/dist/index.css\";\n\n#### ⚛️ React\n\n— I want to use it in React.js\n\nShed has a [react companion](https://github.com/VinSpee/react-shed) implemented using [styled components](https://styled-components.com/). It comes with an optional [babel plugin](https://github.com/VinSpee/babel-plugin-shed) which allows you to write components like this:\n\n    \u003ch1.shed\n    \tf=\"4\"\n    \tpx=\"2\"\n    \tc=\"white\"\n    \tbg=\"blue\"\n    \u003e\n    \tPadded Headline\n    \u003c/h1.shed\u003e\n\n#### 🖌 Fixie\n\n— I want to customize the scale and fonts.\n\nShed is written in [PostCSS](http://postcss.org/) using future css syntax, but is distributed as future css and Sass. To customize the scale and fonts, you must follow one of these two paths:\n\n##### PostCSS\n\ninstall shed's peer dependencies ([postcss](http://postcss.org) and [cssnext](http://cssnext.io/postcss)) and add them to your build pipeline.\n\n##### Install peer deps:\n\n    npm ls 2\u003e/dev/null | grep \\\"UNMET PEER DEPENDENCY\\\" | awk '{print $NF}' | xargs yarn add -D\n\n##### Customize Variables:\n\n    @import \"shed-css/lib/index.css\";\n\n    :root {\n    \t/*\n    \t * These \"z\" values reflect the steps on the scale.\n    \t * Numbers prefixed with \"dot\" mean they're below\n    \t * the base font size.\n    \t */\n    \t--z-dot1: .19381rem\n    \t--z-dot2: .23257rem\n    \t--z-dot3: .27908rem\n    \t--z-dot4: .3349rem\n    \t--z-dot5: .40188rem\n    \t--z-dot6: .48225rem\n    \t--z-dot7: .5787rem\n    \t--z-dot8: .69444rem\n    \t--z-dot9: .83333rem\n    \t--z0: 0;\n    \t--z1: 1rem\n    \t--z2: 1.2rem\n    \t--z3: 1.44rem\n    \t--z4: 1.728rem\n    \t--z5: 2.0736rem\n    \t--z6: 2.48832rem\n    \t--z7: 2.98598rem\n    \t--z8: 3.58318rem\n    \t--z9: 4.29982rem\n    \t--z10: 5.15978rem\n\n    \t/*\n    \t * These \"f-f\" values change the font family utilties\n    \t * in the \"font family\" section.\n    \t */\n    \t--f-f-sans: sans-serif;\n    \t--f-f-serif: serif;\n    \t--f-f-mono: monospace;\n\n    \t/*\n    \t * These \"l-h\" values change the line height utilties\n    \t * in the \"line height\" section. Unitless numbers recommended.\n    \t */\n    \t--l-h--default: 1;\n    \t--l-h--tight: 1.2;\n    \t--l-h--normal: 1.5;\n    \t--l-h--loose: 1.75;\n\n    \t/*\n    \t * These \"l-s\" values change the letter spacing\n    \t * utilties in the \"letter spacing\" section.\n    \t * Em values recommended.\n    \t */\n    \t--l-s--default: normal;\n    \t--l-s--tight: -.04em;\n    \t--l-s--normal: -.01em;\n    \t--l-s--loose: .1em;\n    }\n\nNow, you might want to get your brand colors in there by [creating a custom theme.](http://tedconf.github.io/shed-css/docs.html#custom-theme)\n\n\n#### 🚲🏚 Trailblazer\n\n— I demand complete control (pro-level bikeshedder)\n\n[See the full customization guide](http://tedconf.github.io/shed-css/customization.html)\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftedconf%2Fshed-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftedconf%2Fshed-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftedconf%2Fshed-css/lists"}