Skip to content

Instantly share code, notes, and snippets.

@benlwilliams
Created February 4, 2014 21:49
Show Gist options
  • Save benlwilliams/8813049 to your computer and use it in GitHub Desktop.
Save benlwilliams/8813049 to your computer and use it in GitHub Desktop.
.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; }
.clearfix, %clearfix { @include clearfix; }
.text-left, %text-left { text-align: left !important; }
.text-right, %text-right { text-align: right !important; }
.text-center, %text-center { text-align: center !important; }
.text-justify, %text-justify { text-align: justify !important; }
.hide { display: none; }
// use the above classes if you want it to apply to everything (tiny up).
// use the below mixin for overriding as the screen grows in width.
@mixin responsive-helpers($size-up, $size) {
@media #{$size-up} {
.#{$size}-left { float: left !important; }
.#{$size}-right { float: right !important; }
.#{$size}-clear { clear: both !important; }
.#{$size}-clear-left { clear: left !important; }
.#{$size}-clear-right { clear: right !important; }
.#{$size}-clearfix { @include clearfix; }
.#{$size}-text-left { text-align: left !important; }
.#{$size}-text-right { text-align: right !important; }
.#{$size}-text-center { text-align: center !important; }
.#{$size}-text-justify { text-align: justify !important; }
.#{$size}-hide { display: none; }
}
}
@include responsive-helpers($small-up, small);
@include responsive-helpers($medium-up, medium);
@include responsive-helpers($large-up, large);
@include responsive-helpers($xlarge-up, xlarge);
@include responsive-helpers($xxlarge-up, xxlarge);
// @mixin
// Padding and Margin adjustments.
// $type: "padding" or "margin".
// $sizes: the different size names used --> tiny, small, medium, large
// $adjust: the base number used for adjustments to margins and paddings
@mixin layout-adjustments($types, $sizes, $adjust: rem-calc(20)) {
@each $type in $types {
@each $size in $sizes {
$multiplier: null;
@if $size == tiny { $multiplier: $tiny-multiplier; }
@if $size == small { $multiplier: $small-multiplier; }
@if $size == medium { $multiplier: $default-multiplier; }
@if $size == large { $multiplier: $large-multiplier; }
@if $type == margin {
.margin-pull-up-#{$size} { margin-top: -$adjust * $multiplier; }
.margin-pull-right-#{$size} { margin-right: -$adjust * $multiplier; }
.margin-pull-down-#{$size} { margin-bottom: -$adjust * $multiplier; }
.margin-pull-left-#{$size} { margin-left: -$adjust * $multiplier; }
} // end @if $type == margin
.#{$type}-top-#{$size} { #{$type}-top: $adjust * $multiplier; }
.#{$type}-right-#{$size} { #{$type}-right: $adjust * $multiplier; }
.#{$type}-bottom-#{$size} { #{$type}-bottom: $adjust * $multiplier; }
.#{$type}-left-#{$size} { #{$type}-left: $adjust * $multiplier; }
.#{$type}-horiz-#{$size} { #{$type}-top: $adjust * $multiplier;
#{$type}-bottom: $adjust * $multiplier; }
.#{$type}-vert-#{$size} { #{$type}-left: $adjust * $multiplier;
#{$type}-right: $adjust * $multiplier; }
.#{$type}-all-#{$size} { #{$type}: $adjust * $multiplier; }
} // end @each $size in $sizes
} // end @each $type in $types
}
@include layout-adjustments((margin padding), (tiny small medium large));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment