Usage

Color variables

If you're install via npm or yarn and using postcss-import or a tool that uses it such as Webpack or Gulp, you can use color variables to quickly stylize your project, by default color variables are included but you can also declare your own variables.

Color variables start with the prefix c for example @c-pink-400

Color variables start with the prefix c for example $c-pink-400

This is an example of how to use the default variables, just choose a color and you're done.


.container {
  background-color: @c-grey-200;
  color: @c-blue-600;
}

    

.container {
  background-color: $c-grey-200;
  color: $c-blue-600;
}

Custom variables

You can declare your own color variables using existing variables or using different color codes.


@c-grey-light: @c-grey-300;
@c-grey:       @c-grey-500;
@c-grey-dark:  @c-grey-700;

// Or

@c-grey-light: #F5F5F5;
@c-grey:       #BDBDBD;
@c-grey-dark:  #757575;

    

.container {
  background-color: @c-grey-light;
  color: @c-grey-dark;
}

    

$c-grey-light: $c-grey-300;
$c-grey:       $c-grey-500;
$c-grey-dark:  $c-grey-700;

// Or

$c-grey-light: #F5F5F5;
$c-grey:       #BDBDBD;
$c-grey-dark:  #757575;

    

.container {
  background-color: $c-grey-light;
  color: $c-grey-dark;
}

Color classes

These classes are in the final css so you can use them even if you only included the CDN. If you want to have the color palette directly in your html, Shido has two prefixes that you can use: bg- and c-, all you have to do is choose a color.


<div class="bg-teal-500 x:pad-all-5">
  <p class="c-cyan-50 x:center">Hello world</p>
</div>

Hello world

Custom classes

The following mixins are always available in shido. You don't need to include the color file to be able to use them.

You can generate your own kinds of colors and backgrounds using the color mixin, just choose a color and the class name.


.mix-bg-class(#9c27b0, my-custom-background);
.mix-color-class(#ffecb3, my-custom-color);

    

@include mix-bg-class(#9c27b0, my-custom-background);
@include mix-color-class(#ffecb3, my-custom-color);

    

<div class="bg-my-custom-background">
  <p class="c-my-custom-color">Hello world</p>
</div>

You can also generate both classes at the same time using the following mixin.


.mix-bg-color-class(#ffb300, my-custom-bg-and-color);

    

@include mix-bg-color-class(#ffb300, my-custom-bg-and-color);

    

<div class="bg-my-custom-bg-and-color">
  <p class="c-my-custom-bg-and-color">Hello world</p>
</div>