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@2.2.3 --save

      

yarn add shido@2.2.3

      

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@^2.2.3/dist/css/shido.min.css" rel="stylesheet">

      

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

      

Download

You can also traditionally download latest files from Github:

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";

      

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 can generate a configuration file for your project for example shido-custom.less and set new values for default variables.

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

// Layout
@s-body-background-color: #fff;
@s-body-font-color:       #000;
@s-headers-font-color:    #000;
@s-body-font-family:      "Your font here", -apple-system, BlinkMacSystemFont, "Segoe UI", "Source Sans Pro", Oxygen, sans-serif;
@s-headers-font-family:   "Your font here", -apple-system, BlinkMacSystemFont, "Segoe UI", "Source Sans Pro", Oxygen, sans-serif;
@s-main-link-color:       #2196F3;
@s-main-link-color-hover: #1565C0;

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

// Marging & Padding
@s-max-margin:  8; // x10
@s-max-padding: 8; // x10