Responsive Workflows

with Ray Villalobos

http://iviewsource.com/presentations/responsiveworkflows | Download this
@planetofthewebView Sourcehttp://lynda.planetoftheweb.com

  • Got the memo on installation?
  • Check on Terminal/GitBash
    
    > grunt --version
    > compass --version
                    
  • Error? What's a GitBash? Watch videos (Mac), (PC)

What we’re going to learn

  • Git(<--bad pun) your feet wet
  • Node.js & the package.json file
  • Principles of Sass/Compass
  • Creating a grunt.js workflow
  • Responsive Grids with Susy(<--I'm not Susy)
Git

  • 21st Century Version Control
  • Time Machine/Multiverse
  • Create Breakpoints/Branches
Git
  • Git like a boss: command line
  • Init, add/commit, status, branch, checkout, diff, merge, rm
  • Easier than CSS selectors

Exactly like Star Trek

Git Breakpoints and Branches

Read this | Ain't nobody got time for that

Between Commits

Let's do this

  • Create a folder
  • Open the terminal
  • Go to the folder's location in the terminal
  • Initialize Git
    
    > git init
                
  • Look at the contents
    
    > ls -la
                    

Add an HTML Document

  • 
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>ListApp</title>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <meta name="apple-mobile-web-app-status-bar-style" content="black" />
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    </head>
    <body>
    <p>The quick brown fox jumps over the lazy dog</p>
    
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    </body>
    </html>
                    
  • Save it as index.html

First Add

  • Back to the terminal
  • Check status
    
    > git status
                	
  • Add the file to staging
    
    > git add .
                	
  • the dot moves all current files
  • Check status
    
    > git status
                	

First Commit

  • Commit with a message
    
    > git commit -m "First Commit"
                	
  • Moved to local repo

You just did this

Let's do a branch

  • Check branches
    
    > git branch
                	
  • Create new timeline
    
    > git branch alternate
                	
  • Check your branch
    
    > git branch
                	
  • Way to go Doc. Brown

Let's change timelines

  • You're still in the main timeline
    
    > git branch
                	

Let's change timelines

  • Let's checkout the new one
    
    > git checkout alternate
                	
  • Are we there yet?
    
    > git branch
                	
  • 1.21 gigawatts

Let's change something

  • Let's add some content
    
    <div data-role="page" id="photos">
      <header data-role="header">
        <h1>My Photos</h1>
      </header>
      <article data-role="content">
        <ul data-role="listview"  data-filter="true">
          <li>
            <a href="#dog">
            <h1>Chihuahua</h1>
            <img src="http://iviewsource.com/i/doggie_tn.jpg" alt="Min Pin" />
            <p>This is what happens when a
            friend brings a dog to the studio.</p>
            </a>
          </li>
    
          <li>
            <a href="#halloween">
              <h1>Halloween Winner</h1>
              <img src="http://iviewsource.com/i/halloween_tn.jpg" alt="Photo of halloween" />
              <p>One of the winners of our Halloween contest. A variety of listeners came dressed up for the occasion</p>
            </a>
          </li>
    
          <li>
            <a href="#enrique">
              <h1>Enrique Iglesias</h1>
              <img src="http://iviewsource.com/i/enrique_tn.jpg" alt="Photo of enrique" />
              <p>Spanish pop artist Enrique Iglesias taken at Pepsi Música Superbowl event in 2008</p>
            </a>
          </li>
        </ul>
      </article>
      <footer data-role="footer" data-position="fixed">
        <nav data-role="navbar">
          <ul>
            <li><a href="#home" data-icon="home">Home</a></li>
            <li><a href="#Photos" data-icon="grid">Photos</a></li>
          </ul>
        </nav>
      </footer>
    </div><!-- Page Photos -->
    				                
  • Hi Mr. Calvin Klein

Add and commit

  • add it!
    
    > git add .
                	
  • Commit with a message
    
    > git commit -m "jQuery Mobile List"
                	
  • check status
    
    > git status
                	
  • 1.21 gigawatts

What's the difference

  • Git diff compares timelines
    
    > git diff master index.html
                	
  • Break out: ctrl-z (mac), ctrl-c(pc)
  • check status
    
    > git status
                	
  • 1.21 gigawatts

Fire up the DeLorean

  • Checkout original branch
    
    > git checkout master
                	
  • check status
    
    > git status
                	
  • Open your index.html file

Merging changes

  • Make sure you're in the master branch
    
    > git branch
                	
  • do it!!!
    
    > git merge alternate
                	
  • Open your index.html file
  • Congratulations grasshopper

Where are we?

Danger Will Robinson

  • Do not move files to trash/recycle
  • Use git rm instead

Pre-processors & Workflow

What’s a Preprocessor?

  • Language compiling into CSS/JavaScript
  • Sass:
    • Variables
    • nesting
    • Mixins/Functions
  • No prefixes
  • Frameworks: Compass, Bourbon, Susy
  • Makes writing CSS fun again

What is Sass?

logo
  • Syntactically awesome style sheets
  • Functionality not available in CSS
  • CSS-like syntax
  • Compiles to CSS

Variables

.navbar {
  background: #BADA55;
}

h1,h2,h3 {
  background: #BADA55;
}

Variables

$main_color : #BADA55;

.navbar {
  background: $main_color;
}

h1,h2,h3 {
  background:  $main_color;
}

OMG I Want it!!!

Nesting

.pixgrid ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.pixgrid ul li {
	float: left;
	width: 96px;
	height: 96px;
	padding: 0 5px 5px 0;
}
.pixgrid ul img {
	max-width: 96px;
	cursor: pointer;
}

Nesting


.pixgrid  {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      float: left;
      width: 96px;
      height: 96px;
      padding: 0 5px 5px 0;
    }
    img {
      max-width: 96px;
      cursor: pointer;
    } //img
  }
}

