Background Dots

Type: Mixin

@include background-dots();

* You can call mixins with or without gls- namespace (e.g. @include gls-background-dots();).

Background Dots Sass mixin allows you to easily create a stylish dotted background pattern (also known as polka dots).

Github Source Code

Arguments

Name	Type	Description
`$color`	`list`	The color(s) of the dots. Accepts not more than two color values. The default there is only one color and is set to opaque black.
`$size (1em)`	`number (with unit)`	The size of the dots. The default value is set to 1em.
`$gutter ($size * 5)`	`number (with unit)`	The size of the space between the dots. The default value is set to `$size * 5` which means 5em.
`$diagonal (true)`	`boolean`	This option allows you to set line order of the dots. Default value is true.
`$image`	`string (quoted)`	Accepts a URL of an image. This option helps you to add an image underneath the dots to create more stylish design elements.

* Using two separate color values together only possible when the $diagonal option is true. For more see the examples.

Examples

Simply call the mixin without passing any arguments.

.element{
  @include background-dots;
}

//CSS Output
.element {
  background-image: 
    radial-gradient(rgba(0, 0, 0, 0.1) 1em, transparent 0), 
    radial-gradient(rgba(0, 0, 0, 0.1) 1em, transparent 0);
  background-position: 2.5em 2.5em, 10em 10em;
  background-size: 5em 5em;
  background-repeat: repeat;
}

Let’s play with the $color and the $size properties of the dots.

.element{
  @include background-dots(
    $color: pink,
    $size: 10px
  );
}

//CSS Output
.element {
  background-image:
    radial-gradient(pink 10px, transparent 0), 
    radial-gradient(pink 10px, transparent 0);
  background-position: 25px 25px, 100px 100px;
  background-size: 50px 50px;
  background-repeat: repeat;
}

You can increase or decrease the space between the dots. Compare the result with the example 2.

.element{
  @include background-dots(
    $color: pink,
    $size: 10px,
    $gutter: 70px
  );
}

//CSS Output
.element {
  background-image: 
    radial-gradient(pink 10px, transparent 0), 
    radial-gradient(pink 10px, transparent 0);
  background-position: 35px 35px, 140px 140px;
  background-size: 70px 70px;
  background-repeat: repeat;
}

You can add a second color value as well. Note that the second color works only when $diagonal property is true and must be separated by space.

.element{
  @include background-dots(
    $color: red orange,
    $size: 10px
  );
}

//CSS Output
.element {
  background-image: 
    radial-gradient(red 10px, transparent 0), 
    radial-gradient(orange 10px, transparent 0);
  background-position: 25px 25px, 100px 100px;
  background-size: 50px 50px;
  background-repeat: repeat;
}

Set the $diagonal property to false to make the dots look more linear.

.element{
  @include background-dots(
    $color: red,
    $size: 4px,
    $diagonal: false
  );
}

//CSS Output
.element {
  background-image: radial-gradient(red 4px, transparent 0);
  background-position: 10px 10px;
  background-size: 20px 20px;
  background-repeat: repeat;
}

Now let’s add an image and see how sexy this design piece will look!

.element{
  @include background-dots(
    $color: rgba(black, 0.1) rgba(green, 0.2),
    $size: 4px,
    $gutter: 20px,
    $image: "/images/backgrounds/03.jpg"
  );
}

//CSS Output
.element {
  background-image: 
    radial-gradient(rgba(0, 0, 0, 0.1) 4px, transparent 0), 
    radial-gradient(rgba(0, 128, 0, 0.2) 4px, transparent 0);
  background-position: 10px 10px, 40px 40px;
  background-size: 20px 20px;
  background-repeat: repeat;
  position: relative;
}
.element::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url("/images/backgrounds/03.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: -1;
}