Skip to content

Instantly share code, notes, and snippets.

@Tivoli
Last active December 27, 2015 08:39
Show Gist options
  • Save Tivoli/7297826 to your computer and use it in GitHub Desktop.
Save Tivoli/7297826 to your computer and use it in GitHub Desktop.
My collection of defaults and mixins for less and underscore in coffeescript.
_.mixin
isEmail: (string) ->
/^[a-z0-9_.%+\-]+@[0-9a-z.\-]+\.[a-z]{2,6}$/i.test(string)
isUsername: (string) ->
/^[\w\d\.-]{1,15}$/i.test(string)
isName: (string) ->
/^(?:[\u00c0-\u01ffa-zA-Z'-]){2,}(?:\s[\u00c0-\u01ffa-zA-Z'-]{2,})+$/i.test(string)
toSlug: (string) ->
string.toLowerCase().replace(/-+/g, '').replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '')
isDate: (year, month, day) ->
year = +year
month = +month
day = +day
date = new Date(year, month, day)
return false if isNaN(date.getTime())
return date.getFullYear() is year and date.getMonth() is month and date.getDate() is day
isObjectID: (string) ->
/[0-9a-f]{24}/.test(string)
formatCurrency: (num) ->
num = num.toString()
dollars = num.slice(0, -2)
cents = num.slice(-2)
dollars = dollars.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
"$#{dollars}.#{cents}"
// Media Queries
@media_desktop: ~"only screen and (min-width: 1025px)";
@media_tablet: ~"only screen and (min-width: 768px) and (max-width: 1024px)";
@media_mobile: ~"only screen and (max-width: 767px)";
@media_retina: ~"(min-resolution: 120dpi), (-webkit-min-device-pixel-ratio: 1.25), (min--moz-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.25)";
// Clearfix mini
.clearfix() {
zoom: 1;
&:before, &:after {content: ''; display: table;}
&:after {clear: both;}
}
.triangle(@width, @color) {
content: '';
position: absolute;
border-style: solid;
border-width: @width;
border-color: @color;
.size(0px);
}
.vertical-center(@height, @position: absolute) {
position: @position;
top: 50%;
margin-top: -@height/2;
}
.clearfix() {
zoom: 1;
&:before, &:after {content: ''; display: table;}
&:after {clear: both;}
}
.circle(@size) {
border-radius: 50%;
.size(@size);
}
.font-spec(@size) {
@base: unit(@size);
@remValue: (@base / 10);
font-size: ~"@{base}px";
font-size: ~"@{remValue}rem";
}
.font-spec(@size, @weight) when (ispixel(@weight)) {
line-height: @weight;
.font-spec(@size);
}
.font-spec(@size, @weight) when (isnumber(@weight)) and (@weight >= 100) {
font-weight: @weight;
.font-spec(@size);
}
.font-spec(@size, @weight, @lineHeight) {
line-height: @lineHeight;
font-weight: @weight;
.font-spec(@size);
}
.font-spec(@size, @weight, @lineHeight, @letterSpacing) {
letter-spacing: @letterSpacing;
line-height: @lineHeight;
font-weight: @weight;
.font-spec(@size);
}
* {
outline: 0;
.box-sizing;
&:before, &:after { .box-sizing; }
}
ol, ul {
margin: 0; padding: 0;
list-style-type: none;
}
a, a:visited {
cursor: pointer;
text-decoration: none;
&:hover { text-decoration: none; }
}
img { max-width: 100%; height: auto; }
textarea { resize: none; }
fieldset {
margin: 0;
padding: 0;
border: none;
}
.flexible {
font-size: 0.1px;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
> * {
text-align: left;
vertical-align: top;
display: inline-block;
float: none;
font-size: 12px;
}
&:after {
content: '';
width: 100%;
display: inline-block;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment