Rutgers Design 2B: W3

The Box Model

All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

http://ci.labud.nyc/assets/lectures/lab/html-css-part-1/box-model.svg

Box Model

Content - The content of the box, where text and images appear

Padding - Clears an area around the content. The padding is transparent

Border - A border that goes around the padding and content

Margin - Clears an area outside the border. The margin is transparent

If you’re ever confused about how this is working on your website, you can see an example of it in the dev tools. Open up the inspector and scroll to the bottom, you should be able to see the below, where you can hover over each item.

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://paper-attachments.dropboxusercontent.com/s_D38DE52609E42088DE931363EBF7741F9E2982CF996ABFA4CD1598E1E0E93E6C_1548877316681_Screen+Shot+2019-01-30+at+2.41.35+PM.png

Content - The content of the box, where text and images appear

Padding - Clears an area around the content. The padding is transparent

Border - A border that goes around the padding and content

Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between elements.

Positioning with Basic CSS

Here are some basic principles.

When you’re creating CSS layouts, you’ll often position things with one of 5 terms:

static

relative

fixed

absolute

sticky

You address this in the following manner:

div {

position: sticky;

}

If you’d like to follow along, create an HTML document…

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="assets/css/main.css">

</head>

<body>

<h1 class="title">Hello</h1>

<div class="static">

</div>

<div class="relative">

</div>

<div class="absolute">

</div>

<div class="fixed">

</div>

<div class="sticky">

</div>

</body>

</html>

and a main.css document…

body {

background-color: lavender;

}

div {

width: 500px;

height: 200px;

}

x

div.relative {

background-color: yellow;

position: relative;

}

div.fixed {

background-color: purple;

position: fixed;

}

div.absolute {

background-color: green;

position: absolute;

}

div.sticky {

background-color: red;

position: sticky;

}

Static

This is the default position placement. These elements are not affected by the top, bottom, left, and right properties. You don’t need to call this out, since it’s the default, but if you did, nothing will change.

Try adding position: static; to div.static and comment out the others. You’ll see that nothing is changing.

Relative

An element with position: relative; is positioned relative to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

Try adding position: relative; to div.relative, open up the inspector and try changing the position like this:

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://paper-attachments.dropboxusercontent.com/s_D38DE52609E42088DE931363EBF7741F9E2982CF996ABFA4CD1598E1E0E93E6C_1548882239792_Screen+Shot+2019-01-30+at+4.03.47+PM.png

See how it’s moving? It’s moving relative to its default location, which is under the blue div.

Fixed

An element with position: fixed; is fixed, which means it stays put, even when the page is scrolled. It’s positioned relative to the viewport. The top, right, bottom, and left properties are used to position the element.

let’s add the fixed position to div.fixed and change it’s size in the inspector. Try placing it 10px from the top of the screen and resize your window.

Absolute

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Note: A "positioned" element is one whose position is anything except static.

Try adding position: absolute; to the div.absolute and editing the position in the console…

It’s moving based off the screen because it doesn’t have any positioned ancestors. Let’s update the html. Remove the div with the class absolute and put it inside the div with the relative class.

<div class="relative">

<div class="absolute">

</div>

Edit the top and left position in the console for the absolute div. Now the div is moving in relation to the yellow div.

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://paper-attachments.dropboxusercontent.com/s_D38DE52609E42088DE931363EBF7741F9E2982CF996ABFA4CD1598E1E0E93E6C_1548883518829_Screen+Shot+2019-01-30+at+4.25.14+PM.png

Sticky

This is the newest way of positioning elements with CSS layouts. An element with position: sticky; is positioned based on the user's scroll position.

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

This means that the sticky element changes placement once the user scrolls, kind of like a header.

To demonstrate this, let’s move the div with the sticky class after the h1. Then, update the top position to 0. Resize the page.

Resources

https://www.w3schools.com/css/css_positioning.asp

