Tuesday, December 17th

Class hours: 10:05 – 2:45
Mr. Bohmann | wbohmann@ewsd.org

10:05 Today’s Notes & Attendance

Happy Tuesday
One Visitor from SBHS today – so there will be a slight schedule change
Reminder that there will be no school on Monday, December 23 through Wednesday, January 1 for Early Winter Break.
School will resume on Thursday, January 2. For a full list of planned school closures, visit our school calendars online.

10:10 Responsive Typography

Responsive Design consists of three characteristics:
1. Media Queries
2. Images that Resize
3. Fluid Layouts (using Grid, Flexbox or % for widths)

As our screens change size, so can the fonts. We don’t have to guess what the right typography is. We can use some simple tools to help make sure that no matter what our screen size is or what font size we want to use, we can have it work together.

Typography can also be responsive. First, let’s get an understanding of the basics.

Absolute Length Units

Absolute length units are considered absolute because they are not relative to any other element. These units will not scale to browser size and will always remain the same size. These include the following:

pt – points
px – pixels
in – inches
cm – centimeters
mm – millimeters
pc – picas

Pixels are really the only absolute CSS length unit we should consider using for the web. The others are mostly used for physical (not digital) measurement (like print). A pixel unit refers to the size of one “dot” of your device display (which will vary slightly with each device). Because of this, pixels are commonly used for things that don’t necessarily need to scale with browser sizes.

Relative Length Units

Relative Length units are considered relative because they change/scale depending on the length of other elements. One common example is percentage, which is dependent on the length of the parent element.

em – relative to the element’s parent font-size
rem – relative to the root element’s font-size – the default HTML
vw – relative to 1% of your browser’s viewport width
vh – relative to 1% of your browser’s viewport height
vmin – relative to 1% of the smaller of the two browser viewport dimensions (height or width). vmin uses the ratio of the smallest side. That is, if the height of the browser window is less than its width, 1vmin will be equivalent to 1vh . If the width of the browser is less than it’s height, 1vmin is equivalent to 1vw .
vmax – is the opposite. vmax uses the larger of the viewport width or height to set the size.
% – relative to 1/100 of the parent element’s width.

All of these units are used for the web. Want to see an example of all of these in action and understand the difference between em and rem- Fork my CodePen so you have a reference for yourself.

Using Modular Scales

From Exploring Responsive Scales Article on Medium.com

Modular Type Scales

You’ve heard of musical scales, well the same concept can be applied to typography. Modular Scale typography grows and shrinks based on a ratio. Using a ratio allows the type to look consistent and related.

Some sites do better with large type and contrasting sizes better than others sites… For example news and product/information sites don’t have a lot of variation. Creative sites have much more variation in size.

For example, product sites, shopping sites, news sites and commerce sites tend to do better with smaller changes in type size. BBC HappySocks

Marketing sites (like Apple for example) tend to use large type sizes and show great range in the type size variation. Apple RedBull

Let’s play around with type scale. A nice tool is type-scale.com and another one is modular scale. Both do the same thing – they are tools to help you get consistent type.

Using a Scale = Consistency in Design!

Let’s practice. Fork this CodePen and we will apply some type scales to the html elements.

Variables in CSS and Custom Properties

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)

See how annoying it is to have something repeat!

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;
}

Let’s tackles some basics with variables while also improving our code from earlier today where we worked with type scales.

10:50 Break

11:00 English with Mx. Yopp

11:50 – 12:25 Purington Tree Farm

Your Goal: Work as a team. Create a New Website for Purington

A reminder about your roles.

Project Manager / Problem Solver / Scrum Master- The project manager is the organizer, the speaker for the group and the one person I will count on to give me an update and for keeping the project in scope. This person is going to keep the project moving, on time, in scope and will help out the other two roles as needed. This person may optimize images, secure the copy (that’s the text – basically what to write on the pages) and prepare those for the coder
Artistic Director / Story Creator / Creative Director– responsible for the paper mock up of the comic, color palette and creative aspects of the design. Document your creative inspirations. This person may also design the favicon, logo and have final layout decisions to make
Front End Coder – your job is to take the design from the artistic director and turn it into the code necessary to complete the project. HTML / CSS and full validation. Strong and creative coders. Responsible for files/publishing and editing based on feedback from the group.

Deliverables:

A new website that incorporates the content found on the pages – like contact information, about us, social account information
A responsive design that works with different screen sizes (have one breakpoint at 578px)
Prices of trees – kind of trees
Hours
Location
Amenities/Services: the farm offers tools like hand saws, sleds and trussing
Other products they sell

Due Date: Thursday – NOON

Client want to see a working version of the site on the Project Manager’s webpage for a class review. The Client will be in the classroom ready to view websites at Noon on Thursday.