IMPORTANT!

Snipt is going open source. We've toyed with this idea for quite a while, and have finally decided it's the right way to move forward.

A few things:
  • The entire Snipt source code will be released on GitHub under the 3-clause BSD License on Friday, September 10th.
  • While we'd like to think we're perfect, we realize we're only human. By open sourcing the software that runs this website, certain bugs or security flaws may be discovered that could compromise the privacy of your snipts.
  • Only the Lion Burger team will be able to push commits to the Snipt.net site. Contributors should send a pull request to add new features or submit patches.
  • By using this site, you agree not to be too angry or take any legal action against Lion Burger should this whole thing go up in flames some day.
  • Follow us on Twitter for updates.
I agree, close this message
Sign up to create your own snipts, or login.

Latest 100 public snipts » catcubed's snipts The latest snipts from catcubed.

showing 1-15 of 15 snipts
  • ∞ Useful mixins for SASS 
    // Bunch of useful mixin functions for sass

=bgImg(!img,!x = 20px,!y = 10px,!attach = "scroll",!repeat = "no-repeat")
	background-position = !x !y
	background-repeat = !repeat
	background-attachment = !attach
	background-image: url(#{!img})

=boxShadow(!x = 5px,!y = 5px,!blur = 5px,!color = #000)
	-webkit-box-shadow = !x !y !blur !color
	-moz-box-shadow = !x !y !blur !color
	box-shadow = !x !y !blur !color

=borderRadius(!radius = 5px)	
	-moz-border-radius = !radius
	-webkit-border-radius = !radius
	border-radius = !radius

=singleCornerRadius(!side,!vert,!width = 5px)
	-moz-border-radius-#{!vert}#{!side} = !width
	-webkit-border-#{!vert}-#{!side}-radius = !width
	border-#{!vert}-#{!side}-radius = !width

// set global borders. Border radius can also be set
=border(!width = 1px,!style = "solid",!color = #000,!radius = 0)
	border = !width !style !color
	+borderRadius(!radius)

// Use noSideBorder() to kill a side after setting the global border() mixin above.
// This method results in smaller css once it is converted as the width/style/color is only set once.

=noSideBorder(!side)
	border-#{!side}: 0

=noSideBorderRadius(!side)
	+singleCornerRadius(!side,"top",0)
	+singleCornerRadius(!side,"bottom",0)

    copy | embed

    0 comments - tagged in  posted by catcubed on Jan 02, 2010 at 9:50 p.m. EST
  • ∞ Easy css hacks using SASS 
    //Easy CSS Hacks using SASS
// In most cases, you'll never need the 3rd, or 4th hacks here.

#idtag
	* html &
		//IE6 and below
		cssstyle: value
	* first-child+html &
		//IE7 only
		cssstyle: value
	html>body &
		//IE7,IE8, and modern browsers
		cssstyle: value
	html:first-child &
		//Opera only 9 and below
		cssstyle: value

    copy | embed

    2 comments - tagged in  posted by catcubed on Dec 02, 2009 at 3:39 p.m. EST
  • ∞ Minimal HTML5 CSS Reset (for SASS) 
    // minimal reset with html5

*  
	vertical-align: baseline
	font-family: inherit
	font-style: inherit  
	font-size: 100%
	border: none
	padding: 0
	margin: 0  

h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl
	margin: 0 0 16px

li, dd, blockquote
	margin-left: 20px

table 
	border-collapse: collapse 
	border-spacing: 0

article, aside, dialog, figure, footer, header, hgroup, nav, section
	display: block
	
nav li, nav ul
	margin: 0
	padding: 0
	list-style: none
	
q:before, q:after
	content: ''

    copy | embed

    0 comments - tagged in  posted by catcubed on Nov 26, 2009 at 3:43 p.m. EST
  • ∞ Simple Adjustable Gutter Grid system for LessCSS 
    // Simple Adjustable Gutter Grid for LessCSS (NOT TESTED! But should work)
// For a 960px width, !grid = 80px = 12 columns; 60px = 16 columns
// gutter is base gutter. You can change the gutter per element. See Grid mixin
@pageWidth: 960px;
@grid: 80px;
@gutter: 20px;

//used for page wrapper
.container {
	width: @pageWidth;
	margin: 0 auto;
}
	
//	Grid mixin functions sets size and width of element boxes. Function variables are as follows
//	@col = number of columns,
//	@gutterLeft = size of left gutter
//	@gutterRight = size of right gutter

//gridFlush sets gutter via padding, gridFloat formed by margin

.gridBase {float: left; overflow: hidden; display: inline;}	
.gridFlush(@col: 1,@gutterLeft: @gutter/2, @gutterRight = @gutter/2){
	padding-left: @gutterLeft;
	padding-right: @gutterRight;
	width: @col * @grid - @gutterRight - @gutterLeft;
	.gridBase;
}
.gridFloat(@col: 1,@gutterLeft: @gutter/2, @gutterRight = @gutter/2){
	margin-left: @gutterLeft;
	margin-right: @gutterRight;
	width: @col * @grid - @gutterRight - @gutterLeft;
	.gridBase;
}

	
// first is only required if you want to clear a row of elements which did not equal total width
.first { clear: both;}

    copy | embed

    0 comments - tagged in  posted by catcubed on Nov 26, 2009 at 3:12 a.m. EST
  • ∞ Simple Adjustable Grid Mixin for SASS 
    // Simple Adjustable Gutter Grid
// For a 960px width, !grid = 80px = 12 columns; 60px = 16 columns
// gutter is base gutter. You can change the gutter per element. See Grid mixin
!pageWidth = 960px
!grid = 80px
!gutter = 20px

//used for page wrapper
=container
	width = !pageWidth
	margin: 0 auto
	
/*	Grid mixin function sets size and width of element boxes. Function variables are as follows
	!col = number of columns,
	!gutterLeft = size of left gutter
	!gutterRight = size of right gutter
	
// gridFlush gutter is formed via padding, gridFloat formed by margin

=gridBase
	float: left
	overflow: hidden
	display: inline

=gridFlush(!col = 1,!gutterLeft = !gutter/2, !gutterRight = !gutter/2 )
	padding-left = !gutterLeft
	padding-right = !gutterRight
	width = !col * !grid - !gutterRight - !gutterLeft
	+gridBase

=gridFloat(!col = 1,!gutterLeft = !gutter/2, !gutterRight = !gutter/2)
	margin-left = !gutterLeft
	margin-right = !gutterRight
	width = !col * !grid - !gutterRight - !gutterLeft
	+gridBase
	
// first is only required if you want to clear a row of elements which did not equal total width
=first
	clear: both

    copy | embed

    0 comments - tagged in  posted by catcubed on Nov 25, 2009 at 8:54 p.m. EST
  • ∞ CSS element inheritance spotter (for LessCSS)) 
    /* used for testing where element bounding boxes are. Only works in modern browsers and IE8 */
//written for LessCSS. NOT Tested! Should work though

body *:hover { 
	outline-style: dotted; outline-width: 2px; outline-color: #ee3; 
	*:hover { outline-color: #bb3; 
		*:hover { outline-color: #883; 
			*:hover { outline-color: #553; 
				*:hover { outline-color: #333; 
					*:hover { outline-color: #000; 
}}}}}}

    copy | embed

    0 comments - tagged in  posted by catcubed on Nov 25, 2009 at 7:27 p.m. EST
  • ∞ CSS element inheritance spotter 
    /* used for testing where element bounding boxes are. Only works in modern browsers and IE8 */

body *:hover { outline-style: dotted; outline-width: 2px; outline-color: #ee3; }
body *:hover *:hover { outline-color: #bb3; }
body *:hover *:hover *:hover { outline-color: #883; }
body *:hover *:hover *:hover *:hover { outline-color: #553; }
body *:hover *:hover *:hover *:hover *:hover { outline-color: #333; }
body *:hover *:hover *:hover *:hover *:hover *:hover { outline-color: #000; }

    copy | embed

    0 comments - tagged in  posted by catcubed on Nov 25, 2009 at 7:24 p.m. EST
  • ∞ CSS element inheritance spotter (for SASS) 
    //Used for testing where the outline for boxes are. Only works in modern browsers and IE8
//This is written in SASS

body *:hover
	outline-style: dotted
	outline-width: 2px
	outline-color: #ee3
	*:hover
		outline-color: #bb3
		*:hover
			outline-color: #883
			*:hover
				outline-color: #553
				*:hover
					outline-color: #333
					*:hover
						outline-color: #000

    copy | embed

    0 comments - tagged in  posted by catcubed on Nov 25, 2009 at 7:21 p.m. EST
  • ∞ CSS string parser for grabbing all 4 border values 
    var colorRegex = /#[1-90a-f]+/gi; //hex values only
var borderColor = cssParse(opts.borderColor,colorRegex);

var widthRegex = /[0-9]+/g;
var borderWidth = cssParse(opts.borderWidth,widthRegex);

function cssParse(css,reg){ //parses string into separate values for each side which is required for color anim and other uses
	var temp = css.match(reg),rtn = [],l = temp.length;
	if (l > 1) {
		rtn[0] = temp[0];
		rtn[1] = temp[1];
		rtn[2] = (l == 2) ? temp[0] : temp[2];
		rtn[3] = (l == 4) ? temp[3] : temp[1];
	} else rtn = [temp,temp,temp,temp];
	return rtn;
}

    copy | embed

    0 comments - tagged in  posted by catcubed on Nov 16, 2009 at 11:37 a.m. EST
  • ∞ javascript debug for console or browser (uses jquery) 
    function debug(a,tag) {
	var bugs="", header = "[functionName](" + (tag||"")  + ")";
	($.isArray(a) || isObject(a)) ? $.each(a, function(i, val) { bugs = bugs +i + ":" + val + ", ";}) :  bugs = a;
	
	if (window.console && window.console.log) {
		window.console.log(header + bugs);
	} else {
		if ($("#debug").size() == 0) $("<ul id='debug'></ul>").appendTo("body").css({border:"1px solid #ccf",position:"absolute",top:"10px",right:"10px",width:"300px",padding:"10px",listStyle:"square"});
		$("<li>").css({margin:"0 0 5px"}).appendTo("#debug").append(header).wrapInner("<b></b>").append(" " + bugs);
	}
}

    copy | embed

    0 comments - tagged in  posted by catcubed on Nov 10, 2009 at 6:39 p.m. EST
  • ∞ quick code to find smallest size 
    function getSmlr(a,b) {return ((a && a < b) || !b) ? a : b;}

    copy | embed

    0 comments - tagged in  posted by catcubed on Nov 10, 2009 at 1:52 a.m. EST
  • ∞ ceetip - a small tooltip jquery plugin that works with ceebox 
    // CeeTip function based on vtip by vertigo project http://www.vertigo-project.com/projects/vtip but changed into a function and modified to work with CeeBox
(function($) {
	$.fn.ceetip = function(settings) {
		var option = $.extend({}, $.fn.ceetip.defaultSettings, settings);

		return this.each(function() {
			$this = $(this);
			
			$this.unbind("hover").hover(    
				function(e) {
					this.t = this.title;
					this.title = ''; 
					this.top = (e.pageY + option.yOffset); this.left = (e.pageX + option.xOffset);
					
					$('body').append( '<p id="ceetip"><img id="ceetipArrow" />' + this.t + '</p>' );
								
					$('p#ceetip #ceetipArrow').attr("src", "/images/vtip_arrow.png").css({
						position: 'absolute',
						top: '-10px',
						left: '5px',
					});
					$('p#ceetip').css({
						top:this.top+'px',
						left:this.left+'px',
						display: 'none',
						position: 'absolute',
						padding: '10px', 
						font-size: '0.8em',
						backgroundColor: '#fff',
						border: option.border,
						'-moz-border-radius': '5px',
						'-webkit-border-radius': '5px',
						zIndex: '9999'
					}).fadeIn("slow");
					
				},
				function() {
					this.title = this.t;
					$("p#ceetip").fadeOut("slow").remove();
				}
			).mousemove(
				function(e) {
					this.top = (e.pageY + option.yOffset);
					this.left = (e.pageX + option.xOffset);
								 
					$("p#ceetip").css("top", this.top+"px").css("left", this.left+"px");
				}
			);  
		})
	}

	$.fn.ceetip.defaultSettings = {xOffset:-12,yOffset:30,border:'1px solid #a6c9e2'} //default drops in right under the windows 
})(jQuery);

    copy | embed

    0 comments - tagged in  posted by catcubed on Oct 30, 2009 at 3:19 p.m. EDT
  • ∞ Simple function for printing varibles when testing 
    function tester(stuff) {
	var i=0;
	var test="";
	if ($.isArray(stuff)) {
		while (i<stuff.length) {
			test = test + stuff[i] + " | ";
			i=i+1;
		}
	} else { test = stuff + " | ";}
	$("#test").append(test)
}

    copy | embed

    0 comments - tagged in  posted by catcubed on Oct 29, 2009 at 8:37 p.m. EDT
  • ∞ allows for easy testing to see what type of data a variable contains. 
    function isFunction(a) {
return typeof a == 'function';
}
function isNull(a) {
return typeof a == 'object' && !a;
}
function isNumber(a) {
return typeof a == 'number' && isFinite(a);
}
function isObject(a) {
return (typeof a == 'object' && a) || isFunction(a);
}

    copy | embed

    0 comments - tagged in  posted by catcubed on Oct 29, 2009 at 7:47 p.m. EDT
  • ∞ Get Page Size 
    function getPageSize(){
			var de = document.documentElement;
			var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
			var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
			var pg = [w,h];
			return pg;
		}

    copy | embed

    0 comments - tagged in  posted by catcubed on Oct 27, 2009 at 10:51 p.m. EDT
Sign up to create your own snipts, or login.