http://learnlayout.com/

Flexbox

Flexbox is a set of CSS properties that help make it easy to create more structured layouts with your HTML. Flexbox is very good at putting elements into rows and columns, and centering elements within each other.

To follow along, create a new HTML and css file that are linked together and open them up in Chrome and Sublime Text/whatever text editor you’re using.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Flexbox Demo</title>

<link rel="stylesheet" href="assets/css/main.css">

</head>

<body>

<div class="container">

<div class="item1">1</div>

<div class="item2">2</div>

<div class="item3">3</div>

</div>

</body>

</html>

CSS

.container {

display: flex;

padding:10px;

background-color: seagreen;

min-height: 200px;

}

.container div {

margin: 10px 10px;

width: 100px;

height: 100px;

background-color: bisque;

}

If you’ll notice, we’ve created a container in the div that holds 3 more items. When you use flexbox, you’ll always want a container housing it. In fact, even if you’re not using flexbox, it’s a good idea to keep elements contained in each other.

To use flexbox, all you have to do is set the container to display: flex; in the CSS, which we’ve already done. Comment this line of code in and out to see how it’s affected.

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://paper-attachments.dropboxusercontent.com/s_3E1345BE346BB6C6FBCF1203CE7529F852AE3E034ED184AB63D45158C4C843E6_1549493247430_display-flex.gif

display: flex puts them together in a row, positioned across the x axis (the main axis)

flex-direction

By default, the main axis is the horizontal one. That’s why, in the above example, it defaulted to this without us having to do any other work. It’s important to keep this in mind as you create layouts with flexbox.

To switch the orientation, you can add:

flex-direction: column;

If we try this, the main axis is vertical and the cross axis horizontal, resulting in the items being stacked vertically.

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://paper-attachments.dropboxusercontent.com/s_3E1345BE346BB6C6FBCF1203CE7529F852AE3E034ED184AB63D45158C4C843E6_1549493711484_Screen+Shot+2019-02-06+at+5.54.47+PM.png

flex-direction: row;

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://paper-attachments.dropboxusercontent.com/s_3E1345BE346BB6C6FBCF1203CE7529F852AE3E034ED184AB63D45158C4C843E6_1549493715135_Screen+Shot+2019-02-06+at+5.54.37+PM.png

flex-direction: column;

There’s an important distinction to make here: flex-direction: column doesn’t align the squares on the cross axis instead of the main axis. It makes the main axis itself go from horizontal to vertical. So the main axis is vertical, not horizontal once the flex direction is changed.

There are a couple of other options for flex-direction, as well: row-reverse and column-reverse. Try that out.

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://paper-attachments.dropboxusercontent.com/s_3E1345BE346BB6C6FBCF1203CE7529F852AE3E034ED184AB63D45158C4C843E6_1549493876690_Screen+Shot+2019-02-06+at+5.57.34+PM.png

flex-direction: row-reverse;

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://paper-attachments.dropboxusercontent.com/s_3E1345BE346BB6C6FBCF1203CE7529F852AE3E034ED184AB63D45158C4C843E6_1549493892873_Screen+Shot+2019-02-06+at+5.57.43+PM.png

