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 Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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 &amp; 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 &amp; 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
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console