LESS for CSS

Gruntfile.js

@@ -61,7 +61,7 @@ module.exports = function(grunt) {
       minified_api: ['test/minified-api.html']
     },
     watch: {
-      files: [ 'src/**/*.js', 'test/unit/*.js' ],
+      files: [ 'src/**/*', 'test/unit/*.js', 'Gruntfile.js' ],
       tasks: 'dev'
     },
     copy: {
@@ -111,6 +111,13 @@ module.exports = function(grunt) {
         dest: 'build/files/',
         ext: '.min.css'
       }
+    },
+    less: {
+      dev: {
+        files: {
+          'build/files/video-js.css': 'src/css/video-js.less'
+        }
+      }
     }
   });
 
@@ -120,14 +127,15 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-clean');
   grunt.loadNpmTasks('grunt-contrib-copy');
   grunt.loadNpmTasks('grunt-contrib-cssmin');
+  grunt.loadNpmTasks('grunt-contrib-less');
   grunt.loadNpmTasks('grunt-s3');
   grunt.loadNpmTasks('contribflow');
 
   // Default task.
-  grunt.registerTask('default', ['jshint', 'build', 'minify', 'dist']);
+  grunt.registerTask('default', ['jshint', 'less', 'build', 'minify', 'dist']);
   // Development watch task
-  grunt.registerTask('dev', ['jshint', 'build', 'qunit:source']);
-  grunt.registerTask('test', ['jshint', 'build', 'minify', 'qunit']);
+  grunt.registerTask('dev', ['jshint', 'less', 'build', 'qunit:source']);
+  grunt.registerTask('test', ['jshint', 'less', 'build', 'minify', 'qunit']);
 
   var fs = require('fs'),
       gzip = require('zlib').gzip;
@@ -157,8 +165,7 @@ module.exports = function(grunt) {
     grunt.file.write('build/files/combined.video.js', combined);
 
     // Copy over other files
-    grunt.file.copy('src/css/video-js.css', 'build/files/video-js.css');
-    grunt.file.copy('src/css/video-js.png', 'build/files/video-js.png');
+    // grunt.file.copy('src/css/video-js.png', 'build/files/video-js.png');
     grunt.file.copy('src/swf/video-js.swf', 'build/files/video-js.swf');
 
     // Inject version number into css file

docs/skins.md

@@ -1,21 +1,23 @@
 Skins
 =====
 
-The default Video.js skin is made using HTML and CSS, so there's no need to learn a complicated skinning language to update colors or even create an entirely new skin. New in version 3.0 is the use of a sprites image file (video-js.png). The image allows for a little bit more classy design, as well as compatibility with older versions of IE now that the HTML skin also shows when Flash is used for those browsers.
+The default Video.js skin is made using HTML and CSS, so there's no need to learn a complicated skinning language to update colors or even create an entirely new skin.
 
-You can view the uncompressed CSS for the default skin by downloading the latest version of Video.js or viewing [the source version](https://github.com/videojs/video.js/blob/master/src/css/video-js.css) on Github.
+New in version 4.0 is the use of font icons. All of the icons (play, pause, etc.) use the new custom font, which allows the icons to be scaled and colored just like any other text font.
 
-You can either override styles in the default skin:
+The easiest way to try this out is by using the [player skin designer](http://designer.videojs.com/).
+
+When you create a new skin, you can either override styles in the default skin:
 
 ```css
 .vjs-default-skin .vjs-play-progress { background: #900; }
 ```
 
-Or remove the 'vjs-default-skin' class from the video tag and create your own skin.
+Or remove the 'vjs-default-skin' class from the video tag and create a new skin from scratch.
 
 ```html
 <video class="video-js my-custom-skin" ...>
 ```
 
-More custom skins will be available for download soon. If you have one you'd like to contribute back, please email it to skins at videojs.
+More custom skins will be available for download soon. If you have one you like you can share it by forking [this example on CodePen.io](http://codepen.io/heff/pen/EarCt), and adding a link on the [Skins wiki page](https://github.com/videojs/video.js/wiki/Skins).
 

package.json

@@ -32,7 +32,8 @@
     "grunt-s3": "~0.2.0-alpha",
     "semver": "~1.1.4",
     "grunt-contrib-cssmin": "~0.6.0",
-    "uglify-js": "~2.3.6"
+    "uglify-js": "~2.3.6",
+    "grunt-contrib-less": "~0.6.4"
   },
   "testling": {
     "browsers": [

sandbox/index.html.example

@@ -4,7 +4,7 @@
   <meta charset="utf-8" />
   <title>Video.js Sandbox</title>
 
-  <link href="../src/css/video-js.css" rel="stylesheet" type="text/css">
+  <link href="../build/files/video-js.css" rel="stylesheet" type="text/css">
 
   <!-- LOAD VIDEO.JS SOURCE FILES IN ORDER -->
   <script src="../build/source-loader.js"></script>

sandbox/plugin.html.example

@@ -4,7 +4,7 @@
   <meta charset="utf-8" />
   <title>Video.js Plugin Example</title>
 
-  <link href="../src/css/video-js.css" rel="stylesheet" type="text/css">
+  <link href="../build/files/video-js.css" rel="stylesheet" type="text/css">
 
   <!-- LOAD VIDEO.JS SOURCE FILES IN ORDER -->
   <script src="../build/source-loader.js"></script>