bootstrap-flat-theme v1.0.1

Bootstrap Flat Theme

A Bootstrap theme, modified to have a flat look with larger buttons and other elements.

Bootstrap Flat Theme is a Bootstrap theme for the react-boostrap-starterkit.

Referencing

Adding to the Starter Kit (or any kit) is straightforward... reference the files in the module directly.

  /node_modules
    /dist
      bootstrap-flat-theme.min.css
      bootstrap-flat-theme-variables.css

For the theme file, add the import to index.js: import 'bootstrap-flat-theme/dist/bootstrap-flat-theme.min.css'; This allows keeping the Bootstrap Flat Theme from being moved up into the app directory(s) and allows for parsing separate from the other style files.

In the main app styles file, add an @import 'bootstrap-flat-theme/dist/bootstrap-flat-theme-variables.css'; to the top of the file to import the variables so the app can access those variables in it's CSS, if necessary. This can be skipped if the bootstrap flat theme variables aren't needed or used.

See the StarterKit for implementation example.

Alternative Reference Method

In your webpack configuration file, add the following alias:

  resolve: {
    alias: {
      'bootstrap-flat-theme': path.join(__dirname, 'node_modules', 'bootstrap-flat-theme', 'dist', 'bootstrap-flat-theme.min.css'),
      ...
    },
    ...
  }

Now, import the theme in index.js: import 'bootstrap-flat-theme';

Useage

PostCSS and cssnext is being used to parse the theme files. A list of all the available variables and descriptions is available.

Please see the Bootstrap Flat Theme Variables page for more details.

Optional

Import object available for file references.

var bootstrapflat = require('bootstrap-flat-theme');

or, in ES6

import bootstrapflat from 'bootstrap-flat-theme';

Returns the object:

{
  'path': 'dist',
  'min' : 'bootstrap-flat-theme.min.css',
  'vars': 'bootstrap-flat-theme-variables.css'
}