The Sass & CSS logos
Anticipated deliverable(s)
By the end of today’s workshop, you should have:
- an updated
_quarto.ymlfile, where you can modify your navbar, page footer, main font, theme, etc. - a stylesheet (
.scssfile) for customizing you website’s appearance
Learning objectives
By the end of today’s workshop, you should be able to:
- explain the role of HTML and CSS in structuring and styling web page content
- identify which Quarto website files to edit in order to customize the appearance of various web page elements
- create an appropriately-strcutured
.scssfile to organize custom styles for a Quarto website - define and use Sass variables to streamline theme development
- write basic CSS rules for additional fine-tuned web page styling
- use browser developer tools to inspect web page elements and override or extend existing CSS rules
Pre-class Prep
Please be sure to complete the following before class:
A. Have your personal branding guide ready to reference
This is also a good opportunity to revisit and revise your branding guide if necessary, including your chosen color palette and Google Font families, image assets, and personal logo and / or favicon (optional).
Workshop Materials
| Content Type | Materials | Notes |
|---|---|---|
| Slides | Customing Quarto websites using Sass & CSS | Have your personal branding guide ready to reference throughout! |
What should I continue working on?
- Finish applying your colors to different website elements using Quarto’s Sass variables. And test out different color combos and / or fonts if you’re not totally satisfied with your original choices. 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 changed my entire color scheme and fonts 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 to guide your CSS-writing journey.