Instantly share code, notes, and snippets.

Matt McClard yankeyhotel

View GitHub Profile
@yankeyhotel
yankeyhotel / CSS Triangle Less Mixin
Last active Aug 29, 2015
CSS Triangle Less Mixin
View CSS Triangle Less Mixin
.css-triangle(@triangle-size, @triangle-color, @triangle-direction) {
border: inset @triangle-size;
content: "";
display: block;
height: 0;
position: absolute;
width: 0;
& when (@triangle-direction = top) {
border-color: transparent transparent @triangle-color transparent;
@yankeyhotel
yankeyhotel / Background Cover Less Mixin
Last active Aug 29, 2015
Background Cover Less Mixin
View Background Cover Less Mixin
.background-cover(@url, @position) {
background-image: url(@url);
background-position: center @position;
-moz-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
}
@yankeyhotel
yankeyhotel / Font-size rem Calculator Less Mixin
Created May 27, 2014
Font-size rem Calculator Less Mixin
View Font-size rem Calculator Less Mixin
.rem-calc(@sizeValue) {
@remValue: @sizeValue/10;
@pxValue: @sizeValue;
font-size: ~"@{pxValue}px";
font-size: ~"@{remValue}rem";
}
@yankeyhotel
yankeyhotel / ExpressionEngine Time HTML5 Tag with Date Formating
Last active Aug 29, 2015
ExpressionEngine Time HTML5 Tag w/ Date Formating
View ExpressionEngine Time HTML5 Tag with Date Formating
// Output <time datetime="2014-07-04T11:40">Friday, July 4</time>
<time datetime="{entry_date format="%Y-%m-%dT%H:%i"}">{entry_date format='%l, %F %j'}</time>
@yankeyhotel
yankeyhotel / Hex to rgba Less mixin
Last active Aug 29, 2015
A LESS Mixin to convert hex color values to rgba color values.
View Hex to rgba Less mixin
.hex-to-rgba (@color, @alpha: 1) {
@hex-to-rgba-red: red(@color);
@hex-to-rgba-green: green(@color);
@hex-to-rgba-blue: blue(@color);
@rgba: rgba(@hex-to-rgba-red, @hex-to-rgba-green, @hex-to-rgba-blue, @alpha);
}
// How to use
.hex-color {
.hex-to-rgba (#ffffff, .5);
@yankeyhotel
yankeyhotel / Hex to rgba Less mixin (for use with the Bootstrap Vertical Gradient mixin)
Last active Aug 29, 2015
A LESS Mixin to convert hex color values to rgba color values to be used in conjunction with the vertical gradient mixin from Bootstrap.
View Hex to rgba Less mixin (for use with the Bootstrap Vertical Gradient mixin)
.hex-to-rgba-vertical-gradient ( @start-color, @start-alpha: 1, @end-color, @end-alpha ) {
// Start Color
@start-red: red(@start-color);
@start-green: green(@start-color);
@start-blue: blue(@start-color);
@start-rgba: rgba(@start-red, @start-green, @start-blue, @start-alpha);
// End Color
@end-red: red(@end-color);
@end-green: green(@end-color);
@yankeyhotel
yankeyhotel / Vertically Align CSS Styles
Last active Aug 29, 2015
Vertical Align with display:tables
View Vertically Align CSS Styles
.valign-hldr {
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.valign-table {
display: table;
@yankeyhotel
yankeyhotel / Beveled corners & negative border-radius with CSS3 gradients LESS Mixin
Last active Aug 29, 2015
Beveled corners & negative border-radius with CSS3 gradients LESS Mixin
View Beveled corners & negative border-radius with CSS3 gradients LESS Mixin
.inverted-border-radius (@color, @size) {
background:
linear-gradient(135deg, transparent @size, @color 0) top left,
linear-gradient(225deg, transparent @size, @color 0) top right,
linear-gradient(315deg, transparent @size, @color 0) bottom right,
linear-gradient(45deg, transparent @size, @color 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
background-image:
radial-gradient(circle at 0 0, transparent @size, @color @size+1),
@yankeyhotel
yankeyhotel / Parse Names into an object, Javascript
Last active Aug 29, 2015
A function to parse names into an object with Javascript.
View Parse Names into an object, Javascript
var name_obj = {},
prefixes = ["Ms.", "Miss.", "Mrs.", "Mr."],
suffixes = ["Esq.", "Jr.", "Sr."];
function parse(value) {
/* -----------------------------------------------
* depending on the requirements you might need to
* remove punctuation and/or change to lowercase
* for easier searching
@yankeyhotel
yankeyhotel / Window Width LESS Mixin
Last active Aug 29, 2015
A Less (or Sass) Mixin and Javascript Function to create a tiny tool tip displaying the current Width and Media Queries being displayed. Oh and they are color coded. Built using Bootstrap.
View Window Width LESS Mixin
#width {
.box-shadow(none);
border-color: transparent;
background-color: rgba(0, 0, 0, .5);
margin-bottom: 0;
.opacity(1);
padding: .2em .5em;
position: fixed;
left: 10px;
bottom: 10px;