The W3C Process

1. Working Draft (WD)
2. Candidate Recommendation (CR)
3. Recommendation (REC)

Layout

Modules

• Basic User Interface Module Level 3 (CSS3 UI)
• Flexible Box Layout Module Level 1
• Multi-column Layout Module

box-sizing

box-sizing

box-sizing: content-box | border-box | inherit;
                                

Both elements have the same width (300px)

Reset the box sizing

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
                    

resize

resize

resize: none|both|horizontal|vertical|inherit;
                            

In the cosmos, there is no refuge from change

In the flex layout model, the children of a flex container:

• Can be laid out in any direction
• Can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.
• Both horizontal and vertical alignment of the children can be easily manipulated.
• Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

The axis

• main axis: The main axis of a flex container is the primary axis along which flex items are laid out. It extends in the main dimension.
• main-start: The flex items are placed within the container starting on the main-start side and going toward the main-end side.
• main size: A flex item’s width or height, whichever is in the main dimension, is the item’s main size.
• cross axis: The axis perpendicular to the main axis is called the cross axis. It extends in the cross dimension.
• cross-start: Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.
• cross size: The width or height of a flex item, whichever is in the cross dimension, is the item’s cross size.

 Resources

• A guide to flexbox
• The ultimate flexbox cheatSheet
• Generador flexbox
• Flexplorer

Multi-column Layout

.three-col {
    column-count: 3;
    column-gap: 20px;
    column-rule-color: #ccc;
    column-rule-style:solid;
    column-rule-width: 1px;
}
               

Multi-column Layout

Graphics

Modules

• Image Values and Replaced Content Module Level 3
• Filter Effects Module Level 1
• Compositing and Blending Level 1

Image Values and Replaced Content Module

Level 3

gradients

gradients

<gradient> = [ 
<linear-gradient> | <radial-gradient> | 
<repeating-linear-gradient> | <repeating-radial-gradient> ]
                  

background: linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
                   

Radial gradient

