Skip to content

Instantly share code, notes, and snippets.

View patelprashant's full-sized avatar

Prashant patelprashant

5 followers · 11 following
  • Melbourne, Australia
View GitHub Profile
@patelprashant
patelprashant / 0_reuse_code.js
Created October 28, 2013 05:06
Here are some things you can do with Gists in GistBox.
// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console
@patelprashant
patelprashant / sass_grid.scss
Created October 31, 2013 05:57
SASS - Grid generator
// Custom Grid System
$grid_width : 960px;
$grid_col : 12;
$grid_gut : 20px;
body { min-width: $grid_width; }
.container_#{$grid_col} { margin-left: auto; margin-right: auto; width: $grid_width;
@for $i from 1 through $grid_col {
.grid_#{$i} { display: inline; float: left; margin-left: $grid_gut / 2; margin-right: $grid_gut / 2; }
.push_#{$i}, .pull_#{$i} { position: relative; }
.grid_#{$i} { width: ( ($grid_width / $grid_col - $grid_gut) * $i ) + (($i - 1) * $grid_gut); }
@patelprashant
patelprashant / CSS3_Transform_Mixin.scss
Created November 1, 2013 00:28
From http://www.emoticode.net/sass/css3-transform-rotate-scale-skew-translate.html
MIXINS:
=========================================================
//CSS3 Animation Delay and Duration with vendor-prefixes
@mixin animate-props ($delay: 1s, $duration: 1s, $mode: both) {
-webkit-animation-delay : $delay;
-webkit-animation-duration : $duration;
-webkit-animation-fill-mode: $mode;
-ms-animation-delay : $delay;
-ms-animation-duration : $duration;
@patelprashant
patelprashant / CSS_EyeSwitch.css
Last active December 27, 2015 10:39
//Usage
//<input type="checkbox">
/* Face Toggle --------------------------------- */
input[type="checkbox"] {
appearance: none;
outline: none;
position: relative;
margin: auto;
@patelprashant
patelprashant / emailHelp
Created November 5, 2013 02:43
//////////HTML/////////////////////////
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="[email protected]">
//////////CSS/////////////////////////
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
body {
@patelprashant
patelprashant / chrome_logo.html
Created November 6, 2013 23:53
Chrome Logo in CSS3
<div id="wrapper">
<div class="logo chrome">
<div class="part-1"></div>
<div class="part-2"></div>
<div class="part-3"></div>
<div class="circle"></div>
<div class="center"></div>
</div>
@patelprashant
patelprashant / list_tabs.js
Created November 10, 2013 22:22
var Tabs = {
el: {
nav: $(".nav"),
tabs: $(".nav > li > a"),
panels: $(".nav > li > section")
},
init: function() {
Tabs.bindUIActions();
@patelprashant
patelprashant / find_match_from_array.scss
Created November 12, 2013 04:19
From http://jaydenseric.com/blog/fun-with-sass-and-font-icons
// To simulate associative arrays
// Source: http://hugogiraudel.com/2013/08/12/sass-functions/#mapping
@function match($haystack, $needle) {
@each $item in $haystack {
$index: index($item, $needle);
@if $index {
$return: if($index == 1, 2, $index);
@return nth($item, $return);
}
}
@patelprashant
patelprashant / icon.scss
Last active December 28, 2015 02:09
Generate icon set - mixin
// Icon list (corresponds to icon font characters)
// Note associative arrays will be easier in Sass version 3.3: https://github.com/nex3/sass/issues/642
$icons: (
'facebook' '\e000',
'googleplus' '\e001',
'linkedin' '\e002',
'twitter' '\e003',
'youtube' '\e004',
'email' '\e005'
);
@patelprashant
patelprashant / setInterval.js
Created November 18, 2013 04:18
Set Interval function in javascript
function interval(func, wait, times){
var interv = function(w, t){
return function(){
if(typeof t === "undefined" || t-- > 0){
setTimeout(interv, w);
try{
func.call(null);
}
catch(e){
t = 0;