Skip to content

Instantly share code, notes, and snippets.

View yankeyhotel's full-sized avatar
👾

Matt McClard yankeyhotel

👾
  • 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 / LESS Font Mixins
Last active June 26, 2019 04:06
LESS Font Mixins
// http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/ &
// https://gist.github.com/Victa/1209370
.rem-calc(@sizeValue) {
@remValue: @sizeValue/10;
@pxValue: @sizeValue;
font-size: ~"@{pxValue}px";
font-size: ~"@{remValue}rem";
}
@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 / DataGrab + PT FieldPack List
Created December 9, 2014 23:14
Make DataGrab work with the Pixel & Tonic's List Field Pack
// @line 150
if (is_string($data) && strpos($data, "|") >= 0 ){
$data = explode("|", $data);
}