{"id":13629231,"url":"https://github.com/tachyons-css/tachyons-custom","last_synced_at":"2025-04-13T04:59:10.852Z","repository":{"id":48029536,"uuid":"69865751","full_name":"tachyons-css/tachyons-custom","owner":"tachyons-css","description":"Tachyons with variables: for easy customization","archived":false,"fork":false,"pushed_at":"2021-08-10T20:09:08.000Z","size":305,"stargazers_count":206,"open_issues_count":4,"forks_count":31,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-04-13T04:59:06.154Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/tachyons-css.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":"code-of-conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-03T11:46:51.000Z","updated_at":"2025-01-07T08:04:17.000Z","dependencies_parsed_at":"2022-08-12T17:01:12.328Z","dependency_job_id":null,"html_url":"https://github.com/tachyons-css/tachyons-custom","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tachyons-css%2Ftachyons-custom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tachyons-css%2Ftachyons-custom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tachyons-css%2Ftachyons-custom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tachyons-css%2Ftachyons-custom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tachyons-css","download_url":"https://codeload.github.com/tachyons-css/tachyons-custom/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248665758,"owners_count":21142123,"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":[],"created_at":"2024-08-01T22:01:05.210Z","updated_at":"2025-04-13T04:59:10.830Z","avatar_url":"https://github.com/tachyons-css.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"# TACHYONS CUSTOM\n\nYou can find a generator for these themes at https://components.ai/tachyons-theme\n\nFunctional css for humans.\n\nQuickly build and design new UI without writing css.\n\nThis is a fork of [Tachyons](https://github.com/tachyons-css/tachyons) with values being\nconfigurable in a single variables file. More information about Tachyons can be found at http://tachyons.io\n\n##### src/_variables.css\n```\n/*\n\n    VARIABLES   \n\n*/\n\n@custom-media --breakpoint-not-small screen and (min-width: 30em);\n@custom-media --breakpoint-medium screen and (min-width: 30em) and (max-width: 60em);\n@custom-media --breakpoint-large screen and (min-width: 60em);\n\n:root {\n  --sans-serif: -apple-system, BlinkMacSystemFont, -system-ui, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;\n  --serif: athelas, serif;\n  --monospace: SFMono, consolas, monaco, monospace;\n\n  --font-size-headline: 6rem;\n  --font-size-subheadline: 5rem;\n  --font-size-1: 3rem;\n  --font-size-2: 2.25rem;\n  --font-size-3: 1.5rem;\n  --font-size-4: 1.25rem;\n  --font-size-5: 1rem;\n  --font-size-6: 0.875rem;\n  --font-size-7: 0.75rem;\n\n  --measure: 30em;\n  --measure-narrow: 20em;\n  --measure-wide: 34em;\n\n  --letter-spacing-tight:-.05em;\n  --letter-spacing-1:.1em;\n  --letter-spacing-2:.25em;\n\n  --line-height-solid: 1;\n  --line-height-title: 1.25;\n  --line-height-copy: 1.5;\n\n  --spacing-extra-small: 0.25rem;\n  --spacing-small: 0.5rem;\n  --spacing-medium: 1rem;\n  --spacing-large: 2rem;\n  --spacing-extra-large: 4rem;\n  --spacing-extra-extra-large: 8rem;\n  --spacing-extra-extra-extra-large: 16rem;\n\n  --border-radius-1: 0.125rem;\n  --border-radius-2: 0.25rem;\n  --border-radius-3: 0.5rem;\n  --border-radius-4: 1rem;\n  --border-radius-circle: 100%;\n  --border-radius-pill: 9999px;\n\n  --box-shadow-1: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 );\n  --box-shadow-2: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 );\n  --box-shadow-3: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 );\n  --box-shadow-4: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 );\n  --box-shadow-5: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 );\n\n  --height-1: 1rem;\n  --height-2: 2rem;\n  --height-3: 4rem;\n  --height-4: 8rem;\n  --height-5: 16rem;\n  --width-1: 1rem;\n  --width-2: 2rem;\n  --width-3: 4rem;\n  --width-4: 8rem;\n  --width-5: 16rem;\n\n  --max-width-1: 1rem;\n  --max-width-2: 2rem;\n  --max-width-3: 4rem;\n  --max-width-4: 8rem;\n  --max-width-5: 16rem;\n  --max-width-6: 32rem;\n  --max-width-7: 48rem;\n  --max-width-8: 64rem;\n  --max-width-9: 96rem;\n\n  --red-000: #2a1311;\n  --red-100: #4d1d1c;\n  --red-200: #732627;\n  --red-300: #9b2e32;\n  --red-400: #c5363d;\n  --red-500: #d95857;\n  --red-600: #e57c76;\n  --red-700: #f09d97;\n  --red-800: #f8beb8;\n  --red-900: #fddedb;\n  --gold-000: #271609;\n  --gold-100: #45240f;\n  --gold-200: #663212;\n  --gold-300: #894213;\n  --gold-400: #ad5112;\n  --gold-500: #d36110;\n  --gold-600: #e48043;\n  --gold-700: #f0a071;\n  --gold-800: #f9bf9f;\n  --gold-900: #ffdfce;\n  --green-000: #111c0f;\n  --green-100: #193218;\n  --green-200: #1f4920;\n  --green-300: #246227;\n  --green-400: #287b2f;\n  --green-500: #2b9637;\n  --green-600: #2db13e;\n  --green-700: #2dcd46;\n  --green-800: #2cea4e;\n  --green-900: #96fc93;\n  --teal-000: #121b1b;\n  --teal-100: #1b302f;\n  --teal-200: #234644;\n  --teal-300: #2b5e5a;\n  --teal-400: #337672;\n  --teal-500: #3a8f8a;\n  --teal-600: #41aaa3;\n  --teal-700: #48c4bd;\n  --teal-800: #54e0d8;\n  --teal-900: #b5f0eb;\n  --blue-000: #131a26;\n  --blue-100: #1c2d47;\n  --blue-200: #22416b;\n  --blue-300: #255791;\n  --blue-400: #256db9;\n  --blue-500: #4884d2;\n  --blue-600: #769bdb;\n  --blue-700: #9bb3e5;\n  --blue-800: #bdccee;\n  --blue-900: #dee5f6;\n  --indigo-000: #201237;\n  --indigo-100: #35196c;\n  --indigo-200: #491fa7;\n  --indigo-300: #5d22e6;\n  --indigo-400: #7d41f8;\n  --indigo-500: #9962fa;\n  --indigo-600: #b282fc;\n  --indigo-700: #c8a1fe;\n  --indigo-800: #dcc0ff;\n  --indigo-900: #eedfff;\n  --violet-000: #2a121d;\n  --violet-100: #4e1933;\n  --violet-200: #761c4b;\n  --violet-300: #9f1d65;\n  --violet-400: #cb187f;\n  --violet-500: #dd4a95;\n  --violet-600: #e873a9;\n  --violet-700: #f098be;\n  --violet-800: #f7bbd3;\n  --violet-900: #fcdde9;\n  --gray-000: #191a1a;\n  --gray-100: #2c2d2d;\n  --gray-200: #3f4141;\n  --gray-300: #545657;\n  --gray-400: #696c6d;\n  --gray-500: #808385;\n  --gray-600: #979b9d;\n  --gray-700: #b0b3b4;\n  --gray-800: #cacccd;\n  --gray-900: #e4e5e6;\n}\n```\n\n## Getting started\n\nDocs can be found at http://tachyons.io/docs\nThe modules are generally pretty small and thus easy to read and grock if you're familiar with css at all.\n\n### Use the CDN\n\nThe quickest and easiest way to start using tachyons is to include a reference\nto the minified file in the head of your html file.\n\nCurrently the latest version is 4.9.0\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/tachyons@4.9.0/css/tachyons.min.css\"\u003e\n```\n\nYou can always grab the latest version with\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/tachyons/css/tachyons.min.css\"\u003e\n```\n\n### Local Setup\n\nClone the repo from github and install dependencies through npm.\n\n```\ngit clone https://github.com/tachyons-css/tachyons-custom.git\ncd tachyons-custom\nnpm install\n```\n\n#### Build\n\nIf you want to just use src as a jumping off point and edit all the code yourself, you can compile all of your wonderful changes by running\n\n```npm start```\n\nThis will output both minified and unminified versions of the css to the css directory.\n\nIf you want to recompile everything from src everytime you save a change - you can run the following command, which will compile and minify the css\n\n```npm run build:watch```\n\nIf you want to check that a class hasn't been redefined or 'mutated' there is a linter to check that all of the classes have only been defined once. This can be useful if you are using another library or have written some of your own css and want to make sure there are no naming collisions. To do this run the command\n\n```npm run mutations```\n\n## Contributing\n\nIf you want to make a PR to change part of the css source for tachyons, make sure you make the PR on the corresponding module\nthat can be found in the [tachyons org](http://github.com/tachyons-css/). Those modules get copied into the main repo so\nany changes you make to the css in this repo would get overridden.\n\nAlso please read our [code of conduct](https://github.com/tachyons-css/tachyons/blob/master/code-of-conduct.md) for contributors.\n\n## Websites that Use Tachyons\nIf you have a project or site that uses Tachyons feel free to make a PR to the (main repo) to add it to the list.\n\nhttps://github.com/tachyons-css/tachyons/blob/master/sites.md\n\n\n\n## Help\n\nIf you have a question feel free to open an issue here or jump into the [Tachyons slack channel](http://tachyons-slack-invite.herokuapp.com).\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftachyons-css%2Ftachyons-custom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftachyons-css%2Ftachyons-custom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftachyons-css%2Ftachyons-custom/lists"}