Front End Web Development

Spark Boulder, Summer 2017

Session 6: The Undiscovered Session

The CSS Box Model (height, width, border, padding, margin, and box-sizing)

Project 2: Client Project

For your second project, I'd like you to work with a client to build something web-dev related for them!

The scope of your project is really up to you. I'd recommend building some kind of landing page or marketing site for the client - HTML, CSS, text, images, links, everything.

If the client wants you to improve on an existing site, it's possible, but I'd be careful - monkeying around with prepackaged Wordpress/Squarespace themes is a pretty easy way to get a headache.

If you've already got a client, great! If you need a client, I'd recommend first reaching out to @dannywalsh on Slack, and if you still can't find anyone, you can try emailing some of the folks listed on readings 9.

A couple things:

FAQ

Q: Do they have to pay me?

A: Nope! They don't have to. Part of the class work and all.

Q: Are they allowed to pay me?

A: Of course! (but make sure it's a small amount, otherwise you'll have to sign paperwork and stuff)

Q: What if I can't get it done in time for session 9?

A: I don't expect this to be completely done by Session 9! Your clients will likely be finnicky and temperamental, and delays in projects happen. Submit your site whenever it's all done, hopefully by the end of the class.

Q: Does the client have to use what I make?

A: Nope - the client is under no obligation to publicly use your work. If they would like to, they totally can!

More dumb fun web stuff

http://codeinthedark.com/

The CSS Box Model

Two things to remember:

  1. Every page on the internet is just a series of nested boxes
  2. Check out the CSS box model by using your browser's dev tools (right-click an element -> Inspect)

Height and width

Pretty straightforward - we've gone over this a bunch already.

One thing that I want to draw attention to is that the height and width only applies to the content of an element. We'll see why this matters in a few slides.

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<div>
    This content is 100px by 100px.
</div>
/* style.css */

div {
    width: 100px;
    height: 100px;
    background-color: chartreuse;
}

Border

Again, already seen a bunch of this.

Did you know that you can use images in your border? Here's an example of a site that uses it: http://luftrausers.com/

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<div>
    This content has a funky border.
</div>
/* style.css */

div {
    background-color: chartreuse;
    border: 5px dashed fuchsia;
}

Whoa...what style did we just apply there?

Border shorthands

Instead of declaring border-width, border-style, and border-color individually, we can set all of them at once with the border style. It's called a shorthand.

/* style.css */

div {
    border: <br-width> || <br-style> || <color>;
    background-color: chartreuse;
}

In a pinch? You can always declare individual styles for individual sides (e.g. border-style-bottom, border-color-left). You can even declare a generic border style first, then override them with more specific styles in the same CSS declaration.

Learn all about the shorthands for border at the MDN docs.

Shorthands

Turns out there's tons of shorthands!

In the future, I'll try to use shorthands as much as possible.

For most of these shorthands, the number and order of the arguments matter!

margin / padding

/* style.css */

div {
    margin: 100px;
    /* all four sides */
    margin: 100px 200px;
    /* vertical / horizontal */
    margin: 100px 200px 300px;
    /* top / horizontal / bottom */
    margin: 100px 200px 300px 400px;
    /* top / right / bottom / left (clockwise)*/
}

background

Let's just say it's complicated.

Shorthands a little too overwhelming? No worries at all, just use the explicit styles.

Padding

We've seen padding already!

Remember, padding is used to push the content away from the edges of your box.

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<div>
    So padding. Wow.
</div>
/* style.css */

div {
    padding: 100px;
    background-color: chartreuse;
}

er...what?

What's the actual width of each one of these elements?

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<div class="normal">
    this content has a height of 300px by 300px.
</div>
<div class="withpadding">
    this content has a height of 300px by 300px.
</div>
/* style.css */

div {
    height: 300px;
    width: 300px;
    background-color: chartreuse;
}
.withpadding {
    padding: 100px;
    background-color: red;
}

Enter box-sizing

By default, all HTML elements have box-sizing set to content-box.

This means that the height and width only apply to the content. This means that padding and margin expand the actual dimensions of the element.

Sometimes that's not what we want! Sometimes it's much easier to consider padding as part of the element that you're sizing.

If you set box-sizing: border-box;, then whenever you set height or width, the browser will automatically factor the padding into the desired dimensions, and adjust the content of the element accordingly.

In the previous example, if we set box-sizing: border-box;, then all of our divs have the same dimensions, regardless of their padding:

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<div class="normal">
    this **element** has a height of 300px by 300px.
</div>
<div class="withpadding">
    this **element** has a height of 300px by 300px.
</div>
/* style.css */

div {
    box-sizing: border-box;
    height: 300px;
    width: 300px;
    background-color: chartreuse;
}
.withpadding {
    padding: 100px;
    background-color: red;
}

For more info, check out the MDN docs.

Margin

You might have poked around a bit with margins already!

Remember, margins push other elements away from your element, but don't actually represent the space within your element. Margins are transparent! They don't have any background properties, so keep that in mind when deciding to use margin or padding.

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<div>
    this element is 100px by 100px, and has some margin.
