Page views:
Recently, I kickstarted the website for AngelHacks. Soon afterward, someone in the Hack Club Slack needed to build a site for their hackathon, & was wondering how to do it. I’m publishing this so anyone else can take advantage, too!
Hackathon sites I’ve designed (you’ll notice some patterns!):
They’re all open source on GitHub if you want to peruse the source code. The last 3 use Gatsby + Hack Club Design System, which is not an easy stack to get started with, & honestly not one I’d recommend to anyone else. The MDX stack, however, is absolutely incredible to work with. I’ve made a few sites like this.
Before we continue, hats off to @jxnblk & friends. His design & code & philosophy are a massive inspiration to my work every day. He wrote many of the libraries & directly inspired much of this.
Note: I also published this section identically as a separate post.
pages/about.mdx
with some text in it, & you now have a high-performance static page at /about
on your site. This is magical.The site is then hosted on Netlify, because it’s free, easy to set up, automatically deploys whenever you push to GitHub, & just works (most of the time).
Update 2020-01-07: I recommend switching Rebass to @theme-ui/components
, the newer version. You’ll need to update some dependencies if you’re following this now. Also, I recommend ZEIT Now over Netlify for deployment of Next.js sites.
This is the AngelHacks codebase, open source & under MIT License (meaning you’re welcome to reuse the code any way you like, with credit), after I made the site: github.com/angelhacks/site
The two important folders are pages
& components
—that’s where you’ll spend the vast majority of your time editing the site. Pages are written in MDX (or JSX), components in JSX (React components).
How styling works is a bit complex, but once you wrap your head around the system, it’s incredibly fast to work with.
It starts with a theme. The theme keeps all the primary “components” of your design—all the colors & fonts, but also the amounts of spacing (margin/padding in CSS), the font sizes used, the box-shadows used, etc, all in one place. By not having colors & font sizes & friends all spread out through your codebase, you can super easily modify the look of your whole site just by changing the theme, & you’ll also have fantastic consistency in your design, because you won’t have a random colors used in just one place or the like.
colors
set is the light mode, then when the dark mode is in use, the colors dynamically change to what you’ve defined in the theme.You won’t be writing direct CSS anywhere on the site. You’ll instead see sx={{
on the components & on the pages. A quick guide to what goes inside the sx
prop:
fontSize: 3
inside sx={{ … }}
, you won’t get the CSS font-size: 3px;
. Instead, Theme UI will look up the third font size value in your theme.fontSize
, you’re generating CSS Media Queries for responsive styling. fontSize: [3, 4, 5]
means that on phones & screens larger than phones, the element will use the theme’s font size #3, then on tablets, theme value #4, then on laptops & larger, theme value #5. As you can see, for very little code, you can make a site that’s optimized for all screen sizes.my
, mr
, px
, etc. These are for margin & padding, using the theme space
scale values like font size. mt
means margin-top
, mb
= margin-bottom
, then my
is margin on the Y axis, so both top & bottom (full set: my mx my mr mb ml
). The same goes for padding, its properties beginning with p
(full set: py px pt pr pb pl
).bg
sets the background-color
to one of the colors
in your theme. color
sets the text color similarly. The superpower here is that if you enable dark mode or another theme, the colors dynamically change to that theme, as defined in your theme file.I wrote a bit more about how styling is used at a component level over here about the Hack Pennsylvania recap site.
If I wasn’t in college with way too much to do, I’d open source a template site, but instead, I’ll give instructions on making your own site :)
(Note: I like coding on Glitch because it’s cross-platform including iPads & Chromebooks, you can work with multiple people simultaneously, you can see a live preview as you work, etc. If you prefer your local dev environment, go for it!)
components/theme.js
& change the colors & fonts. (Loading a webfont? Do that here.)components/meta.js
with all your event details. This takes forever, but it’ll give you much better placement on Google.npm run build
is your build command, out
is the resulting folder. Now, whenever you commit & push to GitHub, your site will re-deploy automatically.That wraps up my hackathon site tutorial. If you have questions, DM me on Slack or email me, & I’ll update this post. & please send me what you make! If you’re looking for design feedback, the #design channel on Hack Club Slack is the best place.