November 30 – December 4th
Class hours: 9:40 – 2:05
Mr. Bohmann | wbohmann@ewsd.org
9:40 Attendance & Notes
- Remote Link for today (if you are not here) – Google Meets
- Logo Design Challenge #1 Description
- Logo Design Challenge #2 (pays $100) Description
9:45 Templates (Build our Own!)
Let’s build a couple of templates that you can keep in your files. We’ll tackle two: Flexbox and Grid. Then you can decide how you want to use them with future projects
We will start from scratch.
Before we begin, let’s tackle the whole border-box issue that you might see out there.
By default, the width and height of an element is calculated like this:
width + padding + border = actual width of an element
height + padding + border = actual height of an element
This can create a problem when trying to line up content.
Example in CodePen
To the rescue is the asterisk(*). It will apply a property and value to all elements.
*, *:before, *:after{ box-sizing: border-box; }Ok, now on with the templates… (for set up look at the Noon hour)
10:25 Mask Break
10:35 Academics
11:25 Lunch
12:00 Custom Templates Continued
Create a folder called CSS Templates. Inside create a CSS folder. And then the following documents.
- gridstyles.css
- flexstyles.css
- follow this link to grab some html code for your index.html page
- We are going to build several layouts
Codepen Example for understanding Flex property
1:05 Mask Break
1:15 Calc() & Custom Properties
Calc is a new specification (well, sort of new) that allows you to do Math calculations in your CSS. Well why would you want to do math?
- Works well with: length
- Works well with: time (animations and transitions)
- Works well with: numbers and integers (like font sizes and padding)
- Addition +, Subtraction -, Multiplication *, Division /
- Can use with different uses (like subtract 25px from 40%)
- Great for setting Type Scales
Let’s practice some Calc() on this CodePen and see how it applies.
Fork my CodePen example and we’ll add the Calc properties.
The first thing you might notice is I set the justify-content to space-around. So for the flex-basis you see that for column 1, a half percent goes on the left and right side of the column to make it 25%.
Calc() makes this easier. calc(25% – 1%);
To see this in action, let’s take on a challenge together. We’ll use Calc to scale uniformly a type scale so that our webpage typography is easy to use and uniform. Challenge awaits!
Custom Properties allow us to write variables to minimize redundancy in our CSS files. You might have seen custom properties and variables when inspecting a page. They usually begin like this in your CSS stylesheet:
:root {
--color:red;
--font-size-large: 2rem
}
p {
color:var(--color);
}
.specialtext {
font-size:var(--font-size-large);
}Where you place your variables matter. They follow the Cascade in Cascading Style Sheets.