Hack Club's theme implemented as CSS.
- Use our css-starter for a blank but ready website template that already includes our theme CSS.
- View the contribute repository for an example of our CSS theme in action.
- Create a new folder for your site
- Add a
style.cssfile inside your folder - Add an
index.htmlpage inside your folder - Link to the CSS files in the
<head>tag of your HTML:
<linkrel="stylesheet" href="https://css.hackclub.com/theme.css"><linkrel="stylesheet" href="https://css.hackclub.com/fonts.css"><!-- HQ-only. -->- View https://theme.hackclub.com/ for a visual representation of our theme
- View https://github.com/hackclub/css#usage for the documentation of the tags in our theme
- Run your static site locally with
python -m SimpleHTTPServerand view it athttp://localhost:8000/ - Have fun and get creative making websites!
To run the site locally, follow the steps below:
- Clone the repository:
git clone https://github.com/hackclub/css.git- Start up a server (or open the
index.htmlfile in your browser):
python -m SimpleHTTPServerAnd then visit http://0.0.0.0:8000 to see the site!
Get the latest theme stylesheet: css.hackclub.com/theme.css
Get the latest minified theme stylesheet: css.hackclub.com/theme.min.css
(HQ-only) Get the latest fonts stylesheet: css.hackclub.com/fonts.css
(HQ-only) Get the latest minified fonts stylesheet: css.hackclub.com/fonts.min.css
To access theme.css at commit ID d0888dc use css.hackclub.com/d0888dc/theme.css.
Similarly, to access fonts.min.css at commit SHA cbe01ca9a4de7bc7a5b1048d887287dfedba0a07 use css.hackclub.com/cbe01ca9a4de7bc7a5b1048d887287dfedba0a07/fonts.min.css.
This can be done for every commit in this repository.
The stylesheet places light styling on the following tags: <button />, <input />, <textarea />, <select />, <label />, <h1 />, <h2 />, <h3 />, <h4 /> , <h5 />, <h6 />, <p />, <img />, <hr />, <a />, <pre />, <code />, <li />, <table />, <th /> & <td />.
More opinionated theming is provided by addition classes. CSS variables enable more refined styling by the developer.
To create a card element use the .card class.
The following modifcations are available:
.sunkena card without shadows and uses the--sunkencolour.interactivea card that grows on hover, to indicate the ability to click it
Headings should be created using standard <h1..> tags.
The following modifcations are available (through classes):
.ultratitlea very large title.titlea moderatly large title.subtitlea smaller title.headlinefor use in large bodies of text, provides margins around the title.subheadlinesmaller version of.headline.eyebrowa gray, all-caps title for use as an alternative visually.leadhas a font weight of400.captionis for image captions
These are small rounded objects to highlight key information.
The following variants are available:
.pillthis is the standard badge with a colour background.outline-badgea transparent badge
A standard button can be created with the <button /> element.
The following variants are available:
.lglarger button.outlinea transparent button.ctaa button with a gradient background to provide more emphasis
These are boxes are varying length to hold content in. Create one with the .container class.
The widths available are: wide, .container (the standard without a modifier class), .copy & .narrow.
For containers of different widths use both the .container class and the width modifier class (e.g .copy).
The CSS vars made available are as follows:
--darker:#121217;
--dark:#17171d;
--darkless:#252429;
--black:#1f2d3d;
--steel:#273444;
--slate:#3c4858;
--muted:#8492a6;
--smoke:#e0e6ed;
--snow:#f9fafc;
--white:#ffffff;
--red:#ec3750;
--orange:#ff8c37;
--yellow:#f1c40f;
--green:#33d6a6;
--cyan:#5bc0de;
--blue:#338eda;
--purple:#a633d6;
--text:var(--black);
--background:var(--white);
--elevated:var(--white);
--sheet:var(--snow);
--sunken:var(--smoke);
--border:var(--smoke);
--primary:#ec3750;
--secondary:#8492a6;
--accent:#5bc0de;
--twitter:#1da1f2;
--facebook:#3b5998;
--instagram:#e1306c;--breakpoint-xs:32em;
--breakpoint-s:48em;
--breakpoint-m:64em;
--breakpoint-l:96em;
--breakpoint-xl:128em;--spacing-0:0px;
--spacing-1:4px;
--spacing-2:8px;
--spacing-3:16px;
--spacing-4:32px;
--spacing-5:64px;
--spacing-6:128px;
--spacing-7:256px;
--spacing-8:512px;--font-1:12px;
--font-2:16px;
--font-3:20px;
--font-4:24px;
--font-5:32px;
--font-6:48px;
--font-6:64px;
--font-7:96px;
--font-8:128px;
--font-9:160px;
--font-10:192px;--line-height-limit:0.875;
--line-height-title:1;
--line-height-heading:1.125;
--line-height-subheading:1.25;
--line-height-caption:1.375;
--line-height-body:1.5;--font-weight-body:400;
--font-weight-bold:700;
--font-weight-heading:var(--font-weight-bold);--letter-spacing-title:-0.009em;
--letter-spacing-headline:0.009em;--size-wide-plus:2048px;
--size-wide:1536px;
--size-layout-plus:1200px;
--size-layout:1024px;
--size-copy-ultra:980px;
--size-copy-plus:768px;
--size-copy:680px;
--size-narrow-plus:600px;
--size-narrow:512px;--radii-small:4px;
--radii-default:8px;
--radii-extra:12px;
--radii-ultra:16px;
--radii-circle:99999px;--shadow-text:01px2pxrgba(0,0,0,0.25),02px4pxrgba(0,0,0,0.125);
--shadow-small:01px2pxrgba(0,0,0,0.0625),02px4pxrgba(0,0,0,0.0625);
--shadow-card:04px8pxrgba(0,0,0,0.125);
--shadow-elevated:01px2pxrgba(0,0,0,0.0625),08px12pxrgba(0,0,0,0.125);