cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              h3.title 
  | Package Managers & Task Runners 
  small For Front-End Development

table.tbl
  thead
    tr
      th Name
      th Pluses
      th Minuses
      th Components
      th Samples
      
  tbody.table-hover
  
    tr.npm
      td 
        | Node NPM 
        a.link(href="https://docs.npmjs.com/cli/run-script") docs.npmjs.com/cli/run-script
      td 
        ul
          li Use NPM scripts object inside package.json
          li 1 extra dependency & 1 line of code per tool you wish to use
          li pre- and post- hooks
      td 
        ul
          li package.json file can become unweildy
          li Requires greater knowledge of NPM directives
          li Not Windows friendly: Windows uses % for variable substitution, while bash uses $
      td Lots. See <a href="https://docs.npmjs.com/">documentation</a> for more info on CLI Commands.
      td.sample
        pre
         code
           | "devDependencies": {
           |  "stylus": "latest",
           |  "jade": "latest",
           |  "browserify": "latest",
           |  "watch": "latest",
           |},
           |"scripts": {
           |  "build:js": "browserify assets/scripts/main.js > dist/main.js",
           |  "build:css": "stylus assets/styles/main.styl > dist/main.css",
           |  "build:html": "jade assets/html/index.jade > dist/index.html",
           |  "build": "npm run build:js && npm run build:css && npm run build:html",
           |  "build:watch": "watch 'npm run build' .",
           |}
      
    tr.grunt
      td 
        | Grunt 
        a.link(href="http://gruntjs.com/") gruntjs.com
      td 
        ul
          li Configuration over code
          li Easy configuration
          li Lots of plugins
          li More "all-encompassing"
          li Installed via NPM
      td 
        ul
          li Designed for smaller apps
          li Heavy plugin reliance
          li Over-configuration of simple tasks
      td
        ul
          li grunt-init
          li concat
          li lint
          li min
          li qunit
          li server
          li test
          li watch
      td.sample
        pre
          code
            | grunt.initConfig({
            |   sass: {
            |     dist: {
            |       files: [{
            |         cwd: 'app/styles',
            |         src: '**/*.scss',
            |         dest: '../.tmp/styles',
            |         expand: true,
            |         ext: '.css'
            |       }]
            |     }
            |   },
            |   autoprefixer: {
            |     options: ['last 1 version'],
            |     dist: {
            |       files: [{
            |         expand: true,
            |         cwd: '.tmp/styles',
            |         src: '{,*/}*.css',
            |         dest: 'dist/styles'
            |       }]
            |     }
            |   },
            |   watch: {
            |     styles: {
            |       files: ['app/styles/{,*/}*.scss'],
            |       tasks: ['sass:dist', 'autoprefixer:dist']
            |     }
            |   }
            | });
            | grunt.registerTask('default', ['styles', 'watch']);
    tr.gulp
      td 
        | Gulp 
        a.link(href="http://gulpjs.com/") gulpjs.com
      td 
        ul
          li Code over configuration
          li Node streaming modules
          li Easy API
          li Faster than Grunt
          li Installed via NPM
      td 
        ul
          li Bleeding edge
          li Heavy plugin reliance
          li Lots of dependencies
          li Issues with errors in CI environments
      td
        ul
          li task
          li watch
          li src
          li dest
      td.sample
        pre
          code
            | gulp.task('sass', function () {
            |   gulp.src('app/styles/**/*.scss')
            |     .pipe(sass())
            |     .pipe(autoprefixer('last 1 version'))
            |     .pipe(gulp.dest('dist/styles'));
            | });
            | gulp.task('default', function() {
            |   gulp.run('sass');
            |   gulp.watch('app/styles/**/*.scss', function() {
            |     gulp.run('sass');
            |   });
            | });
        

    
      
p.footer.
  Updated January 21, 2015, by <a href='mailto:jstam@jstam.com'>John Stammerman</a>. Based on <a href="https://blog.keithcirkel.co.uk/why-we-should-stop-using-grunt/">lots</a> <a href="https://markdalgleish.github.io/presentation-build-wars-gulp-vs-grunt/">of</a> <a href="http://www.100percentjs.com/just-like-grunt-gulp-browserify-now/">good</a> <a href="http://jaysoo.ca/2014/01/27/gruntjs-vs-gulpjs/">reasearch</a> <a href="http://ponyfoo.com/articles/gulp-grunt-whatever">by</a> <a href="https://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/">other</a> <a href="http://tech.pro/tutorial/1190/package-managers-an-introductory-guide-for-the-uninitiated-front-end-developer">people</a>.
            
          
