gdi-boulder-advanced-css-techniques

AdvancedCSS Techniques

Welcome!

Wifi Info

Network: SGGuest

Password: GridSend0909

Download workshop files

If you have not already downloaded the files for this workshop - please download them at gdiboulder.com/bootstrap

Thanks to our sponsor:

Meet your instructor: Cara Jo Miller

Co-founder: Girl Develop It Boulder
Lead Designer: Simple Energy
E-mail: carajo@girldevelopit.com
Twitter: @corrinajo
Lover of all things glitter

Meet your instructor: Caitlin McKenna

Web Developer: Insight Designs
Twitter: @caitlinemckenna
Spotify Playlist Curator

Cross-Device CSS

What's the point of a CSS media query?

Media queries are designed to make your life easier by allowing you to control how your elements look on different devices.

Essentially, they are conditional statements that will apply certain style rules to your elements, depending on the device your site is being viewed on.

Using media queries, this desktop design:

Also looks great on a tablet:

And rad on a smartphone!

You can also use media queries to make sure your content looks great when it's printed out!

CSS Media Queries

A media query consists of a media type and an optional combination of media features. CSS rules inside the query will be applied only if the query is true.

@media [media types] and [media features] {
  /* media-specific rules */
}

CSS Media Queries

They can also be specified for a linked stylesheet:

<link rel="stylesheet" media="<media types>
   and <media features>" href="alternative.css" />

Print Styles

All modern browsers support the "print" media type for specifying print styles.

@media print {
  body {
    background: white;
  }
  #header, #footer {
    display: none;
  }
  .section {
    page-break-inside: avoid;
    page-break-after: always;
  }
}

Resolution Queries

Modern mobile browsers support media queries which depend on the device-width and/or orientation.

Targeting iPads:

@media only screen
  and (min-device-width : 768px)
  and (max-device-width : 1024px) {
    img {
      width: 100%;
    }
}

Resolution Queries

A more general approach is just to query on min-width and max-width, which are calculated based on window size, not device size.

@media screen and (max-width: 640px) {
  #sidebar {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 979px) {
  #sidebar {
    width: 200px;
  }
}

Pixel Density Queries

The experimental device-pixel-ratio feature can be used to detect pixel density:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
        #logo {
            background-image:url(images/icon@2x.png);
        }
}

Testing Resolution Targeting

Instead of testing on the actual devices or resizing the browser, you can use these tools:

Let's Develop It!

Media Queries Exercise

Download the workshop files if you haven't already. Open up Exercise 1 (Media Queries).

Resize webpage for smaller screens

Hide the sidebar Remove padding on the body Images should not exceed the width of the screen Navigation items should be on their own line (not floating) The header should be fixed so that it stays at the top when scrolling.

Bonus: Make Print Styles

Hide the header and navigation when printed. Make the sidebar display under the main content.

Media Query Resources

Cross-Browser CSS

Browser Compatibility

Older browsers do not know about newer CSS selectors/properties.

Use these sites to check compatibility:

CSS Fallbacks

When the CSS parser doesn't understand a property or value, it ignores it. For fallback, specify older syntaxes first.

CSS Fallbacks

RGBA & older browsers:

body {
  background:url(cyan_transparent_50.png);
  background:rgba(0,255,255,.5);
}

CSS Gradients & older browsers:

button.glossy {
   background: #ccc url(gloss.png) 50% 50% repeat-x;
   background: #ccc -webkit-gradient(linear, left top, left bottom,
         from(rgba(255,255,255, .4)), to(rgba(0,0,0, .1)));
}

Opacity & older browsers:

.transparent {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);    
  opacity: .5;          
}

Conditional CSS

In case you do need to specify CSS just for a particular browsers, there are a few ways.

In IE, you can use conditional comments to specify IE stylesheets:

Conditional CSS