flex-direction: column-reverse; (This one would be more obvious if all the divs were different colors.

It changes the order of the items, take a look at the #s in our code)

justify-content

This value helps you control how the content is being justified across the main axis (which you define with the flex-direction).

Let’s reset our container to the following:

.container {

display: flex;

flex-direction: row;

justify-content: flex-start;

background-color: seagreen;

min-height: 200px;

}

These are the values you can use for justify-content:

justify-content: flex-start;

(this is the default)

items are packed toward the start line

justify-content: flex-end;

items are packed toward to end line

justify-content: center;

items are centered along the line

justify-content: space-between;

items are evenly distributed in the line; first item is on the start line, last item on the end line

justify-content: space-around;

items are evenly distributed in the line with equal space around them

justify-content: space-evenly;

items are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same

Try each one and see how it changes when the flex-direction is column vs row. When testing out the column direction, make sure to add a height. I’ll use height: 1000px; in the demo. This should help inform your understanding of the properties.

Space-around and space-between are the least intuitive. Space-between gives equal space between each square, but not between it and the container.

Space-around puts an equal cushion of space on either side of the square — which means the space between the outermost squares and the container is half as much as the space between two squares (each square contributing a non-overlapping equal amount of margin, thus doubling the space).

A final note: remember that justify-content works along the main-axis, and flex-direction switches the main-axis

align-items

Justify-content refers to the main axis (so, the one that’s defined with flex-direction) and align-items corresponds with the cross axis.

Let’s reset our flex-direction to row.

the align-items values are as follows:

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: stretch;

(this is the default)

stretch to fill the container (still respect min-width/max-width)

align-items: baseline;

items are aligned such as their baselines align (useful for aligning paragraph tags)

The first three are exactly the same as in justify-content; stretch and baseline are a little different.

(Note that for align-items: stretch, I had to set the height of the squares to auto. Otherwise the height property would override the stretch.)

For baseline, be aware that if you take away the paragraph tags, it aligns the bottom of the squares instead, like so:

Try playing around with the different values. Are you able to center the divs both vertically and horizontally?

.container {

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

padding:10px;

background-color: seagreen;

min-height: 200px;

}

align-self

Let’s say you want to adjust the property of only one item. There’s a tool for that and it’s align-self. In the CSS, target the first container.

.item1 {

align-self: flex-end;

}

This gives you the following:

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://paper-attachments.dropboxusercontent.com/s_3E1345BE346BB6C6FBCF1203CE7529F852AE3E034ED184AB63D45158C4C843E6_1549496220319_Screen+Shot+2019-02-06+at+6.36.46+PM.png

These are the main concepts of flex-box.

Resources

https://flexboxfroggy.com/ (Try this as a group)

an animated guide to flexbox (very good if you’re still having trouble on the basics)

https://github.com/cvan/flexboxin5 (would recommend downloading and playing around)

A Complete Guide to Flexbox | CSS-Tricks

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart.

css-tricks.com

A Complete Guide to Flexbox | CSS-Tricks • css-tricks.com

More advanced layouts

https://medium.freecodecamp.org/learn-css-flexbox-in-5-minutes-b941f0affc34

https://youtu.be/P_EmvaqT9p0

Hover Activity

Download this file and follow along.

Check time: If we have time, create a composition that’s based on hovering. Consider exploring metaphors, or creating an object that can be represented digitally.

Other Cool Code snippets

background gradients: https://www.w3schools.com/css/css3_gradients.asp

full screen background image: https://www.w3schools.com/howto/howto_css_full_page.asp

images as links: https://www.tutorialspoint.com/html/html_image_links.htm

CSS photo filters: https://www.w3schools.com/cssref/css3_pr_filter.asp

Pick 10

Work on your pick 10 exercise, incorporating what you’ve learned today. In the last hour, we’re going to have a critique.

Create a Favicon

A favicon is the little icon that appears at the top of the browser window, to the left of the page title.

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://paper-attachments.dropboxusercontent.com/s_42856A8BAEF2A01DCAEF2C79701219E93C97297642FB1F017EC87AB3B150D1D6_1548291444561_Screen+Shot+2019-01-23+at+7.57.13+PM.png

Favicons help “polish” off a website and are a fun way to extend the branding or concept to the site. All the websites you turn in for this class should have one.

Favicons are always 32 x 32 pixel png files (or .ico files, but more recently, png). Usually I’ll draw one in photoshop or illustrator. Let’s make one, and then save it as “favicon.png”

If we look at the head of our survey, we’ll see that there is a link to a favicon here…

<link rel="icon" type="image/png" href="assets/imgs/favicon.png">