Category: CSS

Media Query Mixins using SASS for Bootstrap 4 and understanding responsiveness approaches
April 8th, 2018 Bootstrap 71 views

CSS frameworks like Bootstrap 4 comes with very powerful responsiveness utilities but some people(like me) still prefer using their own media queries to create stylesheets in place of using that framework’s own SASS mixins. To use Bootstrap 4’s SASS mixins, you have to include the whole bootstrap SASS package into your main SASS file. Some […]

Read more  
Some useful SASS Mixins
December 25th, 2015 CSS 1,166 views

Alright, Time to post something useful as lately I have become the lazy blogger 🙂 . Here is a couple of useful SASS mixins that I always use on the websites that I design. Size

Sass
1
2
3
4
@mixin size($width, $height: $width) {
      width: $width;
      height: $height;
}

Clearfix

Sass
1
2
3
4
5
6
7
8
9
10
@mixin clearfix() {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

Absolute Position

Sass
1
2
3
4
5
6
7
@mixin abs-pos($top: auto, $right: auto, $bottom: auto, $left: auto) {
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
  position: absolute;
}

Border Radius

Sass
1
2
3
4
5
6
7
8
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
       -o-border-radius: $radius;
          border-radius: $radius;
  background-clip: padding-box;
}

Background Gradient

Sass
1
2
3
4
5
6
7
8
9
10
@mixin background-gradient($startColor: #3C3C3C, $endColor: #999999) {
    background-color: $startColor;
    background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
    background-image: -webkit-linear-gradient(top, $startColor, $endColor);
    background-image:    -moz-linear-gradient(top, $startColor, $endColor);
    background-image:     -ms-linear-gradient(top, $startColor, $endColor);
    background-image:      -o-linear-gradient(top, $startColor, $endColor);
    background-image:         linear-gradient(top, $startColor, $endColor);
    filter:            progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}');
}

Box Shadow

Sass
1
2
3
4
5
6
7
8
9
10
11
@mixin box-shadow($x: 2px, $y: 2px, $blur: 5px, $color: rgba(0,0,0,.4), $inset: "") {
  @if ($inset != "") {
    -webkit-box-shadow: $inset $x $y $blur $color;
    -moz-box-shadow:    $inset $x $y $blur $color;
    box-shadow:         $inset $x $y $blur $color;
  } @else {
    -webkit-box-shadow: $x $y $blur $color;
    -moz-box-shadow:    $x $y $blur $color;
    box-shadow:         $x $y $blur $color;
  }
}

Text Shadow

Sass
1
2
3
@mixin text-shadow($x: 2px, $y: 2px, $blur: 5px, $color: rgba(0,0,0,.4)) {
    text-shadow: $x $y $blur $color;
}

Transition Animation

Sass
1
2
3
4
5
6
7
@mixin transition($what: all, $length: 1s, $easing: ease-in-out) {
    -moz-transition:    $what $length $easing;
    -o-transition:      $what $length $easing;
    -webkit-transition: $what $length $easing;
    -ms-transition:     $what $length $easing;
    transition:         $what $length $easing;
}

Hope […]

Read more  

Hello! I am Aslam Doctor

I am a freelance web developer and a father from the country full of colors – India. And please, I am not a Doctor – it is just my surname as I come from a family of doctors.

What will I be writting on this blog?

Most of the time I will be writing about my daily life experience in freelance, problems and solutions on the skills I know from different categories which are PHP, Apache, MySQL, WordPress, Bootstrap, jQuery…

Read about me: Here
Contact me: Here

Thank You!

Rearrange Woocommerce Products Plugin


Rearrange Woocommerce Products is a plugin that allows you to rearrange/reorder the default sort order of the products on Woocommerce Shop Page. This is very easy to use plugin with “drag & drop” functionality to rearrange the products.

My Workplace

Copyright © Aslam Doctor · Freelance Web Developer ·