Tabler Ruby Gem

Tabler ruby gem for Ruby on Rails.

Installation

Please see the appropriate guide for your environment of choice:

• Ruby on Rails 4+ or other Sprockets environment.
• Other Ruby frameworks not on Rails.

a. Ruby on Rails

v0.1.4 BREAKING CHANGE:

Images are no longer included by default. Instead, you can include all the image sets or the specific image sets you want (either browser, flag, and/or payments). Read below for more info on how to do this.

Add bootstrap and tabler-rubygem to your Gemfile:

gem 'bootstrap', '~> 4.1.1'
gem 'tabler-rubygem'

Ensure that sprockets-rails is at least v2.3.2.

bundle install and restart your server to make the files available through the pipeline.

Import Tabler styles and optionally Tabler Plugin styles and icons in app/assets/stylesheets/application.scss:

// Custom tabler variables must be set or imported *before* bootstrap and tabler.
@import "tabler/variables";
@import "bootstrap";
@import "tabler";
@import "tabler.plugins"; // optional
@import "tabler.icons"; // optional includes [browser, flag, payments]

The available variables can be found here.
Tabler plugins includes the css files for the javascripts found here.

You can also choose to include plugin css on a per-plugin basis, for example:

// Custom tabler variables must be set or imported *before* tabler.
@import "tabler/variables";
@import "bootstrap";
@import "tabler";
@import "tabler/plugins/charts-c3/plugin.scss";

or include icons css per type, for example:

// Custom tabler variables must be set or imported *before* tabler.
@import "tabler/variables";
@import "bootstrap";
@import "tabler";
@import "tabler/icons/flag";

Make sure the file has .scss extension (or .sass for Sass syntax). If you have just generated a new Rails app, it may come with a .css file instead. If this file exists, it will be served instead of Sass, so rename it:

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

Then, remove all the *= require and *= require_tree statements from the Sass file. Instead, use @import to import Sass files.

Do not use *= require in Sass or your other stylesheets will not be able to access the Tabler mixins and variables.

Add Tabler and optionally Tabler Plugins to your application.js:

//= require tabler
//= require tabler.plugins

Tabler already includes jQuery and Bootstrap javascript.
Tabler plugins includes the javascripts found here.

If you already include jQuery in your project, you can include tabler's js on a per-file basis to avoid conflicts:

// = require tabler/tabler
// = require tabler/vendors/bootstrap.bundle.min
// = require tabler/vendors/circle-progress.min
// = require tabler/vendors/jquery.sparkline.min
// = require tabler/core

You can also choose to include plugin js on a per-plugin basis, for example:

//= require tabler
//= require tabler/plugins/charts-c3/js/d3.v3.min
//= require tabler/plugins/charts-c3/js/c3.min

b. Other Ruby frameworks

If your framework uses Sprockets or Hanami, the assets will be registered with Sprockets when the gem is required, and you can use them as per the Rails section of the guide.

Otherwise you may need to register the assets manually. Refer to your framework's documentation on the subject.

Configuration

Sass: Autoprefixer

Tabler requires the use of Autoprefixer. Autoprefixer adds vendor prefixes to CSS rules using values from Can I Use.

If you are using tabler with Rails, autoprefixer is set up for you automatically. Otherwise, please consult the Autoprefixer documentation.

Sass: Individual components

By default all of Tabler is imported.

You can also import components explicitly. To start with a full list of modules copy _tabler.scss file into your assets as _tabler-custom.scss. Then comment out components you do not want from _tabler-custom. In the application Sass file, replace @import 'tabler' with:

@import 'tabler-custom';