Intermediate HTML/CSS & Intro to Responsive Design

Class notes

All slides are available at http://gdiseattle.github.io/gdi-new-intermediate-htmlcss

The slide repository is also available on Github at http://github.com/gdiseattle/gdi-new-intermediate-htmlcss

Welcome!

About your instructor

Thank you to our Teaching Assistants today

Now it's all about you!

• Tell us who you are.
• What do you hope to get out of this class?
• Unlimited amount of money - where would you travel to?

What we'll be covering in this class

We'll be jumping into HTML/CSS right where the beginner class left off.

We will not be going over the previous class, there's too much cool stuff to learn!

We will be building a profile site from scratch

Workshop files

Workshop files

Last reminder to download the files for today's class! http://gdiseattle.github.io/gdi-new-intermediate-htmlcss/workshop-files.zip

• We have provided a folder that contains sample images for you to use today. We encourage you to be creative so don't feel like you're restricted to these images
• We've also included a blank index.html file for you to work from, as well as the final site for you to use as a reference if you get stuck.

Folder Structure

We've set up the folder structure for the site today to reflect common practices used.

Cheat sheets

We've provided a copy of the site you'll be building today with notes on how to break down the layout of the page.

Common Applications

Common Applications

HTML & CSS are awesome, right?

But how do people use them really?

Here's a few things we'll be covering today:

• Horizontal & fixed navigation
• Heros with full bleed background images
• Border-radius on images & elements
• Custom font-faces
• Three column layouts
• Fancy buttons

Standard Practices

Standard Practices

• Reset CSS files
• Standard widths and sizes
• Containers for layout

Reset CSS

Even though HTML is the structure and CSS is the design, some HTML elements have default styles

Different browsers display these things differently. A reset gets rid of these inconsistencies.

Examples include:

• Bulleted lists like this one have standard bullets
• Paragraphs & headings have default padding
• Links are blue and underlined

Reset CSS

  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;

  list-style-type: square;

Reset CSS

We've done all the hard work for you! Instead of typing this out - we've included this in our example files.

Standard widths and sizes

• Screen sizes vary from computer to computer. Standardize your site on different screen sizes by defining specific widths.
• Wrap your content in containers to control the max width it can span across a screen.
• Keep in mind screen sizes also mean different font size display.
• Retina screens have a higher pixel density and a larger resolution, so fonts appear smaller.

Fixed vs. Fluid Width pages

Fixed

• Fixed websites have a set width for the wrapper, usually 960px to 1024px.
• The elements inside the wrapper have a set width, or percentage of the wrapper width.
• No matter the screensize, the user always sees the same size site.

Fixed vs. Fluid Width pages

Fluid

• Also referred to as a liquid layout.
• Majority of the components, including the wrapper, have percentages for their widths.
• The layout adjusts for the width of the user's screen resolution.
• Sounds like a responsive site right!? More on that later.

Containers

Wrappers are a good way to center content if the screen width is wider than your content.

  .container {
      width: 100%; /* take up full viewport width */
      max-width: 1400px; /* if viewport is larger than 1440px, 
                            don't let it take up 100% */
      margin: 0 auto; /* center content in the viewport */
  }

• 1. The container will take up 100% of the screen if the width of the viewport is less than 1440px.
• 2. If the viewport is wider than 1440px, it will reach it's max width, and become centered in the viewport.

HTML5

HTML5: What is it?

Formally, HTML5 is the W3C’s specification for the newest version of HTML.

Informally, people use "HTML5" to refer to a whole set of new web standards and abilities:

• HTML5
• CSS3
• JavaScript

Quick History of HTML5

• 2004:WHAT-WG Working group formed. (Web Hypertext Application Technology Working Group)

  Members from Apple, Mozilla, & Opera set out to develop HTML5.

• 2008:First verson of HTML5 published

  First draft is written, but changes are still coming. HTML5 is continually evolving.

• 2008:Firefox 3 becomes HTML5 compatable.
• Jan. 2010:YouTube now offers HTML5 video player.

Okay, not that quick history of HTML5

• April 2010: Steve jobs trashes Flash & bans it on all Apple devices in favor of HTML5.
• Dec. 2010: Chrome opens HTML5 web store.
• Sept. 2011: 34% of top 100 sites use HTML5
• Sept. 2012: WC3 proposes stable release of HTML5 by end of 2014
• Oct. 2014: HTML5 released as a stable recommendation, meaning specification process is complete.

