Installation

Shido is easy to install, after creating your application you can include the package with the following methods.

Install via npm or yarn

To take advantage of the customization features, the best way to install Shido is via npm or yarn, this installation method guarantees a trouble-free use with bundlers like Webpack.


npm i shido --save

      

yarn add shido

Install via CDN

Before using CDN compilation, keep in mind that the customization of variables are not available without incorporating Shido in your build process.


<link href="https://unpkg.com/shido@^3.0.8/dist/css/shido.min.css" rel="stylesheet">

      

<link href="https://cdn.jsdelivr.net/npm/shido@^3.0.8/dist/css/shido.min.css" rel="stylesheet">

Download

You can also traditionally download latest files from Github:

Download latest release

Add to your project

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 @import to add it directly to your build process.


@import  "~shido/src/less/shido";

      

@import  "~shido/src/sass/shido";

Or if you prefer you can only include the css file.


@import  "~shido/dist/css/shido.min.css";

Customize your project

If you want to customize your Shido installation, you just have to overwrite default variables with new values for your project. I recommend you only modify the variables below but if you want to know more see How it works

To overwrite variables in Less, simply declare the variable with a new value after the first definition. You can see more here


// First import Shido
@import  "~shido/src/less/shido";

// Then declare new values ​​for variables you want to modify
@s-body-background-color: #fff;
@s-body-font-color:       #000;
@s-headings-font-color:   #000;
@s-main-link-color:       #2196F3;
@s-main-link-color-hover: #1565C0;
@s-body-font-size:        16;
@s-body-font-family:      -apple-system, BlinkMacSystemFont, "Segoe UI", "Source Sans Pro", Oxygen, sans-serif;
@s-headings-font-family:  -apple-system, BlinkMacSystemFont, "Segoe UI", "Source Sans Pro", Oxygen, sans-serif;

@s-min-font-size: 10;
@s-max-font-size: 60;

@s-max-margin:  80;
@s-max-padding: 80;

To easily overwrite Sass variables, simply declare the variable with a new value before the original definition, but if you want to do it differently you can see more here.


// First declare new values ​​for variables you want to modify
$s-body-background-color: #fff;
$s-body-font-color:       #000;
$s-headings-font-color:   #000;
$s-main-link-color:       #2196F3;
$s-main-link-color-hover: #1565C0;
$s-body-font-size:        16;
$s-body-font-family:      -apple-system, BlinkMacSystemFont, "Segoe UI", "Source Sans Pro", Oxygen, sans-serif;
$s-headings-font-family:  -apple-system, BlinkMacSystemFont, "Segoe UI", "Source Sans Pro", Oxygen, sans-serif;

$s-min-font-size: 10;
$s-max-font-size: 60;

$s-max-margin:  80;
$s-max-padding: 80;

// Then import Shido
@import  "~shido/src/sass/shido";