Intermediate HTML/CSS & Intro to Responsive Design

Welcome!

Wifi Info

Network: Dev Bootcamp

Password: igeekallweek

Download workshop files

Please download workshop files at:
http://girldevelopit.github.io/gdi-featured-html-css-intermediate/workshop-files.zip

Thanks to our host:

Class notes

All slides are available at:
http://gdichicago.com/courses/intermediate-html-css/

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, we just don't have the time!

We will be building a profile site from scratch

Workshop files

Workshop files

Last reminder to download the files for today's class!

• 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 (or Normalize) 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: none;
                    

Normalize CSS

Similar to Reset, Normalize will keep standard margins, padding, lists, etc. to conform to a uniformed layout.

Different browsers display these things differently. A Normalize gets rid of these inconsistencies by ensuring all base styles match one another between all modern browsers.

For simplicity's sake, we will ONLY use a CSS reset in this class but know there are two methodologies you will likely encounter in the real world (either Normalize or Reset)

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

HTML 5: What is it?

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

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

• HTML5
• CSS3
• JavaScript (ECMAScript 2016)

Quick History of HTML5

• 2004:"WHAT" Working group formed. (WHATWG)
  

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

• 2008:First version 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: Final and complete!

What about the browsers?

Percentage of HTML5 Elements supported:

• Chrome 52: 91% supported
• Firefox 50: 84% supported
• Safari 10: 69% supported
• Opera 42: 90% supported
• Edge 14: 82% supported
• Internet Explorer 11: 56% supported

Information compiled by HTML5 Test

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

• 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>

• Groups 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

<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

<aside>

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

<article>

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

Let's Develop It

• Use new HTML elements to layout the site
• Refer to the example design for hints

Horizontal Fixed Nav

All the cool kids are doing it

• 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.

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.

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;
}
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.

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

Fixed Nav: Adding a brand

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

Fixed Nav: Text replacement & H1s

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

Why Text Replacement?

• 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

Hero Section

What is a Hero?

• Large banner image, prominently placed on a web page, generally in the 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">
    
    
IMA Zebra
    Africa
</section> 

Hero: CSS

Now is where the fun really happens!

#hero {
    background: url(../images/zebra-hero.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/zebra.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:

1. That image of your face is way to big! And it's not even a circle!
2. The background image is way too large
3. The headline is really tiny

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 (sort of) 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 (though not as much anymore), Safari, and newer versions of Opera:-webkit-
• Firefox:-moz-
• Opera (old versions):-o-
• Internet Explorer (Non-Edge):-ms-

Using Prefixes

#hero img {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
                    

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

NOTE:

You should ONLY use the vendor prefixes when you need them. Should I Prefix is a third party site that showcases properties that likely still require prefixes. The properties we will use in this class DO NOT require vendor prefixes.

NOTE: Even this site has some level of innacuracies as browsers continue to update. Use this site as a basic guide, but know that nothing beats actual browser testing.

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

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

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

Develop It!

Let's make some small tweaks to the Hero

• Move the image down from the top
• Adjust the font size of the header
• Add a border to the span

3-column Content Area

Why 3 columns?

Because it's fun to challenge you.

Or, because it's a comfortable width for readability. And because 3 is a pleasing design construct.

Today, many designs fluctuate between single column, to three columns and try to be mindful of widths for devices and readability. The beauty of development and design is that it's always learning and evolving with time.

3 Column: HTML

Our code should look something like this:

<section id="main-content">
    
...
    <section class="column">
        <img src="images/africa.png" alt="Africa">
        <h4>My Home</h4>
        <p>Wild zebras live in Africa.</p>
        <a href="home.html" class="btn">See my home</a>
    </section>   
    <!-- Repeat .column x3 -->
</section> 

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 lets us perfectly spaced columns without doing math! Don't forget padding (or margin) to give the columns some space.

Wow. Large Images.

The images didn't scale with the columns, because they ignore constraints like div width, unless you tell them 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">
    

        
...
        <section class="column">
            ...
        </section>
        <section class="column">
            ...
        </section>
        <section class="column">
            ...
        </section>
    
</section>

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

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

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!

It's not that new really

It's been a W3C (World Wide Web Consortium) standard since 1999

In recent years browsers are becoming more and more compatable with SVG graphics.

Once upon a time, .png graphics weren't supported in browsers, soon the world will know about SVG!

How to use SVG today

Use Adobe Illustrator, Sketch, Inkscape, SVG-Edit, Method Draw, Mondrian, or another vector program, to create a high quality image.

Save it as a .svg file.

Save a high res .png image as a fallback.

Include SVG

Use SVG as an image:

<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">

Use SVG as a background image:

HTML:

<a href="/" class="logo">
  GDI
</a>

CSS:

.logo {
  display: block;
  color: transparent;
  width: 100px;
  height: 82px;
  background: url(kiwi.svg);
  background-size: 100px 82px;
}

Browser Support

Our favorite topic - Internet Explorer

Chris Coyer has written an amazing article with tons of work arounds for our BFF IE8. But, I have good news...

Browser Support 2

Only IE11 is supported by Microsoft, and as such we can at least say that SVG will work on all current browsers (this is also true for a number of HTML5 and CSS3 elements/properties).

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 for all social links 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 a very flexible technique that will allow us to have a list of any width

Develop It!

• Style the headline using the Descendant Selector
• If you have Illustrator or another program to modify .svg graphics, 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 Web Fonts

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.

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!

1. Search the hundreds of font families, then add them to your collection.
2. Compare and refine the collection - think about what styles you NEED.
3. Grab the code that Google prepares for you and add it to your site!

  @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 #0000FF or rgb(0, 0, 255)

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

• rgba - controls the opacity of a color
• opacity - controls the opacity of an element

rgba colors & opacity

rgba colors

controls the opacity of a color

.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

controls 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

#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;
}