What about the browsers?

Percentage of HTML5 Elements supported:

• Chrome 35: 92% supported
• Opera 22: 90% supported
• Firefox 30: 84% supported
• Safari 7: 72% supported
• Internet Explorer 11: 68% supported

So what's so cool about it?

Too much to cover in our time together

But here are some highlights:

Marks some old things obsolete

Examples

• Deprecated items (e.g. frame, frameset, noframes)
• Presentational elements and attributes replaced by CSS (e.g. font, big, center)

Redefines a few things

Gives some old elements semantic meaning and separates them from presentation (e.g. b, i, strong, em)

HTML5 Doctype

<!DOCTYPE html>
        

Minimum information required to ensure that a browser renders using standards mode

Old Doctypes

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        

New Structural Elements

<section>

• Group together thematically related content
• Similar to prior use of the div, but div has no semantic meaning

<header>

• Container for a group of introductory or navigational aids
• Document can have multiple header elements
• E.g. One for the page, one for each section
• Page header can be identified by screen readers with role="banner"

<nav>

• Contains major navigational information
• Usually a list of links
• Often lives in the header
• E.g. site navigation

<footer>

• Contains information about its containing element
• E.g. who wrote it, copyright, links to related content, etc.
• Document can have multiple footer elements
• E.g. One for the page, one for each section
• Page footer can be identified by screen readers with role="contentinfo"

<aside>

• Tangentially related content
• E.g. sidebar, pull quotes

<article>

• Self-contained related content
• E.g. blog posts, news stories, comments, reviews, forum posts

<main>

• Semantic container for main content
• Only one instance per page allowed, with some other restrictions
• Provides a landmark for screen reader users

Let's Develop It

• Use new semantic HTML5 elements to layout the site
• Refer to the example design for hints.

Horizontal Fixed Nav

All the cool kids are doing it these days

• Horizontal fixed-to-top nav allows users to have access to navigational elements at all times.
• All the rage these days
• Be careful - screen heights vary, and it reduces the amount of content visible on smaller screens.

Fixed Nav: HTML

Let's include it in a header, since we know we'll be grouping related content here.

• About
• My Work
• Contact

Fixed Nav: CSS

Remember, using fixed position is like using absolute position, except that it's fixed to the viewport, not the containing element.

We also have to define a width for it, and its location.

.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    background: #fafafa;
    border-bottom: 2px solid #ccc;
    height: 70px;
    width: 100%;
}

Fixed Nav: CSS

Because we've fixed the nav to the top of the viewport, we need to bump the content of the body down to be visible to the user.

This should be the same, or more than, the height of the navigation bar.

body {
    padding-top: 70px;
}
.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    background: #fafafa;
    border-bottom: 2px solid #ccc;
    height: 70px;
    width: 100%;
}

Fixed Nav: CSS

Now we need to get those list items next to each other instead of stacked.

Let's float them to the left and add some padding to the links so they have a large clickable area.

body {padding-top: 70px;}
.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    background: #fafafa;
    border-bottom: 2px solid #ccc;
    height: 70px;
    width: 100%;
}
.main-nav li {
    float: left;
    width: auto;
}
.main-nav li a {
    padding: 25px 10px;
    display: block;
}

Fixed Nav: Adding a brand

We can use a single H1 with text replacement to include a brand, or logo, in the corner that will still work if images are turned off, making it accessible to screen readers.

Cara Jo Miller

• About
• My Work
• Contact

Fixed Nav: Text Replacement & H1s

(CSS Background Reference)

#brand {
    text-indent: -90000px;
    background: url(../images/brand.png) no-repeat top left;
    height: 60px;
    width: 60px;
    float: left;
    margin: 5px;
} 
.main-nav ul {
    float: right;
    width: auto;
}   

The background url must match an image in your workshop files. Remember relative URLs?

Why Text Replacement?

• Use a background image in an accessible way.
• If we turn the CSS off for this page, the title will still be visible to the browser.
• If a user is coming to our site with a screen reader, the title of the site will be readable to them.
• Search engines ♥ it!

Fixed Nav: Container

Notice how the edge of the nav bumps up against the edge of the browser? Let's fix that by adding a container around it.

Fixed Nav: Container

Let's give the container a fixed width and see what happens.

.container {
    width: 1024px;
    margin: 0 auto;
}

