Chapter 2: Starting Styleguide
Part 1: Establishing colors
Establish these colors as CSS global variables. Display these colors in a series of small boxes (3rem by 3rem), one color per box. This is a warmup exercise for you!
| Color name | Hex value |
|---|---|
| Lime | #A4FFA2 |
| Magenta | #F47DDA |
| Magenta50 | #F47DDA80 |
| White | #FFFFFF |
| Tan | #CEC5B4 |
| Teal | #2E6D81 |
| Cyan | #7DE6F4 |
| Black | #050D14 |
Fork the CodePen to your account, or set it up for editing in your environment.
Part 2: Fonts and Type Scale
Poppins is our only font for this easy site. Go to Google Fonts and get the code for Poppins 300 and 600. Apply this to your CodePen in Settings - CSS - External Links.
Create a type scale using CSS variables and calc. This was covered in Advanced CSS. Jen will walk through how to do this if you are not familiar with it.
- Font base size: 16px (browser default)
- Type scale: Major Third
- H1: 1.563rem
- Club links: 1.25rem
- All other text: 1rem
If you'd like to guess at the other heading sizes for now, you are welcome to do so, based on the type scale.
Finally, as you have extra time, apply default styling to other elements on the page. Make sure the images are scalable. Remove extra padding/margin where it seems to be excessive.
When you are finished, your style guide should look something like this.