Operators


$border_thickness : 1px;
$thicker : $border_thickness*5;

.sidebar {
  border: $thicker solid black;
}
.sidebar {
  border: 5px solid black; }

Controls

$border_thickness : 1px;
$thicker : $border_thickness*5;

.sidebar {
  @if ($border_thickness<=1) {
    background-color: red;
  } @else {
    background-color: yellow;
  }
}
.sidebar {
  background-color: red; }

Mixins

@mixin rounded( $radius: 10px) {
  -webkit-border-radius: $radius;
  border-radius: $radius;
  background-clip: padding-box;
}

ul {
  padding: 0;
  margin: 0;
  list-style:none;

    li img {
    display: block;
    @include rounded(20px);
  }
}

Mixins

ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

ul li img {
  display: block;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  background-clip: padding-box;
}

Fun Color Facts

  • <body bgcolor="chucknorris"></body> renders as a color. Check it
  • Originally, it wasn't going to be part of HTML 1.1, but it inserted itself into the specifications after the first time Chuck Norris used a browser.
  • The color is said to be modeled after the color of his beard.
  • Fact: setting your background color to chucknorris will crash IE6, IE7, IE8, IE9, and versions of IE yet to be invented. It will also crash your computer and roundhouse kick you in the face.
  • Why?

Compass logo

What is compass?

Compass logo

  • Pre-built mixins
  • Solve common problems
  • A framework
body {
 @include background(linear-gradient(to bottom, red, blue));
}

Who’s trying Preprocessors

  • 46% never tried
  • 54% tried
  • 83% like it
  • 4% didn’t like it
  • 13% meh!

sample size: 13,712. CSS-Tricks

Addiction rates

Preprocessors vs other hard to kick habits

Other Barbituants

Why isn’t everyone using Preprocessors?

Why hadn’t I tried it?

Loss Aversion

People’s tendency to strongly prefer avoiding losses to acquiring gains.
  • Max Bazerman--Harvard Business School
  • Auctions $20
  • Bids in $1 increments
  • Runner-up has to honor bid

$20 Bid Results

Loss Aversion

  • Most students drop out at $16
  • Top-two bidders stick it out
  • After $20 students continue bidding
  • Commitment to a
    chosen path drives bidding
  • $204 record

Current Preprocessor Workflow

Command line

  • Has to be set up everytime
  • Not easily shareable
  • Lose setting between projects
  • Only minifies one workflow

Problems with Workflow

Apps

  • Use preprocessor software Codekit, Prepros
  • GUI that’s easy
  • Limited workflows
  • Tough to share/expand

Working with Grunt.js

Grunt
  • Workflow macros
  • Sass, Less, CoffeeScript
  • Lint, Unit Test, Minify...whatever
  • Prefs stay with project
  • Single terminal command
  • Uses node.js

Setting up Node.js

  • Creating package.json
  • 
    	{
    	  "name": "rouxmeetups",
    	  "version": "0.1.0",
    	  "description": "The official website for Roux Academy Meetups",
    	  "main": "gruntfile.js",
    	  "author": "Ray Villalobos",
    	  "devDependencies": {
    	    "grunt": "~0.4.1",
    	    "grunt-contrib-watch": "~0.5.3",
    	    "grunt-contrib-compass": "~0.5.0",
    	    "grunt-contrib-uglify": "~0.2.2"
    	  }
    	}
    					
  • Load libraries
    
    > npm install
                	
node_modules