Now wherever we use .container it will be 1024px wide and centered.

Develop It!

Let's make some small tweaks to the navigation

• Remove the underlines on the links with text-decoration
• Change the color of the links
• Try adding a background color on hover and focus

Hero Section

What is a Hero?

• Large banner image, prominently placed on a web page, generally front and center
• First visual a visitor encounters on the site and its purpose is to present an overview of the site's most important content
• Often consists of image and text, can be static or dynamic

Hero: HTML

Our hero section should look a little something like this:

<section id="hero">
    

Wally Wallerson

Hero: CSS

Now is where the fun really happens!

#hero {
    background: url(../images/alpinelakes.jpg) no-repeat top left;
    color: #fafafa;
    text-align: center;
}

Hero: CSS

Let's give it a height and some padding too.

#hero {
    background: url(../images/alpinelakes.jpg) no-repeat top left;
    color: #fafafa;
    text-align: center;
    height: 350px;
    padding: 25px 0;
}

Remember our Box Model. Padding adds to the height & width of elements.

So the height of our hero will be 400px

Well, that was unexpected...

Things that are wrong with this hero right now:

Hero: Profile Image

Let's make the profile image a little smaller.

We'll use CSS Targeting with the descendant selector to style the image.

#hero img {
    width: 150px;
}

That should do it

Border Magic

Turning squares into circles with magic!

Okay, it's not really magic, it's just a bit of CSS3.

Border-Radius

Simply put, allows you to create rounded corners on boxes.

Designers rejoice!

Border-radius

20px radius on all corners

#hero img {
    border-radius: 20px;
}

Border-radius

10px radius on top left & bottom right

40px on top right & bottom left

#hero img {
    border-radius: 10px 40px;
}

Border-radius

10px radius on top left

20px radius top right

40px radius bottom right

80px radius bottom left

#hero img {
    border-radius: 10px 20px 40px 80px;
}

Border-radius

50% radius on all corners

#hero img {
    border-radius: 50%;
}

Vendor Prefixes

Vendor Prefixes

HTML5 and CSS3 are still new!

This is great, but it means that not all browsers treat new CSS3 properties the same

Vendor Prefixes

Flags it as a work-in-progress

When finished, the browser should support the non-prefixed name

Vendor Prefixes

Each browser has their own:

• Chrome:-webkit-
• Firefox:-moz-
• Safari:-webkit-
• Opera:-o-
• IE/Microsoft:-ms-

Using Prefixes

#main-content {
    -webkit-columns: 300px 2;
       -moz-columns: 300px 2;
            columns: 300px 2;
}

Order matters! The non-prefixed version should always go last.

NOTE:

While you should always use the vendor prefixes when writing code, today we're just going to use the non-prefixed property.

This is to save time during the code exercises.

Back to our Hero!

Background-size

Notice how the image is too large for the section? Let's fix that with a new property called background-size (Reference)

#hero {
    background: url(../images/alpinelakes.jpg) no-repeat top left;
    background-size: cover;
    color: #fafafa;
    text-align: center;
    height: 350px;
    padding: 25px 0;
}

background-size: cover; scales the image to the largest size such that both its width and its height can fit inside the content area.

Borders & currentColor

• Borders can inherit color from the color property.
• currentColor is a keyword for the calculated value of that color property.
• Great for inheriting colors!

#hero p {
  border: 1px solid;
  color: blue;
}
#hero p span {
  background: currentColor;
}
              

Example

Font Sizes

Setting up a web typography scale could be a whole class by itself. But here is a resource:

A Modern Scale for Web Typography

Develop It!

Let's make some small tweaks to the Hero

• Use border-radius to make the hero profile image into a circle.
• Adjust the font size of the header.
• Add a border to the span.

3-column Content Area

3 Column: HTML

Our code should look something like this:

<section id="main-content">
    

...

3 Column: CSS

Now that we have our 3 columns, we want them to appear next to each other. We can do this by floating them all left.

.column {
    float: left;
    width: 30%;
    padding: 15px;
}        

We used 30%, because it let's us perfectly spaced columns without doing math! Don't forget padding (or margin) to give the columns so space.

Wow. Large Images.

The images didn't scale with the columns, because they ignore constraints like div width, unless you tell it to do so.

.column img {
    width: 90%;
    max-width: 90%;
}

There we go!

Let's add a border radius to it too, because we ♥ circles

