Customizing Quarto websites

The Sass and CSS logos

Anticipated deliverable(s)

By the end of today’s class, you should have:

• a stylesheet (.scss file) for customizing your website’s appearance

Pre-class Prep

Please be sure to complete the following before class:

Build your color palette

One of the most exciting parts of building a website is deciding on which colors you’ll use. This can take some time and tweaking, so it’s helpful to think a bit about your palette beforehand. We’ll consider updating colors for the following website elements:

1. Navigation Bar: navbar background color, foreground (text) color, hover highlight color
2. Main Body: body background color, body text color, hyperlink color, in-line code color, inline-code background color
3. Page Footer: footer background color

We’ll be using a language called Sass to create variables for each of the colors we plan to use throughout our websites (more on that soon!). For a smooth in-class experience, it will be helpful for you to draft up your color variables ahead of time and save them to a place where you can easily copy them from (e.g. a Google Doc is totally sufficient).

Define your color variables using the syntax, $variable-name: value;, where you decide on your variable-name, and value is a HEX color code (htmlcolorcodes.com is my favorite site for grabbing HEX codes).

For example, here are the color variables I’ll use for my website during the workshop:

$dark-green: #858E79;
$light-green: #D1D9CE;
$cream: #FDFBF7;
$gray: #64605f;
$purple: #9158A2;
$orange: #ad7237;

Expand for tips on choosing your website’s color palette

• Stick to about 3-4 colors. Choosing too many colors can overwhelm readers. Consider using different shades of the primary color throughout your site, with a couple complementing / contrasting colors for important highlighted text and / or features.
• Use a random color generator. My favorite is https://coolors.co/ – press the spacebar to generate new colors. When you see one (or more) that you like, “lock” them in place by clicking on the lock icon. Continue pressing the spacebar to generate new colors in the “unlocked” positions.
• Generate a color palette from a photo / image. Have an interesting background in your headshot? Consider generating a palette off of it! Check out Color Thief for your color stealing needs.
• Consider contrast and colorblindness-friendly palettes. I love the Let’s get color blind Google Chrome extension for simulating color deficiencies in the web browser, and the coolers color contrast checker for calculating the contrast ratio of text and background colors (it’ll even suggest new colors to improve your contrast).
• Get inspired by other websites. And you don’t need to take inspiration only from Quarto websites. Just a small handful of examples sites with color schemes that I really love:
  • Angelina Miller
  • Meghan Hall
  • Emily Hardison
  • Meagan Brown (MEDS 2023)
  • Nicola Rennie
  • Sylvia Canelón

Select your typefaces / fonts

Your typeface and font choices are just as important as your color choices! First, a few important definitions:

• typeface (aka font family): the underlying visual design (e.g. Times New Roman, Helvetica, Roboto)
• font: an implementation / variation of a typeface (e.g. bold, italic)

We’ll be importing and applying font families from Google Fonts. Explore the vast selection, and have the names of 1-2 font families ready to go for class.

Expand for tips on choosing your font family(ies)

• Stick to 1-2 font families. Just like colors, using too many typefaces can overwhelm a reader. You can use one typeface across your entire website, or alternatively, choose one typeface for things like header text and another for body text.
• When in doubt, use a sans-serif font family. Sans-serif fonts work great everywhere, but are especially ideal for body text since they’re cleaner and easier to read. If you do want to use a serif font, it’s best to reserve those for any header text.
• Make sure your font family choice(s) have a variety of styles. If your font family doesn’t include bold or italicized styles, you won’t actually be able to apply those styles to your website. For example, Nunito comes in a variety of weights (boldness levels) and italic, where Sen comes in a variety of weights, but not italic.
• Check out some visually-pleasing font pairings. fontpair has hundreds of Google Font pairings to browse!

Lecture Materials

The code examples that we’ll walk through as a class (along with lots of other info), can be found in these slides:

lecture slides

What should I continue working on?

• Try different color combos and / or fonts. This is arguably the most fun part of building your website and where you can really let your personality and brand shine through. It can take a while to settle on something that you feel really represents you, and that’s okay (I’ve also changed my entire color scheme and font styles multiple times over the years).
• Consider writing / borrowing / adapting CSS rules to refine your website styling. You can take your website styling far just by defining Quarto’s Sass variables. However, if you’re looking to fine-tune the appearance of certain web page elements, you may consider turning to more CSS. Review the workshop slides for suggested approaches and tools for guiding your CSS-writing journeys.