fabric8-pattern.library
A pattern library for the fabric8 UI project.
Installation
npm install
gulp build
- this runs
gulp copy
to copy theless
dependencies into the styles directory,gulp less
to compile to.less
files intostyles/css/fabric8.min.css
andgulp dependencies
to move the other dependent files into their respective locations.
- this runs
Projects included with this module
Each of these modules is imported into the fabric8.less
file and included in the compiled fabric8.min.css
file.
Building into your project
To include fabric8-pattern.library in your project, include the following in your project:
@import
from {{Less}}:
Using the @import (reference) '/node_modules/fabric8-pattern.library/styles/less/fabric8.less';
- make sure the you are backing out to your root level so that you can reach the
fabric8.less
file in thenode_modules
directory
- make sure the you are backing out to your root level so that you can reach the
Using Webpack
This is somewhat specific to the fabric8-ui project, but can be modified to fit other projects.
- import the CSS in vendor.browser.ts
import '/node_modules/fabric8-pattern.library/styles/css/patternfly.min.css';
import '/node_modules/fabric8-pattern.library/styles/css/patternfly-additions.min.css';
import '/node_modules/fabric8-pattern.library/styles/css/fabric8.min.css';
- add the following to your
webpack.common.js
file:
{
loader: 'less-loader',
options: {
paths: [
path.resolve(__dirname, "../node_modules/fabric8-pattern.library/styles/dependencies"),
path.resolve(__dirname, "../node_modules/fabric8-pattern.library/styles/dependencies/patternfly/"),
path.resolve(__dirname, "../node_modules/fabric8-pattern.library/styles/dependencies/patternfly/bootstrap/less"),
path.resolve(__dirname, "../node_modules/fabric8-pattern.library/styles/dependencies/patternfly/font-awesome/less"),
],
sourceMap: true
}
}
- This sets the paths so that the
.less
imports will resolve properly.
Directly in HTML
Include the following files to build the pre-compiled fabric8-pattern.library CSS
<head>
<link href="node_modules/fabric8-pattern.library/styles/css/patternfly.min.css" rel="stylesheet">
<link href="node_modules/fabric8-pattern.library/styles/css/patternfly-additions.min.css" rel="stylesheet">
<link href="node_modules/fabric8-pattern.library/styles/css/fabric8.min.css" rel="stylesheet">
</head>
Using Gulp (WIP)
If you want to compile everything from the .less
files, add the following compilation task to your gulpfile.js
gulp.task('less', function () {
gulp.src('styles/less/fabric8.less')
.pipe(plumber())
.pipe(less({
paths: [ path.join('node_modules'),
path.join('styles/dependencies/patternfly/'),
path.join('styles/dependencies/patternfly/bootstrap/less'),
path.join('styles/dependencies/patternfly/font-awesome/less')],
}))
.pipe(minifyCSS())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('styles/css'))
});
- You will need the following dependencies installed:
Question?
If you have any questions or issues with this module, please file and issue on our GitHub page.