.column img {
    width: 90%;
    max-width: 90%;
    border-radius: 50%;
}

3 Column: Container

We've got our 3 column layout set, our images are scaled based on the width of the column, but our columns are still bumping against the edges of the browser.

<section id="main-content">
    <div class="container">
        <h3>...
        <article class="column">
            ...
        </article>
        <article class="column">
            ...
        </article>
        <article class="column">
            ...
        </article>
    </div>
</section>

Adding the container, that we already defined the width of, makes the everything line up.

Clearing floats

• So that elements coming after our floats don't overlap, we need a clearing element, sometimes called a "clearfix".
• Any element can be used to clear floats using clear: both;.
• To be extra crafty and efficient, try using it on a pseudo-element:

#main-content:after {
  content: '';
  clear: both;
  display: block;
}
              

More about float clearing

Develop It!

Let's make some small tweaks to these columns

• Adjust the font size of the main header of the content area
• Adjust the font size of the headers in the columns. Try changing their colors too.
• Add a border to the images to make them stand out a bit more.
• Add a clear-fix after the columns

SVG Graphics

SVG Graphics

Designers everywhere have always wanted to use vector based graphics on their sites because of their quality.

Well now you can!

How to use SVG today

Use Adobe Illustrator, or other vector program, to create a high quality image.

Save it as an .svg file.

Save a high resolution .png image as a fallback.

Include SVG

Use SVG as an image with PNG fallback:

<img src="image.svg" alt="what's in the image" 
 onerror="this.onerror=null; this.src='image.png'">

Use SVG as a background image:

HTML:

<a href="/" class="logo">
Girl Develop It
</a>

CSS:

.logo {
    display: block;
    text-indent: -99999px;
    width: 100px;
    height: 82px;
    background: url(logo.svg);
    background-size: 100px 82px;
}

Inline SVG

Alternatively, you can put SVG markup directly into your HTML:

<ul id="socialIcons">
<li>
<a href="http://twitter.com/">
<svg width="55px" height="44px" viewBox="0 0 55 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>twitter</title>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="layout" transform="translate(-524.000000, -1383.000000)" fill="#FAFAFA">
            <path d="M579,1388.20845 C576.97655,1389.09204 574.801575,1389.68923 572.51935,1389.9575 C574.8486,1388.58284 576.638025,1386.40606 577.480625,1383.81213 C575.30015,1385.08527 572.885375,1386.00947 570.31495,1386.50758 C568.25685,1384.34867 565.32425,1383 562.0787,1383 C555.8472,1383 550.794625,1387.9732 550.794625,1394.10747 C550.794625,1394.97807 550.89445,1395.82593 551.08695,1396.63887 C541.7089,1396.17569 533.394275,1391.75338 527.8291,1385.03303 C526.8578,1386.67352 526.3012,1388.58175 526.3012,1390.61749 C526.3012,1394.4713 528.2933,1397.87114 531.32105,1399.86302 C529.4714,1399.80536 527.731475,1399.30563 526.210175,1398.47374 C526.209075,1398.52003 526.209075,1398.56632 526.209075,1398.61343 C526.209075,1403.99513 530.098675,1408.48457 535.2607,1409.50514 C534.313875,1409.75907 533.317,1409.89496 532.28795,1409.89496 C531.56085,1409.89496 530.853825,1409.82512 530.16495,1409.69545 C531.600725,1414.10828 535.7678,1417.31998 540.7057,1417.40931 C536.843875,1420.38874 531.978575,1422.16459 526.6917,1422.16459 C525.7809,1422.16459 524.88275,1422.1118 524,1422.0092 C528.993725,1425.1608 534.924925,1427 541.297225,1427 C562.0523,1427 573.402375,1410.07417 573.402375,1395.39551 C573.402375,1394.91391 573.3911,1394.43503 573.369375,1393.95858 C575.574325,1392.39226 577.487225,1390.43611 579,1388.20845" id="twitter"></path>
        </g>
    </g>
</svg>
</a>
</li>
</ul>
              

Tips for accessibility

Browser Support

Getting a lot better!

Sara Soueidan has written a lot of great articles about styling SVG with CSS. Also videos, if that helps!

SVG Social Icons

Now that we know how awesome SVG graphics are, let's use them in our social links section.

Social Links: HTML

