@notainc/tatami

tatami

Tatami is Nota's fork of Bootstrap 3. Specialized modern web app UI. Support touch and mouse inputs. https://nota-tatami.herokuapp.com/

Installation

$ npm install @notainc/tatami

Configuration

Sass

By default all of Bootstrap is imported.

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

@import 'bootstrap-custom';

Sass: Number Precision

bootstrap-sass requires minimum [Sass number precision][sass-precision] of 8 (default is 5).

Precision is set for Rails and Compass automatically. When using Ruby Sass compiler standalone or with the Bower version you can set it with:

::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max

Sass: Autoprefixer

Bootstrap requires the use of [Autoprefixer][autoprefixer]. [Autoprefixer][autoprefixer] adds vendor prefixes to CSS rules using values from Can I Use.

To match upstream Bootstrap's level of browser compatibility, set Autoprefixer's browsers option to:

[
  "Android 2.3",
  "Android >= 4",
  "Chrome >= 20",
  "Firefox >= 24",
  "Explorer >= 8",
  "iOS >= 6",
  "Opera >= 12",
  "Safari >= 6"
]

JavaScript

assets/javascripts/bootstrap.js contains all of Bootstrap's JavaScript, concatenated in the correct order.

JavaScript with Sprockets or Mincer

If you use Sprockets or Mincer, you can require bootstrap-sprockets instead to load the individual modules:

// Load all Bootstrap JavaScript
//= require bootstrap-sprockets

You can also load individual modules, provided you also require any dependencies. You can check dependencies in the [Bootstrap JS documentation][jsdocs].

//= require bootstrap/scrollspy
//= require bootstrap/modal
//= require bootstrap/dropdown

Adjustments for focus and hover states

Tatami also depends on the library @notainc/mouse-hover-visible and @notainc/key-focus-visible. These libraries realize behavior like native application about the point of hover and foucs states. To activate them, import or require in your main javascript file.

import '@notainc/mouse-hover-visible'
import '@notainc/key-focus-visible'

Iconography

We recommend to use the icon set named kamon. Each components in tatami are adjusted for kamon icons.

Usage

Sass

Import Bootstrap into a Sass file (for example, application.scss) to get all of Bootstrap's styles, mixins and variables!

@import "bootstrap";

You can also include optional Bootstrap theme:

@import "bootstrap/theme";

The full list of Bootstrap variables can be found here. You can override these by simply redefining the variable before the @import directive, e.g.:

$navbar-default-bg: #312312;
$light-orange: #ff8c00;
$navbar-default-color: $light-orange;

@import "bootstrap";

Eyeglass

Bootstrap is available as an Eyeglass module. After installing Bootstrap via NPM you can import the Bootstrap library via:

@import "tatami/bootstrap"

or import only the parts of Bootstrap you need:

@import "tatami/bootstrap/variables";
@import "tatami/bootstrap/mixins";
@import "tatami/bootstrap/carousel";