View gulp_setup_memo.markdown

Install gulp

sudo npm install -g gulp

Install gulp in the project

sudo npm install --save-dev gulp
View _rollover.js
/*
Usage:
HTML
<img class="js-rollover">
JS
require jQuery
http://jquery.com/download/
View _retina-sprite-background.scss
// 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);
View _Addingzero.scss
$num: "";
@for $i from 1 through 10 {
@if $i < 10 {
$num: "0#{$i}";
} @else {
$num: "#{$i}";
}
.classname#{$num} {
// CSS code here
}
View loader.html
<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>
View Gruntfile.js
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',
View gulpfile.js
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')
View _flexbox.scss
@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:
View prefetch.jade
- var links = ['//www.google-analytics.com', '//accounts.google.com', '//apis.google.com', '//oauth.googleusercontent.com', '//ssl.gstatic.com', '//www.facebook.com', '//connect.facebook.net', '//static.ak.facebook.com', '//static.ak.fbcdn.net', '//s-static.ak.facebook.com', '//twitter.com', '//cdn.api.twitter.com', '//p.twitter.com', '//platform.twitter.com', '//b.st-hatena.com', '//cdn-ak.b.st-hatena.com', '//cdn.api.b.hatena.ne.jp']
each val in links
link(href='#{val}', rel='dns-prefetch')
View animation.scss
// =========== [[CSS Animation]] ===========
// Keyframes
// Usage:
// @include keyframes(name) {
// 0% { selector { property: value; } }
// 100% { selector { property: value; } }
// }
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {