do more with less code!
The need classes are like:
[css]
.margin-top-small { margin-top: $gutter-grid-width / 2; }
.margin-top-normal { margin-top: $gutter-grid-width; }
.margin-top-large { margin-top: $gutter-grid-width * 2; }
.margin-top-xlarge { margin-top: $gutter-grid-width * 3; }
.margin-bottom-small { margin-bottom: $gutter-grid-width / 2; }
.margin-bottom-normal { margin-bottom: $gutter-grid-width; }
.margin-bottom-large { margin-bottom: $gutter-grid-width * 2; }
.margin-bottom-xlarge { margin-bottom: $gutter-grid-width * 3; }
[/css]
and then we need some classes for specific mediaqueries
[css]
.margin-top-md-small, .margin-top-md-normal, .margin-top-md-large
.margin-top-sm-small, ...
.margin-top-xs-small, ...
[/css]
and so on, if you ask why, the answer is: we like to use those classes here and there in several projects to have a solid and common understanding of margins, especially used for separate content elements in a complex CMS like TYPO3 in a middle company with several developers.
[html]
<div class="margin-top-large margin-bottom-small">
[/html]
since the set is growing and i need also specific mediaquery classes I create a sass mixin to generate the whole set:
[css]
@mixin class-property-scale($classname, $property) {
$list: none, xsmall, small, large, xlarge, xxlarge;
$scale: 0, 1/3, 1/2, 1, 2, 3;
@for $i from 1 through length($list) {
.#{$classname}-#{nth($list, $i)} {
#{$property}: $grid-gutter-width * nth($scale, $i)
}
}
}
[/css]
and the usage is
[css]
// create a full set of margin padding for varius mediaqueries
// all devices
@include class-property-scale(mt, margin-top);
@include class-property-scale(mb, margin-bottom);
@include class-property-scale(pt, padding-top);
@include class-property-scale(pb, padding-bottom);
// only small screen
@media (max-width: $screen-sm-max) {
@include class-property-scale(mt-xs, margin-top);
@include class-property-scale(mb-xs, margin-bottom);
@include class-property-scale(pt-xs, padding-top);
@include class-property-scale(pb-xs, padding-bottom);
}
// tablets
@media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
@include class-property-scale(mt-sm, margin-top);
@include class-property-scale(mb-sm, margin-bottom);
@include class-property-scale(pt-sm, padding-top);
@include class-property-scale(pb-sm, padding-bottom);
}
// desktop
@media (min-width: $screen-md-min) {
@include class-property-scale(pr-md, padding-right);
@include class-property-scale(mt-md, margin-top);
@include class-property-scale(mb-md, margin-bottom);
@include class-property-scale(pt-md, padding-top);
@include class-property-scale(pb-md, padding-bottom);
}
[/css]
(instead of margin-top-large i used mt-large and mb-large)
and the result in my final css is :
[css]
.mt-none {
margin-top: 0
}
.mt-xsmall {
margin-top: 10px
}
.mt-small {
margin-top: 15px
}
.mt-large {
margin-top: 30px
}
.mt-xlarge {
margin-top: 60px
}
.mt-xxlarge {
margin-top: 90px
}
.mb-none {
margin-bottom: 0
}
.mb-xsmall {
margin-bottom: 10px
}
.mb-small {
margin-bottom: 15px
}
.mb-large {
margin-bottom: 30px
}
.mb-xlarge {
margin-bottom: 60px
}
.mb-xxlarge {
margin-bottom: 90px
}
.pt-none {
padding-top: 0
}
.pt-xsmall {
padding-top: 10px
}
.pt-small {
padding-top: 15px
}
.pt-large {
padding-top: 30px
}
.pt-xlarge {
padding-top: 60px
}
.pt-xxlarge {
padding-top: 90px
}
.pb-none {
padding-bottom: 0
}
.pb-xsmall {
padding-bottom: 10px
}
.pb-small {
padding-bottom: 15px
}
.pb-large {
padding-bottom: 30px
}
.pb-xlarge {
padding-bottom: 60px
}
.pb-xxlarge {
padding-bottom: 90px
}
@media (max-width: 1023px) {
.mt-xs-none {
margin-top:0
}
.mt-xs-xsmall {
margin-top: 10px
}
.mt-xs-small {
margin-top: 15px
}
.mt-xs-large {
margin-top: 30px
}
.mt-xs-xlarge {
margin-top: 60px
}
.mt-xs-xxlarge {
margin-top: 90px
}
.mb-xs-none {
margin-bottom: 0
}
.mb-xs-xsmall {
margin-bottom: 10px
}
.mb-xs-small {
margin-bottom: 15px
}
.mb-xs-large {
margin-bottom: 30px
}
.mb-xs-xlarge {
margin-bottom: 60px
}
.mb-xs-xxlarge {
margin-bottom: 90px
}
.pt-xs-none {
padding-top: 0
}
.pt-xs-xsmall {
padding-top: 10px
}
.pt-xs-small {
padding-top: 15px
}
.pt-xs-large {
padding-top: 30px
}
.pt-xs-xlarge {
padding-top: 60px
}
.pt-xs-xxlarge {
padding-top: 90px
}
.pb-xs-none {
padding-bottom: 0
}
.pb-xs-xsmall {
padding-bottom: 10px
}
.pb-xs-small {
padding-bottom: 15px
}
.pb-xs-large {
padding-bottom: 30px
}
.pb-xs-xlarge {
padding-bottom: 60px
}
.pb-xs-xxlarge {
padding-bottom: 90px
}
}
@media (min-width: 768px) and (max-width:1399px) {
.mt-sm-none {
margin-top:0
}
.mt-sm-xsmall {
margin-top: 10px
}
.mt-sm-small {
margin-top: 15px
}
.mt-sm-large {
margin-top: 30px
}
.mt-sm-xlarge {
margin-top: 60px
}
.mt-sm-xxlarge {
margin-top: 90px
}
.mb-sm-none {
margin-bottom: 0
}
.mb-sm-xsmall {
margin-bottom: 10px
}
.mb-sm-small {
margin-bottom: 15px
}
.mb-sm-large {
margin-bottom: 30px
}
.mb-sm-xlarge {
margin-bottom: 60px
}
.mb-sm-xxlarge {
margin-bottom: 90px
}
.pt-sm-none {
padding-top: 0
}
.pt-sm-xsmall {
padding-top: 10px
}
.pt-sm-small {
padding-top: 15px
}
.pt-sm-large {
padding-top: 30px
}
.pt-sm-xlarge {
padding-top: 60px
}
.pt-sm-xxlarge {
padding-top: 90px
}
.pb-sm-none {
padding-bottom: 0
}
.pb-sm-xsmall {
padding-bottom: 10px
}
.pb-sm-small {
padding-bottom: 15px
}
.pb-sm-large {
padding-bottom: 30px
}
.pb-sm-xlarge {
padding-bottom: 60px
}
.pb-sm-xxlarge {
padding-bottom: 90px
}
}
@media (min-width: 1024px) {
.pr-md-none {
padding-right:0
}
.pr-md-xsmall {
padding-right: 10px
}
.pr-md-small {
padding-right: 15px
}
.pr-md-large {
padding-right: 30px
}
.pr-md-xlarge {
padding-right: 60px
}
.pr-md-xxlarge {
padding-right: 90px
}
.mt-md-none {
margin-top: 0
}
.mt-md-xsmall {
margin-top: 10px
}
.mt-md-small {
margin-top: 15px
}
.mt-md-large {
margin-top: 30px
}
.mt-md-xlarge {
margin-top: 60px
}
.mt-md-xxlarge {
margin-top: 90px
}
.mb-md-none {
margin-bottom: 0
}
.mb-md-xsmall {
margin-bottom: 10px
}
.mb-md-small {
margin-bottom: 15px
}
.mb-md-large {
margin-bottom: 30px
}
.mb-md-xlarge {
margin-bottom: 60px
}
.mb-md-xxlarge {
margin-bottom: 90px
}
.pt-md-none {
padding-top: 0
}
.pt-md-xsmall {
padding-top: 10px
}
.pt-md-small {
padding-top: 15px
}
.pt-md-large {
padding-top: 30px
}
.pt-md-xlarge {
padding-top: 60px
}
.pt-md-xxlarge {
padding-top: 90px
}
.pb-md-none {
padding-bottom: 0
}
.pb-md-xsmall {
padding-bottom: 10px
}
.pb-md-small {
padding-bottom: 15px
}
.pb-md-large {
padding-bottom: 30px
}
.pb-md-xlarge {
padding-bottom: 60px
}
.pb-md-xxlarge {
padding-bottom: 90px
}
}
[/css]
don't worry the css is minified and gzipped via gulp at the end ;)
