e-river’s gists

e-river / _flexbox.scss

Last active December 29, 2015 14:59

Mixin of Sass with Compass for Flexbox supported new syntax and older syntax. If you use this Mixin, Compass is necessity.

	@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:

e-river / gulpfile.js

Last active January 2, 2016 11:19

gulpfile.js using gulp-ruby-sass, gulp-autoprefixer, gulp.spritesmith, gulp-jade, gulp-less, gulp-minify-css, gulp-concat and gulp-uglify, gulp-watch, gulp-plumber, gulp-clean.

	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')

e-river / Gruntfile.js

Created January 15, 2014 09:39

Gruntfile.js using grunt-contrib-cssmin, grunt-contrib-watch, grunt-contrib-concat, grunt-contrib-clean, grunt-contrib-compass, grunt-contrib-uglify

	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',

e-river / loader.html

Created January 16, 2014 05:11

Loading Animation for only CSS

	<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>

e-river / _Addingzero.scss

Created January 22, 2014 03:29

[Sass]Adding a 0 if only one digit serial number of the class name

	$num: "";
	@for $i from 1 through 10 {
	@if $i < 10 {
	$num: "0#{$i}";
	} @else {
	$num: "#{$i}";
	}
	.classname#{$num} {
	// CSS code here
	}

e-river / _retina-sprite-background.scss

Last active January 4, 2016 18:49

Creating a image of CSS Sprite using compass

	// 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);

e-river / Tabpanel-using-Knockout.js.markdown

Last active August 29, 2015 13:55

A Pen by Minoru Hayakawa.

Tabpanel using Knockout.js

This is Tabpanel using Knockout.js

A Pen by Minoru Hayakawa on CodePen.

License.

e-river / _namespace-memo.js

Created February 19, 2014 02:10

	if (!window.namespace) {
	var namespace = {};
	}

	(function(namespace){

	namespace.FunctionName = function(){
	this.load();
	};

e-river / Grunt_Install_memo.markdown

Last active August 29, 2015 13:56

Init

npm init

Install Grunt

sudo npm install grunt --save-dev

e-river / gulp_setup_memo.markdown

Last active August 26, 2016 07:17

Install gulp

sudo npm install -g gulp

Install gulp in the project

sudo npm install --save-dev gulp

Minoru Hayakawa e-river

Tabpanel using Knockout.js