@talend/bootstrap-theme
v9.3.0
Published
Bootstrap theme based on Talend styleguide
Downloads
3,234
Maintainers
Readme
Talend Bootstrap Theme
Base theme following Talend Style Guidelines.
Note: The example has been taken from the excellent project Bootstwatch.
Docs & Help
How to use
Install dependency
npm install --save @talend/bootstrap-heme
or
yarn add --dev @talend/bootstrap-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 '~@talend/bootstrap-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!@talend/bootstrap-theme/dist/bootstrap.css';
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.