!
            
              @import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);

$clr1: #006D9E;
$clr2: #F48132;
$clr-light: #EEE;
$clr-dark: #404040;


@mixin row-color($name, $clr) {
  
  &.#{$name} {
    
    td {
      
      background: lighten($clr, 55);
      border-right: 1px solid lighten($clr, 40);
      border-top: 1px solid lighten($clr, 40);
      color: $clr;
      transition: all 300ms ease-out;
      
      pre {
        
        background: lighten($clr, 60);
        border-radius: 8px;
        color: darken($clr, 5);
        font-size: 0.8em;
        line-height: 1.1em;
        margin: 0;
        padding: 0;
        position: relative;
        transition: all 300ms ease-out;
        
        code {
          display: block;
          padding: 0.6em;
          overflow: auto;
        }
        
      }
      
    }
    
    &:hover td {

      background: lighten($clr, 45);
      border-right: 1px solid lighten($clr, 30);
      border-top: 1px solid lighten($clr, 30);
      color: darken($clr, 10);
      
      pre {
        
        background: lighten($clr, 50);
        color: darken($clr, 15);
        
      }

    }
    
  }
  
}



body {
  
  background-color: $clr1;
  background: linear-gradient(to top, darken($clr1, 13), $clr1);
  color: $clr-dark;
  font: 400 16px/26px 'Open Sans', helvetica, arial, sans-serif;
  text-rendering: optimizeLegibility;
  
}

a {
  
  color: darken($clr2, 13);
  
  &:hover {
    
    color: darken($clr2, 21);
    
  }
  
  &.link {
    
    font-size: 11px;
    font-weight: normal;
    
  }
  
}

.svg { 
  
  //border: solid 1px #000;
  display: none;
  
}

.title {
  
  color: $clr-light;
  font-size: 30px;
  font-weight: 400;
  margin: auto;
  padding: 20px;
  text-shadow: 1px 1px 2px darken($clr1, 21);
  text-transform: uppercase;
  width: 86%;
  
}

.footer {
  
  color: $clr-light;
  margin: auto;
  padding: 0 0 40px 0;
  width: 86%;
  
}


/*** Table Styles **/

.tbl {
  
  background: $clr-light;
  border-collapse: collapse;
  box-shadow: 0 5px 15px darken($clr1, 13);
  margin: auto auto 40px auto;
  padding: 5px;
  width: 86%;
  animation: float 5s infinite;
  
}

th {
  
  color: $clr2;
  background: $clr-dark;
  border-bottom: 4px solid lighten($clr-dark, 13);
  border-right: 1px solid darken($clr-dark, 5);
  font-size: 90%;
  font-weight: 700; 
  padding: 12px 24px;
  text-align: left;
  text-shadow: 0 1px 1px darken($clr-dark, 13);
  vertical-align: middle;
  
}


tr {
  
  td {
    
    border-right: 1px solid darken($clr-light, 8);
    border-top: 1px solid darken($clr-light, 8);
    color: $clr-dark;
    font-size: 100%;
    font-weight: 400;
    padding: 6px 12px;
    
    &:first-child {
      
      font-size: 130%;
      font-weight: 700;
      
    }
    
    &:last-child {
      border-right: 0px;
    }
    
    &.sample {
      
      padding: 8px;
      
    }
    
  }
  
  @include row-color('npm', $clr1);
  @include row-color('grunt', adjust-hue($clr1, 95));
  @include row-color('gulp', adjust-hue($clr1, 185));
  /*
  @include row-color('structure', adjust-hue($clr1, 140));
  @include row-color('content', adjust-hue($clr1, 185));
  @include row-color('scope', adjust-hue($clr1, 230));
  @include row-color('analyze', adjust-hue($clr1, 275));
  @include row-color('strategy', adjust-hue($clr1, 320));
  */
  
  td.loop, td.scale {
      
    background: $clr-light;
    border-right: 1px solid darken($clr-light, 8);
    border-top: 1px solid darken($clr-light, 8);

  }
  
  &:first-child td {
    border-top: none;
  }
  
  &:last-child td {
    border-bottom: none;
  }

}

ul {
  
  margin: 12px 24px;
  padding: 0;
  
  li {
    
    font-size: 90%;
    margin: 0;
    padding: 0;
    
  }
  
}


            
          
!
999px
Loading ..................

Console