<section id="social">
    <ul>
        <li>
            <a href="..">
                <img src="images/facebook.svg" alt="Facebook" />
            </a>
        </li>
        <!-- Repeat li for each social link you want to include -->
    </ul>
</section>

We're using a list for these links for the exact same reason we used them in the navigation. They are a list of links, and should be marked up accordingly.

Social Links: CSS

We'll need to add a background, some padding, account for the floated list items.

#social {
    background: #57BEC5;
    color: #fafafa;
    padding: 25px 0;
    overflow: hidden;
}
#social li {
    float: left;
    width: auto;
    padding: 20px;
}

Centering the List

First we should put our social links in a container! We'll also add in a headline.

<section id="social">
    <div class="container">
        <h3>...</h3>
        <ul>
            ...
        </ul>
    </div>
</section>

Next we'll center the ul with our magic auto margin.

#social ul {
    width: 520px;
    margin: 0 auto;
}

We'll need to give it a width, for the auto margin to work with. This may take some tinkering in the inspect element to get the right width.

Develop It!

• Style the headline using the Descendant Selector.
• If you have Illustrator or another program to modify .svg files, change the colors to match your site.

@font-face

Or really, the reason you took this class.

@font-face

The world of HTML has progressed beyond Times New Roman and Arial

Yay!

How do we use new and cool fonts?

Class, meet Google WebFonts

Google has hundreds of free, open-source fonts that have been optimized for the web, and ready for us to use!

The service runs on Google's servers which are fast, reliable and tested. Google provides this service free of charge.

Seriously, I'm about to change your life.

www.google.com/fonts

@font-face

In our example, we've used Lato for the body and Bree Serif for the headlines

You can use any font you'd like!

Using Google Fonts in 3 steps!

  @import url(http://fonts.googleapis.com/
  css?family=Lato:300,400,700,300italic,400italic|Bree+Serif);

Integrating into the CSS

body{
  font-family: 'Lato', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Bree Serif', serif;
}

Develop It!

Pick some fonts for your site using Google Fonts

Adjust the font-size and line-height to refine your fonts.

rgba colors & opacity

rgba colors & opacity

In CSS, we can choose colors with hexadecimal #00ff00 or RGB rgb(0, 255, 0)

In CSS3, there are ways to control transparency of a color, too!

• rgba - control a color's alpha channel
• opacity - control the opacity of an element

rgba colors & opacity

rgba colors

control a color's alpha channel

.example2 {
  background-color: rgba(255, 0, 0, 0.8);
}
          

color property using (red, green, blue, opacity)

opacity is a decimal value from 0 to 1

• 0 - not visible
• 1 - fully visible

opacity

control the opacity of an element

.example2 {
  opacity: 0.8;
}
          

decimal value from 0 to 1

• 0 - not visible
• 1 - fully visible

Develop It!

Change some colors to have alpha transparency or opacity.

Use http://hex2rgba.devoth.com/ to convert HEX to RGBA.

Hint: Try making the navbar 80% opaque.

Text Shadow

text-shadow

text-shadow: offset-x offset-y blur-radius color

#example1 { text-shadow: 2px 2px 10px red; }

#example2 {
text-shadow: 1px 1px 10px red,
            10px 10px 10px orange,
            15px 15px 10px yellow,
            20px 20px 10px green,
            25px 25px 10px blue,
            30px 30px 10px purple;
}

text-shadow

Subtle dark shadows behind white text can help readability.

#hero h2 { text-shadow: 2px 2px 2px #000; }

Box Shadow

box-shadow

Adds a drop shadow to an element

box-shadow

box-shadow: offset-x offset-y color

.example1 { box-shadow: 5px 5px red; }
          

box-shadow

box-shadow: offset-x offset-y blur spread color

.example { box-shadow: 0 0 5px 5px red; }
          

box-shadow

box-shadow: inset offset-x offset-y blur spread color

.example { box-shadow: inset 0 2px 5px 0px red; }
          

Develop It!

Add shadows to your text

Remember: Be subtle!

Add a box-shadow to the nav.

CSS Gradients

Gradients

Build gradients with CSS - because doing it with images is annoying!

Linear gradients

.linear-example1 {
background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}
.linear-example2 {
background-image: linear-gradient(right, red, orange, yellow, green, blue, indigo, violet);
}
.linear-example3 {
background-image: linear-gradient(bottom right, red, orange, yellow, green, blue, indigo, violet);
}

