Skip to content

Instantly share code, notes, and snippets.

View yankeyhotel's full-sized avatar
👾

Matt McClard yankeyhotel

👾
10 followers · 16 following
  • Habitat
  • United States
View GitHub Profile
@yankeyhotel
yankeyhotel / Cleaner Less @media queries
Last active August 29, 2015 14:04
A nicer way of doing @media queriers in Less
// @media queries vars
// @mq-xxs - [ 0px - 480px]
// @mq-xs - [ 481px - 767px]
// @mq-sm - [ 768px - 991px]
// @mq-md - [ 992px - 1199px]
// @mq-lg - [1200px +]
@mq-xxs: ~"only screen and (max-width: @{screen-xs})";
@mq-xs: ~"only screen and (min-width: @{screen-xs} + 1) and (max-width: @{screen-xs-max})";
@mq-sm: ~"only screen and (min-width: @{screen-sm}) and (max-width: @{screen-sm-max})";
@mq-md: ~"only screen and (min-width: @{screen-md}) and (max-width: @{screen-md-max})";
@yankeyhotel
yankeyhotel / Flexbox Less Mixin
Last active August 29, 2015 14:04
Flexbox LESS Mixin
.flexit( @flex-dir ) {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-direction: normal;
-webkit-flex-direction: @flex-dir;
-moz-flex-direction: @flex-dir;
-ms-flex-direction: @flex-dir;
@yankeyhotel
yankeyhotel / Use JS and CSS media queries together to determine width of browser window - CSS
Last active August 29, 2015 14:05
Use CSS media queries and Javascript together to determine browser width.
/* position static in mobile media queries by default */
#js-media-test { position: static; }
/* and position it relative in larger sizes
you can set the break to whatever makes the most sense */
@media (max-width: 769px) {
#js-media-test { position: relative; }
}
@yankeyhotel
yankeyhotel / Validate Email Address in Javasctipt
Last active August 29, 2015 14:06
Validate Email Address in Javasctipt
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
return pattern.test(emailAddress);
@yankeyhotel
yankeyhotel / Validate Zip Code in Javascript
Created September 10, 2014 15:19
Validate Zip Code in Javascript
function isValidZipCode( zipCode ) {
var pattern = new RegExp(/^\d{5}(?:[-\s]\d{4})?$/);
return pattern.test(zipCode);
}
if( !isValidEmailAddress( zipCode ) ) {
/* do stuff here */
}
@yankeyhotel
yankeyhotel / Switchee
Created September 17, 2014 14:58
Use Switchee to replace and easy if else statement in ExpressionEngine
{exp:switchee variable="{variable_to_test_against}" parse="inward"}
{case value="''"}
<!-- value is empty -->
{/case}
{case default="Yes"}
<!-- default -->
{/case}
{/exp:switchee}
@yankeyhotel
yankeyhotel / Copyright Date for ExpressionEngine
Last active August 29, 2015 14:08
Copyright Date for ExpressionEngine
@yankeyhotel
yankeyhotel / Triangle Mask LESS Mixin
Last active August 29, 2015 14:09
Triangle Mask LESS
.hero-mask(@trianlgle-height: 40px) {
height: (@trianlgle-height / 2);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 1000;
&:before,
&:after {
@yankeyhotel
yankeyhotel / Diamond Inside of a Square LESS Mixin
Last active August 29, 2015 14:11
A LESS Mixin to mask a square image into a diamond shape (aka 45deg square).
.diamond-inside-square (@square: 100px; @background-img) {
.square(@square);
.rotate(-45deg);
margin: @square/4;
overflow: hidden;
&:after {
.square(@square*1.5);
.rotate(45deg);
background: url(@background-img);
display: block;
@yankeyhotel
yankeyhotel / Jquery Ajax call
Created April 10, 2015 20:26
FoxyCart API - Ajax to PHP and back for customer info
$.ajax({
url: '../assets/php/get_customer_id.php',
data: { email: "email@email.com" },
type: 'post',
success: function(data) {
var xmlDoc = $.parseXML(data),
$xml = $(xmlDoc);
console.log($xml.find("customer_id").text());
},
error: function(jqXHR, textStatus, errorThrown) {