Front End Web Development

Spark Boulder, Summer 2017

Session 8: First Contact

Flexbox and media queries

More Dumb Fun Web Stuff

http://weareinstrument.com/ball/

the display: flex style

Remember that most of the display styles have to do with how an element is sized, but display: flex is a bit different.

display: flex is sized like a block element, but affects the positioning of all of the elements inside of it.

Setting margin on flexbox child elements

90% of your layout needs can be solved just by putting appropriate margins on all of the flexbox child elements.

<!-- index.html -->

<link rel="stylesheet" href="style.css">
<div class="parent">
    <div class="child">
        one
    </div>
    <div class="child">
        two
    </div>
    <div class="child">
        three
    </div>
    <div class="child">
        four
    </div>
    <div class="child">
        five
    </div>
</div>
/* style.css */

.parent {
    height: 300px;
    background-color: fuchsia;
    display: flex;
}
.child {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: chartreuse;
    margin: auto;
}

flex-direction

We usually use flex-direction to tell the objects to stack in a row or column, but it can also be used to reverse them!

<!-- index.html -->

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

<div>
    one
</div>
<div>
    two
</div>
<div>
    three
</div>
<div>
    four
</div>
<div>
    five
</div>
/* style.css */

body {
    display: flex;
    /*flex-direction: column;*/
    flex-direction: column-reverse;
    /*flex-direction: row;*/
    /*flex-direction: row-reverse;*/
}
div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: chartreuse;
}

flex-wrap

By default, flexbox child elements won't wrap. (but, they will overflow!)

Use flex-wrap: wrap if you'd like for the elements to wrap deliberately. This is generally pretty handy if you've got a huge list of elements (projects, blog posts, etc) that you'd like to display in a grid-ish format, but want the number of items per line to be variable with the window size.

Things wrap in different ways, depending on how you've set up your flex-direction!

<!-- index.html -->

<link rel="stylesheet" href="style.css">
<div class="parent">
    <div class="child">
        one
    </div>
    <div class="child">
        two
    </div>
    <div class="child">
        three
    </div>
    <div class="child">
        four
    </div>
    <div class="child">
        five
    </div>
</div>
/* style.css */

.parent {
    display: flex;
    flex-wrap: wrap;
    /*flex-direction: column;*/
    /*flex-direction: column-reverse;*/
    flex-direction: row;
    /*flex-direction: row-reverse;*/
}
.child {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: chartreuse;
}

main axis vs cross axis

There's this concept of the main axis and cross axis of a flexbox container.

flex-direction determines the direction of the main axis, and the cross axis is perpendicular to the main axis.

If your flexbox container is flex-direction: row, then your main axis is from left to right, and your cross axis is from top to bottom.

If your flexbox container is flex-direction: column, then your main axis is from top to bottom, and your cross axis is from left to right.

justify-content

justify-content determines how your elements are laid out along the main axis.

Remember - if your container element has flex-direction: column, it's going to change the spacing of the elements vertically!

<!-- index.html -->

<link rel="stylesheet" href="style.css">
<div class="parent">
    <div class="child">
        one
    </div>
    <div class="child">
        two
    </div>
    <div class="child">
        three
    </div>
    <div class="child">
        four
    </div>
    <div class="child">
        five
    </div>
</div>
/* style.css */

