// Make elements align in a grid, regardless of height
// Apply to elements you want as grid items
// $cols = how many columns you want
// $margin-right = margin-right, should be in percent
// $ie8-height = an explicit height for all the elements, "off" by default, only applied to IE
@mixin gridify($cols, $margin-right: 5%, $ie8-height: auto) {
// Math for widths, margins, and clears
$width: (100% / $cols) - $margin-right + ($margin-right / $cols);
$ie-width: (100% / $cols) - $margin-right;
$clearnum: $cols + 1;
// Default styles for each grid item
clear: none;
display: block;
float: left;
margin-right: $margin-right;
width: $width;
// Resetting from any previous uses of this mixin
&:nth-child(odd),
&:nth-child(even) {
clear: none;
margin-right: $margin-right;
}
// Clear the rows
&:nth-child(#{$cols}n+#{$clearnum}) {
clear: left;
}
// Remove margin-right from last column
&:nth-child(#{$cols}n+#{$cols}) {
margin-right: 0;
}
// Fix for IE8 since it can't handle :nth-child()
.lt-ie9 & {
height: $ie8-height;
width: $ie-width;
}
}
@mixin retina($ratio: 1.5) {
$dpi: $ratio * 96;
$opera-ratio: $ratio * 100;
@media only screen and (-webkit-min-device-pixel-ratio: #{$ratio}),
only screen and ( -o-min-device-pixel-ratio: '#{$opera-ratio}/100'),
only screen and ( min-resolution: #{$dpi}dpi),
only screen and ( min-resolution: #{$ratio}dppx) {
@content;
}
}
//
// House Keeping - Button Semantics
// --------------------------------------------------
// Alert Message Style
// ---------------------
@mixin house-keeping-alert() {
display: block !important;
padding: 0.5em 1em !important;
background: #f00 !important;
color: #fff !important;
font-family: sans-serif !important;
font-size: 16px !important;
text-decoration: none!important;
text-shadow: none!important;
}
// Buttons and Links
// ---------------------
// If it’s a hyperlink, it should have an href attribute.
a:not([href]):after {
content: 'Do you mean for this to be a link or a button, because it does not link to anything!';
@include house-keeping-alert();
}
// If it’s a hyperlink and has an href attribute, it should have a valid value.
a[href=""]:after,
a[href$="#"]:after,
a[href^="javascript"]:after {
content: 'Do you mean for this link to be a button, because it does not go anywhere!';
@include house-keeping-alert();
}
// If it uses a button class, it should be a button — at least in the accessibility layer.
.btn:not(button):not([role="button"]):not([type="button"]):not([type="submit"]):not([type="reset"]):after,
.button:not(button):not([role="button"]):not([type="button"]):not([type="submit"]):not([type="reset"]):after,
a[class*="btn"]:not([role="button"]):after,
a[class*="button"]:not([role="button"]):after,
[class*="btn"]:not([role="button"]):after,
[class*="button"]:not([role="button"]):after {
content: 'If you are going to make it look like a button, make it a button, damn it!';
@include house-keeping-alert();
}
// If it is an a element with role="button", then it should link to somewhere when JavaScript is off.
a[role="button"]:not([href*="/"]):not([href*="."]):not([href*="?"]):after {
content: 'Either use a link fallback, or just use a button element.';
@include house-keeping-alert();
}
// You can’t disable a hyperlink.
a.button[class*="disabled"]:after,
a.btn.disabled:after,
a[class*="button"][class*="disabled"]:after {
content: 'You cannot disable a hyperlink. Use a button element with type="disabled".';
@include house-keeping-alert();
}
// Buttons in forms should have explicit types.
form button:not([type]):after {
content: 'Is this a submit button, a reset button or what? Use type="submit", type="reset" or type="button"';
@include house-keeping-alert();
}
// Both hyperlinks and buttons should have some sort of content or an ARIA label.
a:empty:not([aria-label]):not([aria-labelledby]):after,
button:empty:not([aria-label]):not([aria-labelledby]):after,
button:not([aria-label]):not([aria-labelledby]) img:only-child:not([alt]):after,
a:not([aria-label]):not([aria-labelledby]) img:only-child:not([alt]):after {
content: 'All buttons and links should have text content, an image with alt text or an ARIA label';
@include house-keeping-alert();
}