Design Resources

As you go about designing and coding your application’s screens, here are a few things that you may find useful.

Readings

I’ve placed them in rough order of my opinion of their value/length ratio.

Resources

Bootstrap

Official Bootstrap Documentation
Bootstrap 4 Cheat Sheet — Since the official docs are really spread out, this cheatsheet can be easier to look through quickly.
Bootswatch - Cheating! Great for quick styles while prototyping. The previews are also great for looking through quickly for useful components, almost like the Cheat Sheet above.
Shoelace.io - A tool to help you create your Bootstrap grid layout.
Premium Bootstrap themes
Bootstrap.build Generate your own Bootswatch, essentially. If you don’t have your own brand identity created yet, you can practice by making a UChicago branded theme; see pages 38-41 of the Identity Guidelines.

Other design systems

Bootstrap isn’t the only design framework in town. Here are a few more, just to give you an idea:

Tailwind CSS — Imagine if Bootstrap only had utility classes, like the ones for spacing and shadows, but had a lot more than it does; and no components per se.

That’s Tailwind — you’re expected to assemble your own cards, alerts, etc, out of the utility classes. Many people like it because it’s “lighter” than Bootstrap — it gives you the tools to build up your own, custom framework; but you’re still not starting from scratch.
GOV.UK Design System and U.S. Web Design System — Government design systems, with accessibility and consistency as paramount concerns.
Bulma and Foundation — More direct analogs to Bootstrap.

Fonts

Font Awesome - Free, CSS-customizable, perfectly scalable icons for almost everything.
Google Web Fonts - You’ll want this after reading Butterick’s.
Google Web Font pairing inspiration:

Games to get good at CSS

CSS Diner — Become a pro at CSS selectors. Useful if you plan to do a lot of web scraping.
Flexbox Froggy — Get a better understanding of Flexbox, the reason that positioning things on the web is no longer a nightmare.

Stock images

Unsplash
Stock Up - A search engine for free stock photos.
Subtle Patterns - A library of free, tileable, subtle background images.

HTML & CSS references

The CSS Cascade — Learn how CSS specificity rules actually determine which one of competing rules gets applied to an element.
HTML5 Element List - An excellent, categorized list of HTML elements.
CSS Properties Reference

Generators

CSS3 Generator - Generate CSS box shadows, text shadows, and gradients.
Ultimate CSS Gradient Generator

Colors

Defining colors in CSS
Duo — Curated color pairings
Adobe Color - Generate complementary colors.

Quick links to assets

BootstrapCDN helpfully host bootstrap.css (and Bootswatches) on their own server.

Bootstrap’s Javascript components (like modals, hamburger menu, carousel, etc) depend on another open-source library called jQuery; you can grab it from this CDN: jQuery CDN.

Ultimately, a quick and easy way to get all of Bootstrap and Font Awesome is to include the following in the <head> of your document:

<!-- Expand the number of characters we can use in the document beyond basic ASCII 🎉 -->
<meta charset="utf-8">

<!-- Connect Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<!-- Connect Bootstrap JavaScript and its dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>

<!-- Connect Font Awesome -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>

<!-- Make it responsive to small screens -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

You can use a Bootswatch or your own customized bootstrap.css instead as the href, if you like.

Have fun!

Design Resources