Skip to content

Instantly share code, notes, and snippets.

View benlwilliams's full-sized avatar

Ben Williams benlwilliams

View GitHub Profile
function countCSSRules() {
var results = '',
log = '';
if (!document.styleSheets) {
return;
}
for (var i = 0; i < document.styleSheets.length; i++) {
countSheet(document.styleSheets[i]);
}
function countSheet(sheet) {
@benlwilliams
benlwilliams / _helpers.scss
Created February 4, 2014 21:49
.scss rules and mixins for miscellaneous alignment, floats, margins, and padding
//
// Miscellaneous useful HTML classes and responsive overrides
// for alignment, floats, margins, and padding
//
.left, %left { float: left !important; }
.right, %right { float: right !important; }
.clear, %clear { clear: both !important; }
.clear-left, %clear-left { clear: left !important; }
.clear-right, %clear-right { clear: right !important; }
.float-reset, %float-reset { float: none !important; }
@benlwilliams
benlwilliams / grid-helpers.scss
Last active December 28, 2015 11:39
Some Foundation 4 Grid extensions
//
// Simple Styles
//
.relative { position:relative; }
.clear { clear:both; }
.clear-reset { clear:none; }
.vert-middle { vertical-align:middle; }
@benlwilliams
benlwilliams / Breakpoint Layout helpers for Zurb Foundation
Last active December 25, 2015 21:59
Some Floating, Clearing, and a zero grid width addition for use in Zurb Foundation 4
//
// Responsive Floats
//
.small-float-right { float:right; }
.small-float-left { float:left; }
.small-float-reset { float:none; }
.small-clear-left { clear:left; }
.small-clear-right { clear:right; }
.small-clear-both { clear:both; }
.small-clear-reset { clear:none; }
@benlwilliams
benlwilliams / zero column Zurb Foundation
Last active December 25, 2015 21:59
Zero width columns for Zurb Foundation grid. Used instead of Foundation's visibility classes because they can force some display properties that are undesired on the hidden element. Also, just feels more natural.
.small-0 { display:none; }
@media #{$small} {
.medium-0 { display:none; }
[class*="medium-"]:not(.medium-0) { display:block; } // resets the .small-0 display property
}
@media #{$medium} {
.large-0 { display:none; }
[class*="large-"]:not(.large-0) { display:block; } // resets the .medium-0 display property
@benlwilliams
benlwilliams / _Module Spacing
Created August 8, 2013 15:08
Remove bottom margin spacing of elements at the bottom of modules as solution to worrying about doubling up on bottom margins of elements plus bottom padding of modules. http://css-tricks.com/spacing-the-bottom-of-modules/
.module > *:last-child,
.module > *:last-child > *:last-child,
.module > *:last-child > *:last-child > *:last-child {
margin: 0;
}