This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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
/ Cleaner Less @media queries
Last active
August 29, 2015 14:04
A nicer way of doing @media queriers in Less
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // @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
/ Window Width LESS Mixin
Last active
August 29, 2015 14:04
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #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; |
yankeyhotel
/ Parse Names into an object, Javascript
Last active
August 29, 2015 14:04
A function to parse names into an object with Javascript.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
/ Beveled corners & negative border-radius with CSS3 gradients LESS Mixin
Last active
August 29, 2015 14:03
Beveled corners & negative border-radius with CSS3 gradients LESS Mixin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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
/ Vertically Align CSS Styles
Last active
August 29, 2015 14:03
Vertical Align with display:tables
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .valign-hldr { | |
| display: block; | |
| height: 100%; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| } | |
| .valign-table { | |
| display: table; |
yankeyhotel
/ Hex to rgba Less mixin (for use with the Bootstrap Vertical Gradient mixin)
Last active
August 29, 2015 14:03
A LESS Mixin to convert hex color values to rgba color values to be used in conjunction with the vertical gradient mixin from Bootstrap.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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
/ Hex to rgba Less mixin
Last active
August 29, 2015 14:03
A LESS Mixin to convert hex color values to rgba color values.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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
/ ExpressionEngine Time HTML5 Tag with Date Formating
Last active
August 29, 2015 14:02
ExpressionEngine Time HTML5 Tag w/ Date Formating
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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
/ Font-size rem Calculator Less Mixin
Created
May 27, 2014 19:23
Font-size rem Calculator Less Mixin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .rem-calc(@sizeValue) { | |
| @remValue: @sizeValue/10; | |
| @pxValue: @sizeValue; | |
| font-size: ~"@{pxValue}px"; | |
| font-size: ~"@{remValue}rem"; | |
| } |