📱 🖥 🌐

Class 03 — 6.12.2016, 9am

Building a Page

We will be building a simple webpage that has a fixed header and sidebars, and scrolling content divided into sections.

I will introduce ways in which you can use CSS to make your design responsive, so that all elements on the page will resize according to the width of the browser window.


Adding the Fixed Header and Side Bars

Make a basic page, using the following HTML, and add the three div elements. Save the page into a new folder.

<!doctype html>
<html lang="en">
  <head>
    <title>Responsive Page</title>
  </head>
  <body>
    <div id="header">RESPONSIVE PAGE</div>
    <div id="left"></div>
    <div id="right"></div>
  </body>
</html>

Resetting the CSS

Some browsers display elements differently by default, we will reset the default CSS styles to be consistent between browsers using Normalize.css. Make a new CSS file, and copy and paste the code from here: https://necolas.github.io/normalize.css/5.0.0/normalize.css

Save the CSS file and link it to your HTML page at the bottom of the head element

<!doctype html>
<html lang="en">
  <head>
    <title>Responsive Page</title>
    <link rel="stylesheet" href="normalize.css">
  </head>
  <body>
    <div id="header">RESPONSIVE PAGE</div>
    <div id="left"></div>
    <div id="right"></div>
  </body>
</html>

Add a CSS File

Now add a CSS file for your page. Link it after the normalize.css file in the head element.

Set the html and body elements to be 100% width and height, with no margin or padding

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

Using VW Unit As a Measurement Value

The vw unit allows to set the size of elements as a percentage of the width of the browser window. 1vw is equal 1 percent of the browser window width

We will set the position of the header div to be at the top of the window, 100% of the width and 6% (6vw) of the height. We will also give it a padding of 1vw, and an arbitrary background colour.

#header {
  width: 100%;
  height: 6vw;
  position: absolute;
  top: 0;
  left: 0;
  padding: 2vw;
  background-color: #ccc;
}

Box Sizing

By default any padding or borders added to an element are in addition to the declared size, so if a div has the width of 50vw and padding on the left and right of 5vw the total width will be 60vw, becuase the 5vw of padding are added on each side, like this:

To set the width of the div so that it's total width includes any padding or borders we can set the box-sizing property to border-box. We will add a CSS rule that will be applied to all elements. We can do this using the * sign.

* {
  box-sizing: border-box;
}

Now the declared width of the div will include the padding, so it's total width will be 50vw becuase the 5vw of padding are included. The CSS width and padding for these two examples is exactly the same, the only difference is the box sizing rule.

Add the box-sizing rule to the top of your CSS file and you will see that the header div reduces in height. Find more information here.


Side Bars

Now we will set the position of the side bars so they are at the left and right of the window, that their width is 6% (6vw) of the window width, and that they are at a distance of 6% (6vw) of the window width from the top of the page.

#left,
#right {
  position: absolute;
  top: 6vw;
  bottom: 0;
  width: 6vw;
  background-color: #777;
}

#left {
  left: 0;
}

#right {
  right: 0;
}

It should look like this:

responsive1

Responsive Text Size

Let's change the text size of the header so that it also changes according to the window width. We will set the root font size of the page to be 1% (1vw) of the window width. The root size is set on the html element. We will also set the root line height.

html {
  font-size: 1vw;
  line-height: 1vw;  
}

We can now set the font size of different elements in relation to the root font size using rem units (more information here). If we set the header to be 4rem, it will be 4 times the root unit. So this means 4 x 1vw, or 4vw.

Why use rem instead of vw? We could just set the font-size to 4vw, however by using rem it means that if we want to change the font size of all elements together proportionally, we just need to change the html font-size. This will be demonstrated later.

font-size: 4rem;
line-height: 4rem;

Rotating the Side Bar Text

Now we will add some text into the side bars and rotate it. For the #left and #right divs, insert one div into each and give them the class name "rotatedText". Add some text.

<div id="left">
  <div class="rotatedText">SUBTITLE</div>
</div>
<div id="right">
  <div class="rotatedText">2016</div>
</div>

We will rotate these divs using a transform.

.rotatedText {
  transform: rotate(90deg);
}

Give the #left and #right divs rules for the type size and padding.

font-size: 4rem;
line-height: 4rem;
padding: 1vw 2vw 1vw 1vw;

Adding the Content Div

Add a new div to your page before the closing body tag with the id "content".

<div id="content"></div>

We will position it with CSS so that it takes up the remaining space on the page. We have not defined a width and height, but by giving it a top, right, bottom and left position, the div will expand to these points on the page.

#content {
  position: absolute;
  top: 6vw;
  right: 6vw; 
  bottom: 0;   
  left: 6vw;
  background-color: #345;
  overflow: scroll;
}

Now we will add a section of content. Add a section element inside the #content div, and inside the section add a h2 element, and some p elements with text. You can generate random text here.

<div id="content">
  <section>
    <h2>Section Title</h2>
    <p>Porro voluptatur aut vel ipiciliquia doluptat evenis excesed
    itatiis doles eos asitae eos dolupta tiaepudiciet quatest, sollorat.
    Quisque pharetra nibh quis dolor sodales, vitae efficitur risus dapibus.
    Vivamus vulputate egestas orci, in venenatis augue volutpat sed. </p>
  </section>
</div>  

First we will style the section element. We will give it some padding, set the font size, and change the text colour to white.

section {
  padding: 4vw;
  font-size: 2rem;
  line-height: 2.5rem;
  color: white;
}

Now to remove the default styling of the h2 element and add our own style.

h2 {
  font-size: 4rem;
  line-height: 4rem;
  font-weight: normal;
  margin: 0 0 4vw;
}	

We will change the default margin for p elements.

p {
  margin: 0 0 2vw;
}

Finally copy and paste the section element to make a second one.


Set the Size of Everything According to HTML Font-size

A nice trick is that since we have set the root font size to 1vw (1% of the window width), we can actually set the size of all elements that use the vw unit to use rem instead.

The logic is as follows:
1vw = 1% of the window width
1rem = 1 x the root font size
Or root font size is 1% of the window width, so 1rem also = 1% of the window width.

Remember that rem is relative to the document root, so if we change the document root, everything sized with rem will change too. In your CSS file change all vw units to rem, except for the HTML element. Refresh your page and you will see it looks the same. Now change the HTML font size and line height to 2vw, so will see everything is twice as big.

A practical use for this is mobile versions of websites. If we make our browser window smaller, at a certain point the font size and general layout of our page becomes too small. We can add a media query that checks that width of the window, and when it is less then a certain size we can change the HTML font size and line height values to change the entire size of our layout.

Add this rule to the bottom of your CSS file. This rule will only be applied at screen sizes up to 700px wide.

@media (max-width: 700px) {
  html {
    font-size: 1.5vw;
    line-height: 1.5vw;
  }
}

You can check the final code here.


Schedule

01 — 2.11.2016, 9am
02 — 15.11.2016, 9am
03 — 6.12.2016, 9am

04 — 20.12.2016, 9am

05 — 10.01.2017, 9am

06 — 24.01.2017, 9am

07 — 7.02.2017, 9am

Presentations — 14.02.2017