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

In rough order of how often I use them.

  • These folks helpfully host bootstrap.css (and Bootswatches) on their own server: BootstrapCDN
  • 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 Font Awesome stylesheet -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">

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

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