Class hours: 10:05 – 2:45
Mr. Bohmann | wbohmann@ewsd.org
10:05 Today’s Notes & Attendance
Wacky Wednesday
Did you order lunch? Check yesterday’s dayplan for the link
PreTech 2 Visitors today. (11am – 11:30am) We’ll do 5 minute rotations. During your rotations you can share with them the projects you’ve worked on while in the CAWD/2 Program and your passion projects. Show them what you are interested in and what you like to do while you are here.
- Zander
- Phoenix
- Tobi
- Isaac
10:10 CSS Grid Continued…
Popular Layout Options: 960 Grid which is a concept of making websites 960px wide and then dividing up the 960 pixels into 12 columns (60px each). But we can do the same thing with CSS Grid. Link to a great website on all things CSS Grid – it is everything you need to learn CSS Grid Layout.
Yesterday we looked at how easy it is to set up grid. Just like flexbox we need a container.
- grid-template-columns: (for setting number of columns) (we can use px, % or fr)
- grid-column or grid-row: To assign our content to those columns or rows. (we declare where to put them by using an address of vertical or horizontal lines. ex. grid-column: 1 / 4)
- The rows that are created are a result of the columns or we can declare our rows:
- grid-template-rows (for setting rows) [explicit grid]
- Use gap to create space between your grid (it will not add space on the outside of the grid area!)
- Using nth of type or custom classes is a great way to move items around your grid
- Let’s introduce grid-template-areas where we can declare a named grid space and
- Let’s introduce grid-area to specify where an item goes
Let’s create two common layouts with grid. We’ll do this in Americas Favorite Sandbox – CodePen.
- The first layout is called a Pancake layout. It is an excellent choice for mobile and for desktop. Using height on the container will push the footer nicely to the bottom of the page.
- The second layout will be a typical web layout with the header taking up the top, the main taking up two thirds with a sidebar and a footer that extends across the bottom. We’ll add a space for nav.
- Remember, you can use flex and grid inside any of these layouts!
Pancake Layout
To create this layout, we can make three rows by using grid-template-rows: auto 1fr auto. The second row with a value of 1fr will expand as much as it can, whereas the other two only have enough space by wrapping their content. Let’s make a header, nav, main and footer. We’ll use some content on the web for this: https://eastcoastprinters.com/
.container {
display: grid;
height: 100vh;
grid-template-rows: auto 1fr auto;
}Traditional Layout
The traditional layout we’ll create will have a header, nav, main, aside and footer. By placing on the grid, we can reorganize and change layouts easily for mobile and desktop. We’ll focus on the layout today and then can consider some modern styling options down the road.
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
}header{
grid-column: 1 / span 12;
}
nav{
grid-column:1/13;
}Then, let’s play with grid template areas…
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: auto auto 1fr auto;
grid-template-areas:
"top top"
"nav nav"
"main aside"
"footer footer";If you enjoy grid, check out 1linelayouts and the video. Great explanation of easy grid layouts.
11:00 Visitors from PreTech 2 / Independent Project
11:50 – Lunch
12:25 Independent Reading
12:50 Break
1:00 Production Time and Guided Support
Current Assignments:
- Past Due – Hamburger Handout – should be on your website
- HTML Resume (google classroom – place images there)
- About Me paragraph and image (google classroom)
- Parallax How To Website – Past Due!
- Famous Photographer Research (Due next Week)
1:40 Dailies
Dailies can be placed in the CAWD2 Dailies Folder on the CAWD2 Public Folders drive