background: radial-gradient(ellipse at center,  #ff99cd 0%,#ef017c 100%);
                   

Vendor prefixes

background: #444;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,transparent), color-stop(50%,#444), color-stop(100%,transparent));
background: -webkit-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
background: -moz-linear-gradient(left, transparent 0%, #444 50%, #transparent 100%);
background: -ms-linear-gradient(left, transparent 0%,#444 50%,#transparent 100%);
background: -o-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
background: linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
                   

Object-fit

Object-fit

The ‘object-fit’ property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

object-fit: fill | contain | cover | none | scale-down
            

object-position

object-position: 50% 50%;
            

Filter Effects Module

Level 1

filter

filter

filter: efect();
                           

Efects:

blur | grayscale | drop-shadow | sepia | brightness | contrast | hue-rotate | invert | saturate | opacity 
                           

Compositing and Blending

Level 1

Blending

Blending is the aspect of compositing that calculates the mixing of colors where the source element and backdrop overlap.

Mix-blend-mode

The blend mode defines the formula that must be used to mix the colors with the backdrop.

<blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge |color-burn | hard-light | soft-light | difference | exclusion | hue | 
saturation | color | luminosity
                

Background-blend-mode

Defines the blending mode of each background layer.

<blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge |color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
                

Must be applied in the same order as background-image. The first element in the list will apply to the layer that is on top. If a property doesn’t have enough comma-separated values to match the number of layers, the UA must calculate its used value by repeating the list of values until there are enough.

div { 
    width: 200px;
    height: 200px;
    background-size: 200px 200px;
    background-repeat:no-repeat;
    background-image: linear-gradient(to right, #000000 0%,#ffffff 100%), url('arale.png');
    background-blend-mode: difference, normal;
}
                    

Shapes

Motion

Modules

• Transforms Module Level 1
• Transitions Module Level 1
• Animations

transform

scale | rotate | skew | translate

transform: transform-function; /* can list multiple, space-separated */
                    

div {
    -webkit-transform: value;
    -moz-transform:    value;
    -ms-transform:     value;
    -o-transform:      value;
    transform:         value;
}
                

transform: scale

transform: scale(2,3);
                    

transform: rotate

transform: rotate(45deg);
                    

transform: skew

transform: skew(45deg);
                    

transform: translate

tranform: translate(x,y);
                    

transform: translate(100px,40px;)
                    

transition

.foo {
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

div {
    transition: background 0.2s ease,padding 0.8s linear;
}

transition-property

The ‘transition-property’ property specifies the name of the CSS property to which the transition is applied.

div {
    transition: background 0.2s ease,padding 0.8s linear;
}

transition-property:background,padding;    

transition-duration

Defines the length of time that a transition takes.

div {
    transition: background 0.2s ease,padding 0.8s linear;
}
                    

transition-duration: .2s;
                    

transition-timing-function

Describes how the intermediate values used during a transition will be calculated. It allows for a transition to change speed over its duration. These effects are commonly called easing functions.

div {
    transition: background 0.2s ease,padding 0.8s linear;
}

                    

transition-timing-function:ease,linear;
                    

transition-timing-function

• linear
• ease-in
• ease-out
• ease-in-out
• step-start
• step-end
• cubic-bezier

transition-delay

Defines when the transition will start.

div {
    transition: background 0.2s ease 5s,padding 0.8s linear;
}
                    

transition-delay:5s, 0 ;
                    

transition: background 2s ease-out;
            

transition: border .5s ease-out;
                    

Animation

This CSS module describes a way for authors to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behavior.

@keyframes resize {
  0% {
    padding: 0;
  }
  50% {
    padding: 0 20px;
    background-color:rgba(255,0,0,0.2);
  }
  100% {
    padding: 0 100px;
    background-color:rgba(255,0,0,0.9);
  }
}

#box {
  animation-name: resize;
  animation-duration: 1s;
  animation-iteration-count: 4;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

Timing functions for keyframes

‘animation-name’ 

‘animation-duration’ 

‘animation-timing-function’ 

‘animation-iteration-count’ 

‘animation-direction’ 

‘animation-play-state’ 

‘animation-delay’ 

‘animation-fill-mode’ 

‘animation’ Shorthand 

• http://jsfiddle.net/simurai/CGmCe/
• http://beta.theexpressiveweb.com/#!/css3-animations
• https://developer.mozilla.org/en-US/demos/detail/the-planetarium/launch
• http://codepen.io/juliangarnier/pen/idhuG
• http://mrdoob.github.io/three.js/examples/css3...
• http://lab.tylergaw.com/themanfromhollywood/
• http://cssdeck.com/labs/google-doodle-in-css-follow-up
• http://www.clicktorelease.com/code/css3dclouds/

Media Queries

Modules

• @media
• Responsive Web Design

@media

media queries

@media screen and (min-width:600px){ 
    body{background: pink;
}
                            

media features

• width
• height
• device-width
• device-height
• orientation (landscape, portrait)
• aspect-ratio
• device-aspect-ratio
• color
• color-index
• monochrome
• resolution
• scan
• grid

How to use

Call from <head>

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' /> 

Inside the CSS file

@media screen {
      body {width: 75%; }
}
@media print {
      body {width: 100%; }
} 

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
    background: #ccc;
} 

content is king 

The content must be accessible from any device

Our options

• Do nothing (the device zooms)
  
• Native App
• Double version
• Responsive web design
• Webapp

It depends on the project

Some advantages of RWD

• Reduced development costs 
• Reduced maintenance
• Unique URL
• Does not require licenses or bureaucracies

The information architecture is very important

We have to prioritize content to discriminate the secondary

Mobile First

Progresive enhacement vs. Graceful degradation

RWD is not only mq

• Layout
  
• Media queries
  
• Multimedia
  
• Contenido
  

Layout

Relative units

• em
• %
• vw vh

target/content=result

1em = 16px

http://pxtoem.com/

Patterns

http://bradfrostweb.com/blog/web/responsive-nav-patterns/

http://bradfrost.github.io/this-is-responsive/patterns.html

Frameworks

• Foundation 5
• Bootstrap

Multimedia

We have to adapt media elements

and not only to change the width. XD

.img{
    max-width: 100%;
}
                    

<picture> & srcset attribute

Picture

<picture>
    <source srcset="med.jpg 1x, med-hd.jpg 2x" media="(min-width: 40em)" /> 
    <source srcset="sm.jpg 1x, sm-hd.jpg 2x" /> 
    <img src="fallback.jpg" alt="" />
</picture>
                   

srcset

<h1><img alt="The Breakfast Combo"
    src="banner.jpeg"
    srcset="banner-HD.jpeg 2x, banner-phone.jpeg 320w, banner-phone-HD.jpeg 320w 2x">
</h1>
                            

Server side

• Adaptive Images [go]
• Image Resizer [go]

Don´t use .png for icons

http://icomoon.io/

Video

.video {
    max-width: 100%;
    height: auto;
}
                   

Media solution

<video controls> 
    <source src="parrots-small.mp4" type="video/mp4" media="all and (max-width:480px)"> 
    <source src="parrots-small.webm" type="video/webm" media="all and (max-width:480px)"> 
    <source src="parrots.mp4" type="video/mp4"> 
    <source src="parrots.webm" type="video/webm"> 
</video>
                    

iframe from youtube

<iframe>

embedresponsively.com/

<style>
.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    height: auto;
}
.embed-container iframe, .embed-container object, .embed-container embed{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
}
</style>
<div class='embed-container'><iframe src='http:http://www.youtube.com/embed/vqSo-iZ5D8E' frameborder='0' allowfullscreen></iframe></div>
                    

What's new

Support

Progresive enhancement & graceful degradation

1.Follow the standards

2.Use CSSLint

3. Reset, don´t forget it.

4. Can I use?

5.Trust the cascade

   
.foo{
    background-color: #ccc; /* old browsers */
    background-color: rgba(0,0,0,0.2); /* supported browsers */
}
                        

6. The vendor prefixes are dead but still we have to use them

background: $color2; /* Old browsers */ 
background: -moz-linear-gradient(left, $color1 0%, $color2 75%, $color3 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right top, color-stop(0%,$color1), color-stop(75%,$color2), color-stop(100%,$color3)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(left, $color1 0%,$color2 75%,$color3 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(left, $color1 0%,$color2 75%,$color3 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(left, $color1 0%,$color2 75%,$color3 100%); /* IE10+ */ 
background: linear-gradient(to right, $color1 0%,$color2 75%,$color3 100%); /* W3C */
             

Modernizr

[info]

Polyfills

[info]

CSS processors

• Preprocessors
• Postprocessors
• Gulp

sass-lang.com/

What is Sass?

It's a tool to improve the CSS workflow

What for?

It allows to use variables, functions, operations... in the CSS

Its like adding steroids

Advantages

Work faster

Create reusable code

Create maintainable code

Arquitecture for a Sass project

 
|– base/ 
|   |– _reset.scss       # Reset/normalize 
|   |– _typography.scss  # Typography rules 
|   ...                  # Etc… 
| 
|– components/ 
|   |– _buttons.scss     # Buttons 
|   |– _carousel.scss    # Carousel 
|   |– _cover.scss       # Cover 
|   |– _dropdown.scss    # Dropdown 
|   |– _navigation.scss  # Navigation 
|   ...                  # Etc… 
| 
|– helpers/ 
|   |– _variables.scss   # Sass Variables 
|   |– _functions.scss   # Sass Functions 
|   |– _mixins.scss      # Sass Mixins 
|   |– _helpers.scss     # Class & placeholders helpers 
|   ...                  # Etc… 
| 
|– layout/ 
|   |– _grid.scss        # Grid system 
|   |– _header.scss      # Header 
|   |– _footer.scss      # Footer 
|   |– _sidebar.scss     # Sidebar 
|   |– _forms.scss       # Forms 
|   ...                  # Etc… 
| 
|– pages/ 
|   |– _home.scss        # Home specific styles 
|   |– _contact.scss     # Contact specific styles 
|   ...                  # Etc… 
| 
|– themes/ 
|   |– _theme.scss       # Default theme 
|   |– _admin.scss       # Admin theme 
|   ...                  # Etc… 
| 
|– vendors/ 
|   |– _bootstrap.scss   # Bootstrap 
|   |– _jquery-ui.scss   # jQuery UI 
|   ...                  # Etc… 
| 
| 
`– main.scss             # primary Sass file 
                   

The base

Variables

Mixins

Nesting

Inheritance

Imports

Color functions

Operations

Functions

Color  functions

lighten ( @color , 10%); /*10% lighter than @color */

darken ( @color , 10%); /*10% darker than @color */

saturate ( @color , 10%); /*10% more saturated than @color */

desaturate ( @color , 10%); /*10% less saturated than @color */

---

$color : #0982C1;

h1 {

background: $color ;

border: 3px solid darken( $color , 50%) ;

}

Operations

$width :960px;

$items :6;

body {

margin: (14px / 2);

top: 50px + 100px;

right: 100px - 50px;

left: 10 * 10;

}

p {width: $width / 2;}

li {
   float: left;
   width: $width / $items - 10px;

   padding:0 5px;

}

Best practices

Sass is only a tool, if your code is bad, the output will be even worse.

Dry

• Don´t Repeat Yourself
• Clean code
• Maintainable
• Reusable

Traps

• The mixin, duplicates code. It´s easy to get a very bloated code if we don´t pay attention on it.
• Many levels of nesting causes a very dependent and inflexible code. Avoid deep nesting.

Gulp

Gulp

Automate and enhance your workflow

Best practices

DRY (Don´t Repeat Yourself)

Avoid extra selectors

body #container .someclass ul li {....} Wrong
                    

.someclass li {...}Correct
                    

Beware of

specificity

The

name

matters

• BEM
• Atomic design

smacss

smacss.com/