Skip to content

Instantly share code, notes, and snippets.

View jpetto's full-sized avatar
🪐

J Petto jpetto

🪐
View GitHub Profile
@jpetto
jpetto / l10n.sublime-snippet
Created November 1, 2013 15:56
Sublime Text snippets for mozilla.org L10n.
<snippet>
<content><![CDATA[{{ _('$SELECTION') }}]]></content>
<description>Wrap string for l10n</description>
</snippet>
@jpetto
jpetto / hw-css-columns.html
Created October 29, 2013 02:11
EWT HW: CSS Columns
<!DOCTYPE html>
<html>
<head>
<title>Internet Assessment</title>
<style type="text/css" media="screen">
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-
@jpetto
jpetto / cw-css-ui.html
Created October 29, 2013 02:10
EWT CW: CSS UI - Halloween edition
<!DOCTYPE html>
<html>
<head>
<title>Spooky Scary</title>
<style type="text/css" media="screen">
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing
@jpetto
jpetto / gist:6982713
Last active December 25, 2015 13:19
Sample LESS file
// you can use single line comments in LESS!
// they will be removed from the generated .less file
// variables
@text-color: #222223;
@light-blue: #a7eaf6;
@dark-blue: #2c81d9;
@content-padding: 2rem;
// mixin for rounded corners
@jpetto
jpetto / hw-css-floats.html
Created September 30, 2013 23:36
EWT HW - CSS Floats
<!doctype html>
<html>
<head>
<title>Floats!</title>
<style type="text/css">
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
/* apply a natural box layout model to all elements */
@jpetto
jpetto / gist:5555780
Created May 10, 2013 17:02
Twitter handle described using CSS.
#ghostwheelie {
display: block;
position: relative;
margin: 0 auto;
background: rgba(255, 255, 255, 0.5);
width: 255px;
height: 255px;
border-radius: 50%;
}
@jpetto
jpetto / gist:5541556
Created May 8, 2013 16:11
Delay form submission while maintaining native HTML5 validation.
$('#submit-button').on('click', function(e) {
// make sure form is valid before taking any custom action
if ($('#the-form')[0].checkValidity()) {
// only prevent default action if form is valid
// this will retain native HTML5 form validation
e.preventDefault();
// do whatever you need to do prior to submitting form
// in my case, it was Google Analytics tracking
@jpetto
jpetto / index.html
Last active December 14, 2015 03:59
Starter CSS file for responsive design.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
@jpetto
jpetto / gist:4988451
Created February 19, 2013 18:22
Simple guessing game
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace ConsoleGuessingGame1
{
class Program
{
<!DOCTYPE html>
<html>
<head>
<title>Mmm, Tasty!</title>
<link href='http://fonts.googleapis.com/css?family=Wendy+One|Pontano+Sans' rel='stylesheet' type='text/css'>
<style type="text/css">
html { font-size: 62.5%; }