Install gulp
sudo npm install -g gulp
Install gulp in the project
sudo npm install --save-dev gulp
@mixin display-flex() { | |
@include display-box; | |
display: -ms-flexbox; | |
display: -webkit-flex; | |
display: flex; | |
} | |
// flex-direction property | |
// This Argument is same as W3C Flexbox. | |
// See below: |
var gulp = require('gulp') | |
, concat = require('gulp-concat') | |
, uglify = require('gulp-uglify') | |
, watch = require('gulp-watch') | |
, sass = require('gulp-ruby-sass') | |
, autoprefixer = require('gulp-autoprefixer') | |
, spritesmith = require("gulp.spritesmith") | |
, minifyCSS = require('gulp-minify-css') | |
, plumber = require('gulp-plumber') | |
, jade = require('gulp-jade') |
module.exports = function(grunt) { | |
var pkg = grunt.file.readJSON('package.json'); | |
grunt.initConfig({ | |
//Concatenate JS files | |
concat: { | |
lib: { | |
src: [ | |
'public_html/dev/lib/jquery.js', |
<div id="loading-wrapper"> | |
<span id="bounce1" class="loading-bounce"></span> | |
<span id="bounce2" class="loading-bounce"></span> | |
<span id="bounce3" class="loading-bounce"></span> | |
<span id="bounce4" class="loading-bounce"></span> | |
<span id="bounce5" class="loading-bounce"></span> | |
<span id="bounce6" class="loading-bounce"></span> | |
<span id="bounce7" class="loading-bounce"></span> | |
<span id="bounce8" class="loading-bounce"></span> |
$num: ""; | |
@for $i from 1 through 10 { | |
@if $i < 10 { | |
$num: "0#{$i}"; | |
} @else { | |
$num: "#{$i}"; | |
} | |
.classname#{$num} { | |
// CSS code here | |
} |
// Mixin for Creating a image of CSS Sprite using compass against Retina | |
// For use: | |
// .pdf-icon { | |
// @include retina-sprite-background(pdf); | |
// } | |
// | |
$sprite-map: sprite-map("sprite/*.png", $spacing: 100px); | |
$sprite-path: sprite-path($sprite-map); | |
$sprites-img: sprite-url($sprite-map); |
/* | |
Usage: | |
HTML | |
<img class="js-rollover"> | |
JS | |
require jQuery | |
http://jquery.com/download/ | |
Install gulp
sudo npm install -g gulp
Install gulp in the project
sudo npm install --save-dev gulp
(function(){ | |
document.addEventListener('DOMContentLoaded', function(event) { | |
new ActiveForm().onEvent(event.target); | |
}, false); | |
})(); | |
function ActiveForm() { | |
this.submit = document.getElementById('submit'); | |
} |
document.addEventListener("DOMContentLoaded", function(event) { | |
new ShowButton().load(); | |
}); | |
function ShowButton() { | |
this.btn = document.querySelectorAll('.class'); | |
this.target = document.querySelectorAll('input[type="checkbox"]'); | |
} | |
ShowButton.prototype.load = function() { |