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

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

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

HTML & CSS references

Generators

Colors

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!