<!--[if IE7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" /><![endif]-->

Or to conditionally add classes:

<!--[if IE7]> <html class="ie7"> <![endif]-->

Browser Bugs

Not all browsers render CSS the same, with the most number of issues in IE. The best defense is to be aware and to test.

Browser Testing

Since not all browsers work on all operating systems (IE on Mac), you may need help from these tools for cross-browser testing:

Modern.ie Microsoft's free access to testing tools
SauceLabs: Cloud-based automated and manual testing
BrowserStack: Lets you debug in virtual browsers.
BrowserShots: Takes screenshots of your sites in different browsers.
BrowserLing: Ditto.
MultipleIEs: Makes it possible to test in multiple IE versions on one computer.
IETester: Ditto.

Cross-browser CSS Resources

Good Defaults For Being Awesome

CSS Resets

CSS reset stylesheets are used to normalize the default CSS across browsers.

Reset.css removes every default style.

Normalize.css normalizes the default styles across browsers (and is the preferred approach).

CSS Grids

A grids system lets you layout pages according to fractions of a grid (usually 12, 16, or 24 columns).

Using YUI CSS Grids:

    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.5.1/build/cssgrids/grids-min.css">
    <div class="yui3-g">
        <div class="yui3-u-5-24">

        </div>
        <div class="yui3-u-19-24">

        </div>
   </div>

CSS Frameworks

Usually include a reset, a grids system, styles for typography and forms. Some include support for mobile/print.

With Bootstrap:

<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-md-4 col-xs-6">
    </div>
    <div class="col-md-8">
      <div class="alert">Hello!</div>
     </div>
  </div>  
</div>

Let's Develop It!

Bootstrap Exercise

In your exercises/bootstrap folder, open up index.html in the browser and in your text editor.

Use Bootstrap's grid classes to make a basic two column layout with the sidebar and the content areas.Hint: Use .container, .row, and .col-md-* classes.
Put the images with their headline & paragraphs into columns to make a 3-column layout.
Apply the class .img-responsive to the images to shrink them based on column width.

Popular Frameworks

CSS Performance

There are various ways that webpage performance can suffer because of CSS:

The CSS selectors are slow.
The CSS file itself is large.
The CSS loads lots of images.

Luckily, there are ways to avoid these issues...

Slow Selectors

Selector types, from fastest to slowest:

ID Rules (#header)
Class Rules (.avatar)
Tag Rules (img)
Universal Rules (*, [type="checkbox"])

CSS engines evaluate selectors from right to left.

/* CSS engine starts evaluating with h3 */
#footer h3 {}
/* CSS engine starts evaluating with a */
ul li a {}

You can read more on the Mozilla Developer Network or use a tool like CSSLint to warn you of inefficient selectors.

Some more resources for writing efficient CSS

Big Files

CSS compression tools reduce the size of CSS files by:

Stripping whitespace, comments, and unneeded semi-colons.
Shortening number and color values

For example, this:

.sidebar {  /* color it grey, no border */
    border-color: rgb(123, 123, 123);
    border-width: 0px;
}

becomes:

.sidebar{border-color:#7b7b7b;border-width:0}

Some CSS Compression Tools:

Lots of Images: Spriting

When a pages uses many img tags or background-url properties, it slows down load time. For smaller images, CSS spriting can help.

Spriting uses one image file with an unlimited number of images in it. To load a certain image, you request a coordinate within the image file.

This is an example of CSS without sprites:

#nav li a.item1 {background-image:url('../img/image1.gif')}
#nav li a:hover.item1 {background-image:url('../img/image1_over.gif')}

This is an example of the same CSS using sprites:

#nav li a {background-image:url('../img/image_nav.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}

Resources on Sprites

Lots of Images: Data URIs

Instead of linking to an external image, data URIs allow you to embed the image directly into the document.

In CSS, it looks like this:

            	
li { 
  background: 
    url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
    no-repeat
    left center;
  padding: 5px 0 5px 25px;
}

Data URI Generators:

Lots of Images: Icon Fonts

An icon font is a font with icons instead of characters. You can make your own with icomoon or Font Custom or use the popular FontAwesome.

With an icon font, you include classes to add certain icons to your page.

Happy Birthday!

Productivity

CSS Pre-processors

A pre-processor lets you write in a special, more efficient language and then compiles into organized CSS.

Common features:

variables
nesting
mix-ins
inheritance
color functions
vendor prefixes

Most Common CSS Pre-Processors: Sass

Sass stands for "Syntactically Awesome Style Sheets." It runs on Ruby, so it's processed server-side.

				/*Variables*/				
@brand-color: #F05B62;
				
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    color: @brand-color;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Most Common CSS Pre-Processors: Less

Less is similar to Sass, but has slightly different syntax, and is processed using JavaScript (client-side).

								
@color-base: #2d5e8b;  
  
.class1 {  
    background-color: @color-base;  
}  
.class2 {  
    background-color: #fff;  
    color: @color-base;  
}  
.class3 {  
    border: 1px solid @color-base;  
}

Resources on CSS Pre-Processors

Sass
- Sass Basics
- Assembling Sass @Codeschool
Less
- Less.js
- Less CSS Beginner's Guide
Compare Less and Sass

CSS Build Tools

Many web developers use build tools to help them automate tasks.

CodeKit: a Mac app that can compile Less and Sass, will auto-refresh your browser on save, and has Bower built in, so you can install thousand of components (like Bootstrap, jQuery, or WordPress) with a single click!
GruntJS: A command-line JS tool for automating tasks like compiling CSS.

Upcoming Events

Denver Study Group: How to Build a Website - HTML & CSS for Beginners

Turing School of Software & Design

Wednesday, October 1, 2014 - 5:30 PM to 6:45 PM

BOULDER: CSS3 Properties & Selectors

Galvanize Boulder

October 9th 6pm - 8pm

BOULDER: Intro to Command Line

Galvanize Boulder

October 15th 6pm - 8pm

Advanced CSS Techniques ♥ Girl Develop It Boulder --

AdvancedCSS Techniques

meniltiac

AdvancedCSS Techniques

0 0 (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();