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;
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;
}
View Font-size rem Calculator Less Mixin
.rem-calc(@sizeValue) {
@remValue: @sizeValue/10;
@pxValue: @sizeValue;
font-size: ~"@{pxValue}px";
font-size: ~"@{remValue}rem";
}
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>
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);
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);
View Vertically Align CSS Styles
.valign-hldr {
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.valign-table {
display: table;
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),
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
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;