Linear gradients

.linear-example4 {
background-image: linear-gradient(red, white);
}
.linear-example5 {
background-image: linear-gradient(right, red, white);
}
.linear-example6 {
background-image: linear-gradient(bottom right, red, white);
}

Radial gradients

.radial-example1 {
  background-image: radial-gradient(circle cover, red, orange, yellow, green, blue, indigo, violet);
}
.radial-example2 {
  background-image: radial-gradient(0 0, circle, red, orange, yellow, green, blue, indigo, violet);
}
.radial-example3 {
  background-image: radial-gradient(0 50%, circle, red, orange, yellow, green, blue, indigo, violet);
}

Radial gradients

.radial-example4 {
  background-image: radial-gradient(circle cover, red, white);
}
.radial-example5 {
  background-image: radial-gradient(0 0, circle, red, white);
}
.radial-example6 {
  background-image: radial-gradient(0 50%, circle, red, white);
}

CSS gradients are a pain to do from scratch

That's why people have made things like the Gradient Editor to make our lives easier!

Develop It!

Add a background gradient to a section of your site.

Transitions

Allow property changes in CSS values to occur smoothly over a specified duration

Create some awesome effects without any JavaScript

Transition Triggers

• Hover
• Keyboard focus
• Click
• Touch
• Active state
• Changes to the element

Transition Properties

• transition-property
• transition-duration
• transition-delay
• transition-timing-function

transition-property

the names of CSS properties that should be transitioned

.example1 { transition-property: background-color; }
          

set to all to transition all CSS properties

.example2 { transition-property: all; }
          

transition-property

animatable examples

full list of supported properties

transition-duration

the number of seconds or milliseconds a transition animation should take to complete

.example1 { transition-duration: 2s; }
          

transition-delay

delay transitions from the moment a trigger happens

.example1 { transition-delay: 0s; }
.example2 { transition-delay: 1s; }
.example3 { transition-delay: 2s; }
.example4 { transition-delay: 3s; }

transition-timing-function

determines how intermediate values are calculated

.example { transition-timing-function: ease; }

That's a lot to remember right?

Lucky for us, someone has created a tool that makes our lives easier.

css3generator.com/

Develop It!

Pick a transition property and apply it to an element.

Hint: The transition will only work if it has a pseudo class, like :hover or :focus

Transforms

Allow elements rendered by CSS to be transformed in space

Transform: Scale

scales the element

transform: scale(x, y);

Transform: Rotate

rotates the element degrees around its origin

transform: rotate(angle);

Transform: Translate

move element using x and y coordinates

transform: translate(x, y);

Transform-origin

the x and y origin for transformation

transform-origin: x-offset y-offset;

Develop It!

Pick a transform property and apply it to an element.

Hint: The transforms, like transitions, will only work if it has a pseudo class, like :hover

Extra Credit: Use it with transition to make the transform smoother.

Keyframe Animations

Animate over an arbitrary number of frames using CSS.

The Syntax

Use custom percentages for your tweens, then reference them by their identifier.

@keyframes identifier {
  0% { top: 0; }
  50% { top: 30px; }
  50% { top: 10px; }
  100% { top: 0; }
}
.someElement {
 /* @keyframes duration | timing-function | delay | 
   iteration-count | direction | fill-mode | play-state | name */
  animation: 3s ease-in 1s 2 reverse both paused slidein;
}
            

CSS Reference

Animation: Browser Support

Animating Multiple Steps

@keyframes yourAnimationName {
  0% {
    transform: translate(100px, 100px);
  }
  30% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100px, 100px);
  }
}

#someElement {
   animation: yourAnimationName 2s infinite;
}
            

Note: Using vendor prefixes will get better cross-browser support.

Animating TWO Steps

@keyframes yourAnimationName {
  from {
    transform: translate(100px, 100px);
  }
  to {
    transform: translate(-100px, 100px);
  }
}

#someElement {
   animation: yourAnimationName 2s infinite;
}
            

Let's Develop It!

Add keyframe animations to your portfolio page, keeping in mind that simplicity is best.

Responsive Web Design (RWD)

What is it!?

RWD is a design approach that suggests that the design & development of a site shoud respond to the user's behavior and environment.

Wait, people really care?

• 64% of American adults own a smartphone.
• Smartphone users check their phones 150x every day.
• Some smartphone owners — particularly younger adults, minorities and lower-income Americans — depend on their smartphone for internet access.

