GitHub

Custom version

You can customize your version of ridestyler.ui by editing Sass files in /src directory or removing unneeded components from .scss source files.

Sass Source Code

Compiling CSS

ridestyler.ui uses Gulp for compiling CSS. Firstly you need to install NPM, which is used to manage Gulp and other dependencies.

Then, you can build the CSS file from the command line:

  1. Navigate to the root directory of ridestyler.ui.
  2. Run npm install. NPM will install all dev dependencies as listed in package.json.
  3. When completed, run gulp build task to compile Sass to CSS and minify files.
  4. You can find compiled CSS files in /dist directory.

All available Gulp tasks:

  • gulp build - compile both the CSS and documentation
  • gulp scss - compile just the CSS
  • gulp docs - compile just the documentation
  • gulp fonts - compile the icon font
  • gulp watch - watch file changes and re-compile CSS files and documentation as needed
  • gulp serve - start a web-server hosting the documentation; watch for file changes and live-reload as needed.

Importing SCSS

It is recommended to customize ridestyler.ui by importing SCSS source files to your projects. In this way, you can keep ridestyler.ui up to date without conflicts, since ridestyler.ui code and your custom code are separate.

  • First, create your own project and install ridestyler.ui via NPM or other package managers.
  • Then inside your on SCSS file override variables as needed and import ridestyler.ui
  • Compile the SCSS file to CSS to get the custom version of ridestyler.ui.
// Define variables to override default ones
$primary-color: #2e5bec;
$dark-color: #3e396b;

// Import full ridestyler.ui source code
@import "~ridestyler.ui";

Folder structure

ridestyler.ui/
├── dist/                           // Build folder
│   ├── rsui.css
│   ├── rsui.min.css
│   ├── rsui-icons.css              // Icons-only build
│   └── rsui-icons.min.css
│
├── docs/
│   ├── dist/                       // Pre-built CSS folder
│   │   ├── rsui.min.css
│   │   └── rsui-icons.min.css
│   ├── css/                        // Built docs CSS files
│   │   └── docs.css
│   ├── src/
│   │   ├── scss                    // Docs Sass files
│   │   │   └── docs.scss
│   │   ├── index.pug               // Docs Pug files
│   │   └── ...
│   ├── ../
│   ├── index.html
│   └── ...
│
├── src/                            // Source Sass files
│   ├── index.scss
│   ├── _mixins.scss
│   ├── _variables.scss
│   └── ...
│
├── gulpfile.js
├── package.json
└── ...

Variables

ridestyler.ui is designed with consistent design language. You can use your own variables to create your new or match existing design. All variables in _variables.scss include !default flag. You can redefine the variables to override the values.

Variables - Colors

$primary-color
$secondary-color
$success-color
$warning-color
$error-color
$dark-color
$gray-color
$ridestyler-color-orange
$ridestyler-color-black
$ridestyler-color-dark-gray
$ridestyler-color-gray
$ridestyler-color-red
$ridestyler-color-blue

Variables - Button mixins

There is a button variant mixin in _mixins.scss to generate different color variants.

  • @mixin button-variant($color: $primary-color);
<!-- filled button with the success color -->
.btn-success {
  @include button-variant($success-color);
}

Variables - Sizes

The default REM (root em) size in ridestyler.ui is .