.parent {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.child {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: chartreuse;
}

align-items

align-items does the same thing as justify-content, but in the direction of the cross axis - the perpendicular direction to flex-direction.

Remember - if your container element has flex-direction: column, it's going to change the spacing of the elements horizontally!

<!-- index.html -->

<link rel="stylesheet" href="style.css">
<div class="parent">
    <div class="child">
        one
    </div>
    <div class="child">
        two
    </div>
    <div class="child">
        three
    </div>
    <div class="child">
        four
    </div>
    <div class="child">
        five
    </div>
</div>
/* style.css */

.parent {
    height: 300px;
    background-color: fuchsia;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.child {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: chartreuse;
}

Responsiveness

Responsiveness is the word we use to describe how a page changes in response to different dimensions or screen sizes.

Because pages typically scroll vertically, we just want to change what the page looks like at different widths.

It would be a total pain to try to figure out what your page should look like at every possible screen width, so you generally just pick various ranges of width, and determine your layout within each one of those ranges.

Chrome dev tools: the device toolbar

If you open up dev tools in Chrome, you'll see a little phone icon next to the "Inspect" button.

This turns on device mode, which will let you simulate various devices and widths for your page.

If you're looking for a couple standard widths for phones, tablets, etc, set the device to "Responsive" and click some of the bars above the page.

Media queries

Media queries let us change what styles are applied based on various properties of the device that's viewing the page. They go in your CSS.

Mainly, media queries are used to override styles at various screen widths:

/* style.css */

@media (min-width: 600px) {
    .navbar {
        flex-direction: row;
    }
}

However, you can also use media queries to change how your page looks when people try to print it:

/* style.css */

@media print {
    .header {
        display: none;
    }
}

min-width

I always get a little confused with min-width, and I'm pretty sure it's because it doesn't look like a math equation.

min-width says, "as long as the screen is at least this many pixels wide, apply the listed styles"

Those styles might override previous styles!

<!-- index.html -->

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

<div>
    this div's background color changes based on how wide the screen is! by default it's red, but at >425px it's green, and at >768px it's blue!
</div>
/* style.css */

div {
    background-color: red;
    height: 200px;
    width: 200px;
}
@media (min-width: 425px) {
    div {
        background-color: green;
    }
}
@media (min-width: 768px) {
    div {
        background-color: blue;
    }
}

Changing layouts with media queries

One of the most common things that you can do with media queries is to change layouts between column and row formats.

<!-- index.html -->

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

<div class="main">
    <div class="nav">
        <p>
            this is my navigation section. it stays at the top on mobile, but moves to the left column on >768px screens.
        </p>
        <ul>
            <li>home</li>
            <li>about</li>
            <li>projects</li>
            <li>contact</li>
        </ul>
    </div>
    <div class="content">
        <p>
            Superheroes, WDPK 83.7 FM rock'n roll. Superheroes high life. High life, da funk funk. Emotion contact. Robot rock one more time. Crescendolls. Contact, rollin' and scratchin'. Technologic, rollin' and scratchin'. Rollin' and scratchin' motherboard, doin'
            it right. Face to face rock'n roll. Digital love. Indo silver club, da funk emotion.
        </p>
        <p>
            Make love phœnix, funk. Alive. Oh yeah discovery phœnix. Nightvision phœnix. Rock'n roll, crescendolls, nightvision technologic, fragments of time, give life back to music fragments of time. Contact the prime time of your life. Phœnix, indo silver club
            indo silver club, human after all contact fresh human after all, oh yeah.
        </p>
        <p>
            Robot rock harder, better, faster, stronger, something about us high fidelity discovery. Phœnix. Nightvision voyager, too long. Crescendolls. Technologic. Veridis quo. Human after all. Discovery, rollin' and scratchin' voyager crescendolls daftendirekt,
            get lucky steam machine, discovery on/off. Around the world WDPK 83.7 FM alive, fresh. One more time around the world.
        </p>
        <p>
            Face to face. Da funk. The prime time of your life instant crush, contact. Steam machine too long human after all, face to face, lose yourself to dance. Doin' it right, give life back to music within aerodynamic daftendirekt. Motherboard high fidelity,
            steam machine da funk. Rollin' and scratchin' rollin' and scratchin'.
        </p>
        <p>
            Harder, better, faster, stronger, fresh random access memories. Alive the prime time of your life superheroes, short circuit rock'n roll, high life. The brainwasher random access memories. Give life back to music, contact random access memories da funk,
            indo silver club. Robot rock. Nightvision. Teachers. Human after all discovery motherboard.
        </p>
    </div>
</div>
/* style.css */


/* by default, we don't apply any layout styles! just some colors. */

* {
    box-sizing: border-box;
}
.main {
    background-color: red;
    padding: 10px;
}
.nav {
    background-color: green;
}
.content {
    background-color: blue;
}
@media (min-width: 768px) {
    .main {
        display: flex;
        flex-direction: row;
    }
    .nav {
        width: 20%;
    }
    .content {
        width: 80%;
    }
}

When designing your page

Start with laying out how your page is going to look at your smallest page width, and write your styles as if that was the only layout you had.

Then, add media queries to modify that style and layout, using the min-width media query.

What questions are there?

Stuff for tonight:

How to be a Web Developer

Excelsior! 🚀

Appendix

Scrubs & IE

Nokia 3310