</div>
<div>
    this element also 100px by 100px, and has some margin.
</div>
/* style.css */

div {
    height: 100px;
    width: 100px;
    margin: 100px;
    background-color: chartreuse;
}

Blarg...notice what's wrong here?

What's the height and width of the elements?

What's the margin on each element?

How far apart should those two elements be?

Collapsing margins

Ugh...this is why CSS gets a lot of flak from the programming community. All of these little gotchas that are leftover from the Web 1.0 era!

If you have two block elements that both have top/bottom margins, then those margins might get collapsed to a smaller margin.

This was originally intended just for paragraphs, to provide extra spacing on the start/finish of a block of text while retaining spacing in the middle, just to make it a little easier to create and style.

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<p>
    This paragraph element has height 100px and width 300px, with a top/bottom margin of 100px. Use your dev tools to inspect it!
</p>
<p>
    This paragraph has the same dimensions and margin, but notice that instead of the space between these two paragraphs being 200px, it's collapsed to 100px.
</p>
<p>
    The margins before/after this group of paragraphs remain the same.
</p>
/* style.css */

p {
    height: 100px;
    width: 300px;
    margin: 100px;
    background-color: chartreuse;
}

I don't expect you to have to deal with or even know much about collapsing margins. I just want to let you know that they exist, so that you know what you're seeing when you can't figure out why your paragraph margins aren't working correctly.

Here are a couple of resources for understanding and handling collapsing margins.

Putting it all together

Blegh. CSS layouts are complicated. Just wait til we get to display, position and media queries!

Still got your portfolio site? Try adding a bunch of margins/padding/sizing to all of your different elements.

Simply adding whitespace does wonders for getting users to focus on what really matters on your page.

What questions are there?

Stuff for tonight:

How to be a Web Developer

https://vimeo.com/24715531

Excelsior! 🚀

Appendix

The display style

Every element on the page already has a display style declared on it!

The vast majority of them are display: block.

Some of them (like <a>, <span>, and <img> tags) are display: inline.

The <head> tag has display: none, which means that our <meta>, <link> and <title> tags don't get displayed.

To see this, bust open your dev tools, inspect the various elements, and check the "Computed" styles of the elements.

display: block

By default, elements with display: block stretch all the way across to fill the parent container.

divs, headings, paragraphs, and most other elements have display: block by default!

Anchor tags and spans don't have display: block by default.

(If you really want, you can set them to be display: block, but I wouldn't recommend it.)

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<div>
    divs have display: block by default.
</div>
<div>
    notice how it stretches all the way across to fill the container?
</div>
<div class="fiftyPercent">
    <div>
        even if it's nested.
    </div>
</div>
<h1>headings have display: block by default,</h1>
<p>
    as well as paragraphs.
</p>
<a href="#">links and spans aren't display: block by default!</a>
<span>they don't stretch to fill the container automatically.</span>
/* style.css */

div, h1, p, a, span {
    background-color: lightgray;
    margin: 10px;
}
.fiftyPercent {
    width: 50%;
}

display: block stacks vertically, regardless of element width

Even if I have a bunch of small elements with display: block, they'll stack in a column instead of a row.

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<div>
    Even if my block-level elements are small
</div>
<div>
    And could easily stack in a row
</div>
<div>
    display: block will make them stack in a column
</div>
<div>
    regardless of width
</div>
/* style.css */

div {
    background-color: lightgray;
    width: 25%;
    margin: 10px;
}

display: inline

What does an element with display: inline look like?

display: inline elements are commonly used inside other elements where it's important to not disrupt the flow of the content. They can also wrap over multiple lines!

<a>, <span>, <strong>, <em> and <img> tags are display: inline by default.

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<p>
    Daftendirekt. Discovery doin' it right, oh yeah robot rock high life. Beyond burnin' get lucky. Discovery voyager voyager revolution 909. Funk. <a href="#">Inline elements are commonly found within other elements where it's important not to break the flow of the parent element.</a> Oh yeah, rollin' and scratchin' revolution 909 nightvision veridis quo. Within discovery. <span>They can also wrap over multiple lines!</span> Crescendolls fragments of time, technologic revolution 909 steam machine. Giorgio by moroder instant crush, touch touch. Veridis quo.
</p>
/* style.css */

a, span {
    background-color: lightgray;
}

Inline element stacking

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<span>If you have a bunch of inline elements, </span><span>they'll always stack in a row, </span><span>and can wrap down to the next line mid-element.</span>
/* style.css */

span {
    background-color: lightgray;
}

Inline element weirdness

Generally, you cannot set the dimensions of an element with display: inline.

However, even though <img> elements are inline by default, you can set the dimensions of those without issue.

Things get pretty weird when you try to throw margin or padding on an element with display: inline.

display: none

display: none pretty much does exactly what you'd expect it to.

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<div>
    This element isn't displayed on the page, but you can still see it in the page HTML! Check your dev tools.
</div>
<div>
    It's not invisible, and there's no space for it on the page - it's just not there!
</div>
<div>
    SpoooOooOooOOOooky!
</div>

<span>did somebody say something?</span>
/* style.css */

div {
    display: none;
}