Skip to content

Instantly share code, notes, and snippets.

View trumball's full-sized avatar

Todd Rumball trumball

1 follower · 0 following
  • London Ontario, Canada
View GitHub Profile
@trumball
trumball / Form PUT DELETE
Created May 24, 2013 21:04
Form PUT This is the correct way to use PUT and DELETE in a HTML form
<form method="POST">
<input type="hidden" name="_METHOD" value="PUT"/>
</form>
<form method="POST">
<input type="hidden" name="_METHOD" value="DELETE"/>
</form>
@trumball
trumball / BasicApp
Created July 3, 2013 19:11
file structure based on: https://github.com/tylersavery/jQueryTO2013/tree/master/code/BasicApp.js
/* file structure based on: https://github.com/tylersavery/jQueryTO2013/tree/master/code/BasicApp.js */
//set global app
var App = {};
App.Init = function() {
App.Cache();
App.BindListeners();
App.InitVideo();
@trumball
trumball / print
Created September 7, 2013 19:08
Print Link Style
@media print {
#main-content a[href]:after { " (" attr(href) ") "; }
}
@trumball
trumball / paragraph
Created September 9, 2013 14:26
Paragraph padding and indent
p{
margin-bottom:20px;
}
p+p{
text-indent:2em;
margin-top:-20px;
}
@trumball
trumball / border radius
Created September 9, 2013 17:16
border-radius
/* Mixin */
.border-radius (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
/* Implementation */
#somediv {
.border-radius(20px);
@trumball
trumball / Custom border radius
Created September 9, 2013 17:16
custom border radius
/* Mixin */
.border-radius-custom (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) {
-webkit-border-radius: @topleft @topright @bottomright @bottomleft;
-moz-border-radius: @topleft @topright @bottomright @bottomleft;
border-radius: @topleft @topright @bottomright @bottomleft;
}
/* Implementation */
#somediv {
.border-radius-custom(20px, 20px, 0px, 0px);
@trumball
trumball / Box shadow
Created September 9, 2013 17:18
Box shadow
/* Mixin */
.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) {
-webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
-moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
}
/* Implementation */
#somediv {
.box-shadow(5px, 5px, 6px, 0.3);
@trumball
trumball / css section arrows
Created September 13, 2013 13:58
including little arrows pointing from one section to the top of the following section
.section {
position: relative;
width:100%;
min-height:200px;
}
.section1 {
background: #88b7d5;
}
.section2 {
background: #bfb;
@trumball
trumball / google map
Created September 26, 2013 18:20
Here is a simple yet powerful code to create a form where the user can enter his location to get directions to a specific place. Very useful for contact pages.
<form action="http://maps.google.com/maps" method="get" target="_blank">
<label for="saddr">Enter your location</label>
<input type="text" name="saddr" />
<input type="hidden" name="daddr" value="350 5th Ave New York, NY 10018 (Empire State Building)" />
<input type="submit" value="Get directions" />
</form>
@trumball
trumball / validate emails using a regular expression
Created September 26, 2013 18:21
HTML5 allows, among other things, to validate emails using a regular expression pattern. Here is a ready to use input field with the regexp pattern to validate an email address.
<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />