Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org
Today’s Notes
- Today is an EHS B Day
- Residential Building Trades – looking for a photo of the blue and red house (you can email me)
- Mid point of the quarter is Friday – get in your late work
- Mood Board Sharing
9:40 Attendance
9:45 CSS Calc()
Calc is a somewhat new specification which allows you to do Math calculations in your CSS. Math, why would you want to do math?
- Works well with: length
- Works well with: time (animations & transitions)
- Works well with: numbers and integers (like font sizes, margin and padding)
- Addition +, Subtraction -, Multiplication *, Division /
- Can use with different uses (like subtract 25px from 40%)
- Great for setting Type Scales
- Lastly, showing math is easier to understand when you see it in the code
Let’s practice some Calc() on this CodePen and see how it applies Be sure to Fork the Pen.
We’ll add the Calc() properties and try it all out.
Calc() makes this easier to read and see what you are coding. calc(25% – 1%);
The first thing you might notice is I set the justify-content: 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%.
The real power of Calc() is the ability to mix units! Let’s try that out too.
For Example: transform: rotate(calc(10deg * 5));
Challenge: Use the Minor Third Scale from https://type-scale.com/
Show using Calc() the documentation of how these font-sizes are derived.
Fork this CodePen for this challenge
Rename your CodePen Calc() & Custom Properties
10:35 Mask Break
10:45 English with Ms. Yopp
11:35 Custom Properties using CSS Variables
Clean code is always a good goal to work towards. To reduce redundancies in your CSS you may want to learn about creating variables. I had a professor use the term DRY out your stylesheets (Don’t Repeat Yourself)
You might have seen custom properties 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);The CSS syntax for creating a variable is as follows: var(–name, value)
Where you place your variables matters. They follow the cascade in Cascading Style Sheets (CSS)!
We can create both global variables – defined in the :root and we can also change them at the element level
:root {
--bg-color: #fff;
--main-color: #000;
--secondary-color: #222;
}
/* Elements inherit variables from their parents. */
body {
background-color: var(--bg-color);
color: var(--main-color);
}
/* Elements can define their own values and variables, overriding inherited ones.*/
body.dark {
--bg-color: #080808;
--main-color: #fff;
--secondary-color: #ccc;
}Variables and Custom Properties Challenge – Creating a Type Scale
12:15 Lunch
12:45 Clip Path Properties from CSS Portal
Want to make some custom div shapes – try using the clip-path property and the inspector
Better yet, let’s explore the depth of generators that are part of CSS Portal!
Special Build Dropbox Using CSS Portal
1:10 Mask Break
1:20 Production Time & Guided Support
Mood Board (due Wednesday)
Overdue work – if you have some (Friday is mid-point of the quarter)
Custom Project using CSS Portal – Dailies