❤
npm
Sign UpSign In

This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

fabric8-pattern.library

2.0.0 • Public • Published

Build Status semantic-release GitHub version

fabric8-pattern.library

A pattern library for the fabric8 UI project.

Installation

  • npm install
  • gulp build
    • this runs gulp copy to copy the less dependencies into the styles directory, gulp less to compile to .less files into styles/css/fabric8.min.css and gulp dependencies to move the other dependent files into their respective locations.

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:

Using the @import from {{Less}}:

  • @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 the node_modules directory

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'))
});

Question?

If you have any questions or issues with this module, please file and issue on our GitHub page.

Readme

Keywords

none

Package Sidebar

Install

npm i fabric8-pattern.library

Repository

github.com/mindreeper2420/fabric8-pattern.library

Homepage

github.com/mindreeper2420/fabric8-pattern.library#readme

Weekly Downloads

1

Version

2.0.0

License

Apache-2.0

Last publish

Collaborators

  • mindreeper2420
Try on RunKit
Report malware