{"id":19030817,"url":"https://github.com/hackclub/css","last_synced_at":"2026-05-03T02:30:19.660Z","repository":{"id":43110374,"uuid":"390303828","full_name":"hackclub/css","owner":"hackclub","description":"The Hack Club Theme packaged as raw CSS.","archived":false,"fork":false,"pushed_at":"2023-08-20T01:28:08.000Z","size":68,"stargazers_count":26,"open_issues_count":2,"forks_count":11,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-02-14T05:10:04.398Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://css.hackclub.com","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/hackclub.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":"2021-07-28T10:06:07.000Z","updated_at":"2025-01-27T21:25:57.000Z","dependencies_parsed_at":"2024-11-08T21:20:33.040Z","dependency_job_id":"19d9a92a-fd8c-4674-b102-8c30bd0c6551","html_url":"https://github.com/hackclub/css","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hackclub%2Fcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hackclub%2Fcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hackclub%2Fcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hackclub%2Fcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hackclub","download_url":"https://codeload.github.com/hackclub/css/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240080442,"owners_count":19744874,"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-11-08T21:19:41.816Z","updated_at":"2026-05-03T02:30:19.624Z","avatar_url":"https://github.com/hackclub.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hack Club CSS\n\n[Hack Club](https://hackclub.com/)'s [theme](https://theme.hackclub.com) implemented as CSS.\n- Use our [css-starter](https://github.com/hackclub/css-starter) for a blank but ready website template that already includes our theme CSS.\n- View the [contribute](https://github.com/hackclub/contribute) repository for an example of our CSS theme [in action](https://contribute.hackclub.com/).\n\n## Getting Started with Hack Club CSS\n\n1. Create a new folder for your site\n2. Add a `style.css` file inside your folder\n3. Add an `index.html` page inside your folder\n4. Link to the CSS files in the `\u003chead\u003e` tag of your HTML:\n ```html\n \u003clink rel=\"stylesheet\" href=\"https://css.hackclub.com/theme.css\"\u003e\n \u003clink rel=\"stylesheet\" href=\"https://css.hackclub.com/fonts.css\"\u003e \u003c!-- HQ-only. --\u003e\n ```\n5. View https://theme.hackclub.com/ for a visual representation of our theme\n6. View https://github.com/hackclub/css#usage for the documentation of the tags in our theme\n7. Run your static site locally with `python -m SimpleHTTPServer` and view it at `http://localhost:8000/`\n8. Have fun and get creative making websites!\n\n## Development\n\nTo run the site locally, follow the steps below:\n\n1. Clone the repository:\n```sh\ngit clone https://github.com/hackclub/css.git\n```\n\n2. Start up a server (or open the `index.html` file in your browser):\n\n```sh\npython -m SimpleHTTPServer\n```\n\nAnd then visit http://0.0.0.0:8000 to see the site!\n\n## Accessing The Stylesheets\n\nGet the latest theme stylesheet: [`css.hackclub.com/theme.css`](https://css.hackclub.com/theme.css)\n\nGet the latest minified theme stylesheet: [`css.hackclub.com/theme.min.css`](https://css.hackclub.com/theme.min.css)\n\n(HQ-only) Get the latest fonts stylesheet: [`css.hackclub.com/fonts.css`](https://css.hackclub.com/fonts.css)\n\n(HQ-only) Get the latest minified fonts stylesheet: [`css.hackclub.com/fonts.min.css`](https://css.hackclub.com/fonts.min.css)\n\n### Archives\n\nTo access `theme.css` at commit ID `d0888dc` use [`css.hackclub.com/d0888dc/theme.css`](https://css.hackclub.com/d0888dc/theme.css).\n\nSimilarly, to access `fonts.min.css` at commit SHA `cbe01ca9a4de7bc7a5b1048d887287dfedba0a07` use [`css.hackclub.com/cbe01ca9a4de7bc7a5b1048d887287dfedba0a07/fonts.min.css`](https://css.hackclub.com/cbe01ca9a4de7bc7a5b1048d887287dfedba0a07/fonts.min.css).\n\nThis can be done for every commit in this repository.\n\n## Usage\n\nThe stylesheet places light styling on the following tags: `\u003cbutton /\u003e`, `\u003cinput /\u003e`, `\u003ctextarea /\u003e`, `\u003cselect /\u003e`, `\u003clabel /\u003e`, `\u003ch1 /\u003e`, `\u003ch2 /\u003e`, `\u003ch3 /\u003e`, `\u003ch4 /\u003e` , `\u003ch5 /\u003e`, `\u003ch6 /\u003e`, `\u003cp /\u003e`, `\u003cimg /\u003e`, `\u003chr /\u003e`, `\u003ca /\u003e`, `\u003cpre /\u003e`, `\u003ccode /\u003e`, `\u003cli /\u003e`, `\u003ctable /\u003e`, `\u003cth /\u003e` \u0026 `\u003ctd /\u003e`.\n\nMore opinionated theming is provided by addition classes. CSS variables enable more refined styling by the developer.\n\n### Classes\n\n#### Cards\n\nTo create a card element use the `.card` class.\n\nThe following modifcations are available:\n\n- `.sunken` a card without shadows and uses the `--sunken` colour\n- `.interactive` a card that grows on hover, to indicate the ability to click it\n\n#### Headings\n\nHeadings should be created using standard `\u003ch1..\u003e` tags.\n\nThe following modifcations are available (through classes):\n\n- `.ultratitle` a very large title\n- `.title` a moderatly large title\n- `.subtitle` a smaller title\n- `.headline` for use in large bodies of text, provides margins around the title\n- `.subheadline` smaller version of `.headline`\n- `.eyebrow` a gray, all-caps title for use as an alternative visually\n- `.lead` has a font weight of `400`\n- `.caption` is for image captions\n\n#### Badges\n\nThese are small rounded objects to highlight key information.\n\nThe following variants are available:\n\n- `.pill` this is the standard badge with a colour background\n- `.outline-badge` a transparent badge\n\n#### Buttons\n\nA standard button can be created with the `\u003cbutton /\u003e` element.\n\nThe following variants are available:\n\n- `.lg` larger button\n- `.outline` a transparent button\n- `.cta` a button with a gradient background to provide more emphasis\n\n#### Containers\n\nThese are boxes are varying length to hold content in. Create one with the `.container` class.\n\nThe widths available are: `wide`, `.container` (the standard without a modifier class), `.copy` \u0026 `.narrow`.\n\nFor containers of different widths use both the `.container` class and the width modifier class (e.g `.copy`).\n\n### CSS Variables\n\nThe CSS vars made available are as follows:\n\n#### Colours\n\n```css\n--darker: #121217;\n--dark: #17171d;\n--darkless: #252429;\n--black: #1f2d3d;\n--steel: #273444;\n--slate: #3c4858;\n--muted: #8492a6;\n--smoke: #e0e6ed;\n--snow: #f9fafc;\n--white: #ffffff;\n--red: #ec3750;\n--orange: #ff8c37;\n--yellow: #f1c40f;\n--green: #33d6a6;\n--cyan: #5bc0de;\n--blue: #338eda;\n--purple: #a633d6;\n--text: var(--black);\n--background: var(--white);\n--elevated: var(--white);\n--sheet: var(--snow);\n--sunken: var(--smoke);\n--border: var(--smoke);\n--primary: #ec3750;\n--secondary: #8492a6;\n--accent: #5bc0de;\n--twitter: #1da1f2;\n--facebook: #3b5998;\n--instagram: #e1306c;\n```\n\n#### Breakpoints\n\n```css\n--breakpoint-xs: 32em;\n--breakpoint-s: 48em;\n--breakpoint-m: 64em;\n--breakpoint-l: 96em;\n--breakpoint-xl: 128em;\n```\n\n#### Spacing\n\n```css\n--spacing-0: 0px;\n--spacing-1: 4px;\n--spacing-2: 8px;\n--spacing-3: 16px;\n--spacing-4: 32px;\n--spacing-5: 64px;\n--spacing-6: 128px;\n--spacing-7: 256px;\n--spacing-8: 512px;\n```\n\n#### Font Sizes\n\n```css\n--font-1: 12px;\n--font-2: 16px;\n--font-3: 20px;\n--font-4: 24px;\n--font-5: 32px;\n--font-6: 48px;\n--font-6: 64px;\n--font-7: 96px;\n--font-8: 128px;\n--font-9: 160px;\n--font-10: 192px;\n```\n\n#### Line Heights\n\n```css\n--line-height-limit: 0.875;\n--line-height-title: 1;\n--line-height-heading: 1.125;\n--line-height-subheading: 1.25;\n--line-height-caption: 1.375;\n--line-height-body: 1.5;\n```\n\n#### Font Weights\n\n```css\n--font-weight-body: 400;\n--font-weight-bold: 700;\n--font-weight-heading: var(--font-weight-bold);\n```\n\n### Letter Spacing\n\n```css\n--letter-spacing-title: -0.009em;\n--letter-spacing-headline: 0.009em;\n```\n\n#### Box Sizes (Widths)\n\n```css\n--size-wide-plus: 2048px;\n--size-wide: 1536px;\n--size-layout-plus: 1200px;\n--size-layout: 1024px;\n--size-copy-ultra: 980px;\n--size-copy-plus: 768px;\n--size-copy: 680px;\n--size-narrow-plus: 600px;\n--size-narrow: 512px;\n```\n\n### Border Radii\n\n```css\n--radii-small: 4px;\n--radii-default: 8px;\n--radii-extra: 12px;\n--radii-ultra: 16px;\n--radii-circle: 99999px;\n```\n\n#### Shadows\n\n```css\n--shadow-text: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.125);\n--shadow-small: 0 1px 2px rgba(0, 0, 0, 0.0625),\n  0 2px 4px rgba(0, 0, 0, 0.0625);\n--shadow-card: 0 4px 8px rgba(0, 0, 0, 0.125);\n--shadow-elevated: 0 1px 2px rgba(0, 0, 0, 0.0625),\n  0 8px 12px rgba(0, 0, 0, 0.125);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhackclub%2Fcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhackclub%2Fcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhackclub%2Fcss/lists"}