{"id":26121853,"url":"https://github.com/ipfs-shipyard/ipfs-css","last_synced_at":"2025-04-13T13:06:08.273Z","repository":{"id":37677327,"uuid":"119716282","full_name":"ipfs-shipyard/ipfs-css","owner":"ipfs-shipyard","description":"The single-purpose css class names and font-face config to IPFS up your UI.","archived":false,"fork":false,"pushed_at":"2024-06-21T04:07:33.000Z","size":94555,"stargazers_count":24,"open_issues_count":12,"forks_count":14,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-04-13T13:05:54.808Z","etag":null,"topics":["css","dweb","ipfs","ipfs-gui","scss","theme"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/ipfs-shipyard.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2018-01-31T16:56:56.000Z","updated_at":"2025-03-11T13:45:42.000Z","dependencies_parsed_at":"2025-03-10T14:49:17.177Z","dependency_job_id":null,"html_url":"https://github.com/ipfs-shipyard/ipfs-css","commit_stats":{"total_commits":136,"total_committers":12,"mean_commits":"11.333333333333334","dds":0.6617647058823529,"last_synced_commit":"8f52644b4cf5e7976c643ce7173cb4f49a1754e9"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipfs-shipyard%2Fipfs-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipfs-shipyard%2Fipfs-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipfs-shipyard%2Fipfs-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipfs-shipyard%2Fipfs-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ipfs-shipyard","download_url":"https://codeload.github.com/ipfs-shipyard/ipfs-css/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248717242,"owners_count":21150389,"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","dweb","ipfs","ipfs-gui","scss","theme"],"created_at":"2025-03-10T14:36:58.473Z","updated_at":"2025-04-13T13:06:08.241Z","avatar_url":"https://github.com/ipfs-shipyard.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ipfs-css\n\nThe single-purpose CSS class names and @font-face config to IPFS up your UI.\n\n```css\n/* ---- font ----- */\n.sans-serif { font-family: 'Inter', system-ui, sans-serif; }\n.montserrat { font-family: 'Montserrat', 'Verdana', system-ui, sans-serif; }\n.monospace { font-family: Consolas, monaco, monospace; }\n\n/* ---- color ----- */\n.navy { color: #0b3a53; }\n.navy-muted { color: #244e66; }\n.aqua { color: #69c4cd; }\n.aqua-muted { color: #9ad4db; }\n\n/* ...and (just a little) more! */\n```\n\nPairs well with [tachyons].\n\n## Install\n\nAdd `ipfs-css` to your project via npm:\n\n```sh\nnpm install ipfs-css\n```\n\n## Usage\n\nOnce you've installed ipfs-css from npm, the CSS and SCSS files and the web-fonts are available from your `node_modules/ipfs-css` directory.\n\nIf you are set up with a build process that lets you import css files directly from `node_modules`, then you can just add the following to your CSS file.\n\n```css\n@import 'tachyons'; /* Optional, jolly good tho */\n@import 'ipfs-css';\n```\n\nThe file includes font-face definitions and single purpose CSS class names that you can compose freely, to create your lovely UI.\n\n```html\n\u003cheader class='pa2 bg-navy'\u003e\n  \u003ch2 class='ma0 montserrat aqua'\u003e\n    OH HAI! It's so nice to see you again.\n  \u003c/h2\u003e\n\u003c/header\u003e\n```\n\n### CSS in JS\n\nYou can import the `theme.json` file which can be used with a [ThemeProvider] component.\n\nAll **the CSS atoms are generated** from that, so you can be sure you're using the same values.\n\n### Less\n\n`ipfs.css` is a regular CSS file, so you can import it normally. Each declaration has a single purpose, so if you prefer to compose your rules outside the DOM, you can safely use them as mixins:\n\n```less\n.my-lovely-widget {\n  .aqua;\n  .bg-navy;\n  .montserrat;\n}\n```\n\n### SCSS\n\nWhile `ipfs.css` contains everything you need, if you prefer variables for fonts, colors and gradients, these are there for you in `theme.scss`.\n\n## Icons\n\nSee: https://dweb.link/ipfs/bafybeiebays3i7aem7tptga3kilzux7f5gz6czl4dietazgutcjhozjviu\n\n## Colors\n\n\u003cimg title='#0b3a53' src='https://swatch.now.sh?color=%230b3a53\u0026name=navy' /\u003e\u003cimg title='#244e66' src='https://swatch.now.sh?color=%23244e66\u0026name=navy-muted' /\u003e\u003cimg title='#69c4cd' src='https://swatch.now.sh?color=%2369c4cd\u0026name=aqua' /\u003e\u003cimg title='#9ad4db' src='https://swatch.now.sh?color=%239ad4db\u0026name=aqua-muted' /\u003e\n\n\u003cimg title='#b7bbc8' src='https://swatch.now.sh?color=%23b7bbc8\u0026name=gray' /\u003e\u003cimg title='#d9dbe2' src='https://swatch.now.sh?color=%23d9dbe2\u0026name=gray-muted' /\u003e\u003cimg title='#34373f' src='https://swatch.now.sh?color=%2334373f\u0026name=charcoal' /\u003e\u003cimg title='#7f8491' src='https://swatch.now.sh?color=%237f8491\u0026name=charcoal-muted' /\u003e\n\n\u003cimg title='#ea5037' src='https://swatch.now.sh?color=%23ea5037\u0026name=red' /\u003e\u003cimg title='#f36149' src='https://swatch.now.sh?color=%23f36149\u0026name=red-muted' /\u003e\u003cimg title='#f39021' src='https://swatch.now.sh?color=%23f39021\u0026name=yellow' /\u003e\u003cimg title='#f9a13e' src='https://swatch.now.sh?color=%23f9a13e\u0026name=yellow-muted' /\u003e\n\n\u003cimg title='#378085' src='https://swatch.now.sh?color=%23378085\u0026name=teal' /\u003e\u003cimg title='#439a9d' src='https://swatch.now.sh?color=%23439a9d\u0026name=teal-muted' /\u003e\u003cimg title='#0cb892' src='https://swatch.now.sh?color=%230cb892\u0026name=green' /\u003e\u003cimg title='#0aca9f' src='https://swatch.now.sh?color=%230aca9f\u0026name=green-muted' /\u003e\n\n\u003cimg title='#edf0f4' src='https://swatch.now.sh?color=%23edf0f4\u0026name=snow' /\u003e\u003cimg title='#f7f8fa' src='https://swatch.now.sh?color=%23f7f8fa\u0026name=snow-muted' /\u003e\u003cimg title='#117eb3' src='https://swatch.now.sh?color=%23117eb3\u0026name=link' /\u003e\n\n## Releasing\n\nFirst, clean and build the CSS and the docs.\n\n```console\n# Clean then build your local workspace\n$ npm run clean\n$ npm run build\n```\n\nNext, with IPFS running locally, add the docs to IPFS, to get the new CID.\n\n```console\n# Add the docs to IPFS to get the CID\n$ npm run -s deploy:docs\nQmQYzfzGKAeBWgarrmTSsG2PJ8AFfFEBprhVBFaudcFTof\n```\n\nPin the CID to ipfs-cluster (via #pinbot on IRC or your preferred method). Update the README.md with the new docs link.\n\nThen bump the version, push to GitHub and publish to npm. If you are adding an icon, that's a minor release. Fixing an issue with an existing icon would be a patch. Changing any of the color values would be at least a minor. Changing the naming scheme for the CSS classes would be a major release.\n\n```console\n# use npm to bump the version and tag\n$ npm version minor\n\n# Push the changes back to the repo\n$ git push origin master\n$ git push --tags\n\n# PUBLISH!\n$ npm publish\n```\n\n## Contribute\n\nContributions are more than welcome! Check out the [currently open issues](https://github.com/ipfs-shipyard/ipfs-css/issues) and start hacking on anything that sounds interesting. Issues are labeled with a variety of tags to help you find a good fit — you may wish to start with the [`help-wanted`](https://github.com/ipfs-shipyard/ipfs-share-files/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) tag.\n\nTo contribute to IPFS in general, check out the wide variety of opportunities [here](https://docs.ipfs.io/community/contribute/ways-to-contribute).\n\nThe IPFS community believes that our mission is best served in an environment that is friendly, safe, and accepting, and free from intimidation or harassment. To that end, we ask that everyone involved in IPFS read and respect our [code of conduct](https://github.com/ipfs/community/blob/master/code-of-conduct.md).\n\n## License\n\nThe [Monserrat font family](https://github.com/JulietaUla/Montserrat) © The Montserrat Project Authors (https://github.com/JulietaUla/Montserrat) is used under the [SIL Open Font License, Version 1.1.](https://github.com/JulietaUla/Montserrat/blob/21047be7ebcae5e71328358fcf20566cb85383ec/OFL.txt)\n\nThe [Inter font family](https://github.com/rsms/inter/blob/master/LICENSE.txt) © The Inter Project Authors (me@rsms.me) is used under the [SIL Open Font License, Version 1.1.](https://github.com/rsms/inter/blob/fa8a99377e8d51d6c0721a4b4c96d91911399dcf/LICENSE.txt)\n\nThe home icon © Icons8 is under their [Free License](https://icons8.com/license)\n\nAll other documents and icons are [CC-BY-SA 3.0] license © 2018 Protocol Labs Inc.\n\nCode is under the [MIT](./LICENSE) © 2018 Protocol Labs Inc.\n\n[ipfs.io]: https://ipfs.io\n[tachyons]: http://tachyons.io\n[CC-BY-SA 3.0]: https://ipfs.io/ipfs/QmVreNvKsQmQZ83T86cWSjPu2vR3yZHGPm5jnxFuunEB9u\n[ThemeProvider]: https://glamorous.rocks/advanced/#theming\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fipfs-shipyard%2Fipfs-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fipfs-shipyard%2Fipfs-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fipfs-shipyard%2Fipfs-css/lists"}