Creating a Config.rb

  • Sets up Sass Defaults
  • 
    		require 'susy'
    		preferred_syntax = :sass
    		http_path = '/'
    		css_dir = '_/css'
    		sass_dir = '_/components/sass'
    		images_dir = 'images'
    		javascripts_dir = '_/js'
    		relative_assets = true
    		output_style = :expanded
    						
  • Lots of options

Start your gruntfile.js

  • Set up module.exports
    
    module.exports = function(grunt) {
    } //exports
    							
  • Inside, Load plug-ins
    
    //Load grunt plugins
    grunt.loadNpmTasks('grunt-contrib-uglify');
    								
  • Next, set init.config
    
    grunt.initConfig({
    }) // InitConfig
    								

Minifying JavaScript

  • Uglify.js with a plugin for grunt.js
  • 
    uglify: {
      my_target: {  
        files: {
          '_/js/script.js': ['_/components/js/*.js']
        } //files
      } //my_target
    } //my_target
    								

All together

  • 
      module.exports = function(grunt) {
    
      //Load grunt plugins
      grunt.loadNpmTasks('grunt-contrib-uglify');
    
      //Initialize tasks
      grunt.initConfig({
        uglify: {
          my_target: {  
            files: {
              '_/js/script.js': ['_/components/js/*.js']
            } //files
          } //my_target
        } //my_target
      }) // InitConfig
    } //exports								

Automation Baby

  • Add the grunt-contrib-watch plugin
    
    grunt.loadNpmTasks('grunt-contrib-watch');
    								
  • After uglify, add comma, then watch task
    
    , //uglify
        watch: {
          js: {
            files: ['_/components/js/*.js'],
            tasks: ['uglify']
          } //js
        } //watch
                    
  • After InitConfig, register the task
    
    grunt.registerTask('default', 'watch');
    								

Add automation

  • Grunt can watch your folder
  • 
      module.exports = function(grunt) {
    
      //Load grunt plugins
      grunt.loadNpmTasks('grunt-contrib-uglify');
      grunt.loadNpmTasks('grunt-contrib-watch');
    
      //Initialize tasks
      grunt.initConfig({
        uglify: {
          my_target: {  
            files: {
              '_/js/script.js': ['_/components/js/*.js']
            } //files
          } //my_target
        }, //uglify
        watch: {
          js: {
            files: ['_/components/js/*.js'],
            tasks: ['uglify']
          } //js
        } //watch
      }) // InitConfig
    
        grunt.registerTask('default', 'watch');
    } //exports
    							
  • Recompiles, reloads browser

Really? What about HTML?

  • Add this at the bottom of your HTML
    
    <script src="http://localhost:35729/livereload.js"></script>
    							
  • 
    module.exports = function(grunt) {
    
      //Load grunt plugins
      grunt.loadNpmTasks('grunt-contrib-uglify');
      grunt.loadNpmTasks('grunt-contrib-watch');
    
      //Initialize tasks
      grunt.initConfig({
        uglify: {
          my_target: {  
            files: {
              '_/js/script.js': ['_/components/js/*.js']
            } //files
          } //my_target
        }, //uglify
        watch: {
          options: { livereload: true },
          js: {
            files: ['_/components/js/*.js'],
            tasks: ['uglify']
          }, //js
    
          html: {
            files: ['*.html']
          } //html
          
        } //watch
      }) // InitConfig
    
        grunt.registerTask('default', 'watch');
    } //exports
    							
  • Make sure LiveReload is not already running

What about that Sass?

  • Set up plugin, task, watch
    
      module.exports = function(grunt) {
    
      //Load grunt plugins
      grunt.loadNpmTasks('grunt-contrib-uglify');
      grunt.loadNpmTasks('grunt-contrib-watch');
      grunt.loadNpmTasks('grunt-contrib-compass');
    
      //Initialize tasks
      grunt.initConfig({
        compass: {
          dev: {
            options: {
              config: 'config.rb'
            } //options
          } //dev
        }, //compass
        uglify: {
          my_target: {  
            files: {
              '_/js/script.js': ['_/components/js/*.js']
            } //files
          } //my_target
        }, //uglify
        watch: {
          options: { livereload: true },
          sass: {
            files: ['_/components/sass/*.scss'],
            tasks: ['compass:dev']
          }, //sass
          js: {
            files: ['_/components/js/*.js'],
            tasks: ['uglify']
          }, //js
    
          html: {
            files: ['*.html']
          } //html
          
        } //watch
      }) // InitConfig
    
        grunt.registerTask('default', 'watch');
    } //exports                
  • Whoah Nelly!

Compass & Susy

Susy
  • Set up a Responsive Grid
  • Use breakpoints
  • Ultra clean markup
  • Shockingly simple
lynda logo

The End

@planetofthewebView Sourcehttp://lynda.planetoftheweb.com