Reference

Why it's awesome

RWD modifies the presentation of a site, without modifying the content of the page. So no matter what, every user has access to the same information.

How did we get here?

• In 2010 Ethan Marcotte coined the tearm in an article on A List Apart.
• In 2011 he wrote the book on it (literally), called: "Responsive Web Design"
• In 2012 RWD was the #2 trend in web design
• 2013 is "The year of Responsive Web Design", because it is a cost effective alternative to mobile apps.

The Ingredients of RWD

• A Flexible foundation
• Fluid grids
• Flexible images
• Magical CSS Media Queries to make the magic happen

Fluid Grids

With fixed width sites we have to adjust the height and with of elements manually.

With fluid grids the height a width of elements is dependent upon the device resolution.

How they work

• First we define a maximum width for the container.
• Then we divide the content up into a set of columns, usually 12.
• Then we design elements with proportional widths and heights, instead of being stuck with specific pixel dimensions.
• Whenever the device width changes, the grids change in width to scale with the device.

Flexible images

Text scales easily on smaller devices, but images are a bit tricky.

Images will overflow their container elements if they're too big for them.

That's annoying.

Enter Max-width

By using max-width on images, they will only expand to the size of their parent.

If their parent has no width (which it probably does), it will just expand to the width of the viewport.

img {
  max-width: 100%;
}

Media Queries

Media queries apply certain CSS in certain situations.

• Print Media
• iPhone
• iPad
• Even larger screens
• Grayscale

Include Media Queries Last

They will overwrite previous styles because they are last in the cascade.

Standard MQs

For devices that have dimensions no smaller than 320px and are not larger than 480px

/* Smartphones (portrait and landscape) */
@media only screen and (min-device-width : 320px) 
    and (max-device-width : 600px) {
        /* Styles */
}

iPad dimensions with the orientation in landscape.

/* iPads (landscape)          */
@media only screen and (min-device-width : 768px) 
    and (max-device-width : 1024px) and (orientation : landscape) {
            /* Styles */
}

How they work

Rather than looking for a type of device, they look at the capability of the device. You can use them to check for all sorts of things.

• Width & Height (of the viewport)
• Device height & width
• Orientation - is the device in landscape or portrait mode.
• Resolution - Retina or normal.

Mobile First

By designing sites with mobile first in mind, it makes scaling them down a lot easier.

Mobile first allows us to simplify the userflow to it's basic elements and then enhance it as the screen size increases.

iPhone

Tablet

Desktop

Viewport Meta

Use this to control the size of the viewport on touch devices.

<meta name="viewport" content="width=device-width, 
user-scalable=true">

width=device-width makes the viewport the size of the device.

user-scalable=true allows the user to pinch and zoom on your site.

Chrome Device Emulator

Let's develop it!

Let's take a look at our site now on a smartphone (you can resize your browser), and find ways to improve it.

Add the viewport meta tag to the html

Use media queries to shift elements around on the page and to increase legibilty

Retina Images

Retina screens have twice the pixel density than regular screens.

If you're not using SVG Graphics, you'll need two images, one for regular resolution and one for retina.

2x Media Queries

Target only retina screens by using this media query:

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

This takes care of two things, Apple's 2x pixels ration and Androids "high res" screens.

2x Images

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    .icon {
      background-image: url(images/icon-2x.png) no-repeat 0 0;
      background-size: 20px 20px;
    }
}

Or, you could just use SVG

Responsive frameworks

Download a pre-built framework that has basic styles already set up.

• Fluid Grids
• Flexible Images
• Responsive media queries
• Styles for buttons and forms, because they're a pain!
• Lots of base styles like .pull-right, .btn, etc.

Twitter's Bootstrap

By far the most popular front-end framework out there.

Download

Foundation

Another very popular framework that is just as robust at bootstrap - but in a different way.

Download

What they include:

• Fully responsive out of the box
• Embraces Mobile First standards
• Compiled CSS for all sorts of components
• Less or Sass preprocessor stylesheets for rapid updates
• Javascript for popular components
• Pre-set styles for icons and buttons
• Includes Glyphic icon set (awesome!)

What are the cons?

• Default styles are…default and not very exciting
• Requires a fair amount of customization to make a unique looking site
• The documentation is daunting and can be very indimidating
• Remembering all the class names can be overwhelming

Questions

?