Tag Archives: CSS

Sass mixin to generate a full set of classes with mediaqueries variants

Here we are, we need a full set of some specific classes, why don’t write a sass mixin for that?

do more with less code!

The need classes are like:

.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; }

and then we need some classes for specific mediaqueries

.margin-top-md-small, .margin-top-md-normal, .margin-top-md-large
.margin-top-sm-small, ...
.margin-top-xs-small, ...

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.

<div class="margin-top-large margin-bottom-small"> 

since the set is growing and i need also specific mediaquery classes I create a sass mixin to generate the whole set:

@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)
	   }
	}

}

and the usage is

// 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);
}

(instead of margin-top-large i used mt-large and mb-large)
and the result in my final css is :


.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
    }
}

don’t worry the css is minified and gzipped via gulp at the end 😉

bootstrap equal-height columns with flexbox ultimate solution for mobile safari and IE11

I’ve struggled a lot trying to use flexbox to create equal-height boxes.

As we know flexbox is not really well implemented expecially on mobile safari and IE11

The situation is the classical bootstrap with some columns with bootstrap classes

<div class="row eq-height">
	<div class="col-sm-6 col-md-4">bla bla bla</div>
	<div class="col-sm-6 col-md-4">bla bla bla</div>
	<div class="col-sm-6 col-md-4">bla bla blabla bla</div>
	<div class="col-sm-6 col-md-4">bla bla blabla bla blabla bla blabla bla bla</div>
	<div class="col-sm-6 col-md-4">bla<br /><br /> bla<br /> bla</div>
	<div class="col-sm-6 col-md-4">bla bla bla</div>
	<div class="col-sm-6 col-md-4">bla bla<br /> bla</div>
	<div class="col-sm-6 col-md-4">bla bla bla</div>
	<div class="col-sm-6 col-md-4">bla bla bla</div>
</div>

the sass css that solve my issues is:

.eq-height {
	@media (min-width:$screen-sm-min) {
		display: flex;
		flex-wrap: wrap;
	}


	& > [class*='col-'] {
		background-clip: content-box;
		@media (min-width:$screen-sm-min) {
			display: flex;
			flex-wrap: wrap;
			flex-direction: column; // FF 47-
			-webkit-flex-direction: row; // iOS safari
			-ms-flex-direction: column; // IE11
		}
	}

	&:before,
	&:after {
		@media (min-width:$screen-sm-min) {
			content: normal; // IE doesn't support `initial`
		}
	}
}

gulp + sass generate all browser prefixes but I added different flex-direction for different browsers on col-* classes. That’s my solution that do the magic on safari, chrome, firefox and IE11.

	flex-direction: column; // FF 47-
	-webkit-flex-direction: row; // iOS safari
	-ms-flex-direction: column; // IE11

How to quickly handle file extensions icons, only via CSS no JS no PHP

This is the quickest way to put different icons for downloadable files, via CSS, no JS or PHP needed.


  a.download-link:before{
    content: url('default.gif');
    margin-right: 6px;
    vertical-align: middle;
  }

  a.download-link[href$='.pdf']:before{
    content: url('pdf.gif');
  }

  a.download-link[href$='.doc']:before,
  a.download-link[href$='.rtf']:before,
  a.download-link[href$='.txt']:before  {
    content: url('doc.gif');
  }

  a.download-link[href$='.docx']:before {
    content: url('docx.gif');
  }

  a.download-link[href$='.xls']:before {
    content: url('xls.gif');
  }

  a.download-link[href$='.xlsx']:before  {
    content: url('xlsx.gif');
  }