jackmcmorrow’s gists

jackmcmorrow / index.html

Created January 15, 2013 21:11

A CodePen by jackmcmorrow. Fixing list of span blocks in Boostrap

	<body>
	<div class="container">
	<hr />
	<div class="row-fluid">
	<div class="span1">Span1</div>
	<div class="span1">Span1</div>
	<div class="span1">Span1</div>
	<div class="span1">Span1</div>
	<div class="span1">Span1</div>
	<div class="span1">Span1</div>

jackmcmorrow / limitadordecaracteres.html

Last active December 16, 2015 05:59

A CodePen by jackmcmorrow. Limitador de caracteres - É um simples limitador de caracteres em JS com um pouquinho de jQuery na execução. Ele cria um objeto novo toda a vez que você clica em um campo, isso deve pesar menos apesar do seletor na classe dos elementos. #Update# Já que eu fiz o negócio, melhor deixar direito: joga um atributo limite no…

	<div class="span4">
	<div class="control-group">
	<label for="coment" class="control-label">Comentário simples <br></label>
	<div class="controls">
	<textarea class="comentarioGrupo validarGrupos" name="coment" id="coment" cols="50" rows="5" limite="200"></textarea>
	<span class="help-block"><b>200</b> caracteres restantes</span>
	<label for="comentarioGrupo" class="label label-important"></label>
	</div>
	</div>
	</div>

jackmcmorrow / sass-sticky-footer.scss

Last active December 18, 2015 00:59

Para criar rodapé fixo no pé da página, mesmo que o conteúdo não esteja empurrando ele. Só adicionar esse mixin usando @include e seguir a marcação. Você pode escolher o seletor dos elementos, no melhor estilo função de jQuery: @include sticky ('200px', 'body #wrapper', '#wrapper #root', '.rodape'); O rodapé precisa ter um tamanho fixo.

	@mixin sticky($tamanho-footer, $wrapper : '#wrapper', $root : '#root', $footer : '#footer') {

	#{$wrapper} {
	position: relative;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	}

	#{$root} {

jackmcmorrow / glyphicons.scss

Last active December 18, 2015 03:09

Expressão em SASS para criar 360 ícones da série Glyphicons (http://glyphicons.com/) através de uma spritesheet maneira: https://dl.dropboxusercontent.com/u/16104519/Web/gist/glyphicons.png ou https://dl.dropboxusercontent.com/u/16104519/Web/gist/glyphicons-w.png Usei o mesmo paradigma do Twitter Bootstrap #juscuz

	[class*="icon-glyph-"] {
	display: inline-block;
	height: 30px;
	width: 30px;
	background-image: url("../img/glyphicons.png");
	}

	.icon-white {
	background-image: url("../img/glyphicons-w.png");
	}

jackmcmorrow / icones

Last active December 19, 2015 16:38

Ícones de diversas extensões dentro da pasta images/ico/[extensão].gif A coleção de ícones está em: https://www.dropbox.com/sh/wpvzxn8zvgxa8lc/zc06b0rQ0T

	[class^="icn-"] {
	display: inline-block;
	height:18px;
	width:18px;

	float: left;
	margin-right: 5px;
	background: url("/images/ico/default.icon.gif") center center no-repeat;

	}

jackmcmorrow / sass-hash-mixin.scss

Last active December 19, 2015 20:18 — forked from nathos/sass-hash-mixin.sass

Faz 'tipo' uma hash no Sass, proporção de uma pra uma (1:1); Agradecimentos ao @nathos pelo bizu sensacional.

	@mixin categoria-cores {
	@each $categoria in $categorias {
	.cat-#{nth($category, 1)} {
	background-color: nth($category, 2);
	}
	}
	}

jackmcmorrow / media-queries.scss

Last active December 26, 2015 23:59

Media queries para SASS

	@mixin print {
	@media only print {
	@content;
	}
	}

	@mixin no-print {
	@media only print {
	display: none !important;
	}

jackmcmorrow / fonts.scss

Created October 30, 2013 15:23

Font-face starter

	@font-face {
	font-family: "DeckRegIt";
	font-style: normal;
	font-weight: 300;
	src: local("DeckRegIt"), url('fonts/DeckRegIt.otf') format("opentype");
	src: local("DeckRegIt"), url('fonts/DeckRegIt.ttf');
	}

	@font-face {
	font-family: "DeckBlackIt";

jackmcmorrow / _bs3media-queries.scss

Created March 11, 2014 17:55

Bootstrap 3 Media Queries + utilities for text alignment

	.left {text-align: left;}
	.center {text-align: center;}
	.right {text-align: right;}

	.top {vertical-align: top;}
	.bottom {vertical-align: bottom;}

	.block-center {margin: 0 auto;}

jackmcmorrow / animation.js

Created August 20, 2014 13:30

Animation.js, a frame by frame animation lib

	/*
	// Animation CLASS
	// @author cav_dan<[email protected]>
	// @desc
	// Create a frame-by-frame animation that may use jQuery
	//
	// @args
	// selector = $('#someid') \|\| document.querySelector('#someid'),
	//
	// optionsObj = {

cav_dan jackmcmorrow