bootstrap-talend-theme

Talend Bootstrap Theme

Base theme following Talend Style Guidelines.

Note: The example has been taken from the excellent project Bootstwatch.

Docs & Help

• Example page
• Sass Api

How to use

Install dependency

npm install --save bootstrap-talend-theme

or

yarn add --dev bootstrap-talend-theme

Configure your project

In every project, we use webpack with sass-loader + css modules.

Create your webpack file and fill it with your own configuration. You should at least just change the $brand-primary first to get your own colors;

const SASS_DATA = `
  $brand-primary: #77828A;
  @import '~bootstrap-talend-theme/src/theme/guidelines';
`;
 
module.exports = {
    plugins: [
        // your custom plugins
    ],
    module: {
        loaders: [
            {
                test: /\.scss$/,
                exclude: /bootstrap.scss/,
                loaders: ['style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass'],
            },
        ],
    },
    sassLoader: {
        data: SASS_DATA,
    },
};

and in your app you can do the following

import '!style!css!sass!bootstrap-talend-theme/src/theme/theme.scss';

sassLoader data is a sassLib params which inject the content on every @import directive.

You can now add Bootstrap markup!

How to contribute

yarn && yarn start

Open http://localhost:1337/ to see your changes.