Box Shadow

box-shadow

Adds a drop shadow to an element

box-shadow

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

.example { box-shadow: 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 Ultimate CSS Gradient Generator 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
• Mouse click
• Focus state
• 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

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

Transforms

Allow elements rendered by CSS to be transformed in space

Transform: Scale

scales the element

transform: scale(sx[, sy]);

Transform: Rotate

rotates the element degrees around its origin

transform: rotate(angle);

Transform: Translate

move element using x and y coordinates

transform: translate(ax[, ay]);

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 the element has a pseudo class, like :hover

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

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?

• 91% of U.S. Citizens have their smart phone within reach 24/7
• Smartphone users check their phones 150x every day
• 25% of mobile users in the U.S. don't even own a laptop or desktop

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 term 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 was called "The Year of Responsive Web Design" because it was and still is a cost effective alternative to mobile apps

The Ingredients of RWD

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

Fluid Grids

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

With fluid grids, the height and 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, 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

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 : 480px) {
/* 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
• Width & height of the device
• Orientation - landscape or portrait
• 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 user flow to its 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.

<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.

Let's develop it!

Let's take a look at our site now on a phone (or 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, 2x pixel ratio on iOS devices and "high res" Android screens.

2x Images

Regular resolution icon

2x resolution icon

@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.

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 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

LESS & SASS?!

These are two very popular CSS preprocessors

What the what is a CSS Preprocessor?

CSS preprocessors take code written in the preprocessed language and then convert that code into the same old css we’ve been writing for years.

Since we're not writing straight CSS, we're not limited to the restrictions of the language.

What they do

• Mixins – Classes for classes.
• Parametric mixins – Classes to which you can pass parameters, like functions.
• Nested Rules – Classes within classes, which cut down on repetitive code
• Operations – Math within CSS
• Color functions – Edit your colors
• Namespaces – Groups of styles that can be called by references
• Scope – Make local changes to styles
• JavaScript evaluation – JavaScript expressions evaluated in CSS

Some highlights

Mixins!

/* LESS */ .rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

#footer {
  .rounded-corners(10px);
}

  /* Compiled CSS read by the browser */
  #footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

Nested Rules

// LESS

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

/* Compiled CSS */

#header h1 {font-size: 26px;font-weight: bold;}
#header p {font-size: 12px;}
#header p a {text-decoration: none;}
#header p a:hover {border-width: 1px;}

Functions

LESS

p {
  color: lighten(@base, 5%);
}

SASS

p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

Variables

LESS

// LESS 
@blue: #199FD9;
p {
    color: @blue;
}
// Compiled CSS
p {
  color: #199FD9;
}

SASS

// SASS 
$blue: #199FD9;
p {
    color: $blue;
}
// Compiled CSS
p {
  color: #199FD9;
}

This is a lot of stuff, no?

Yes, yes it is.

Remember that you are not alone and there are so so many guides, resources, and classes that have never existed before.

If you try to learn everything, you will learn nothing.

Being a developer is about progressively learning, and knowing what you need to know when you NEED to know it.

That being said there is an endless sea of resources for design and development and you need to take the time to slowly learn and advance with time.

• Front-end Resources
• Design Resources
• Stock Resources
• and of course Girl Develop It Chicago

Thank you!

A huge thank you to our TA's, the Girl Develop It Chicago leaders, our sponsor and space for today

...and most importantly, you!

On to the next class!!!