101 lines
5.1 KiB
Markdown
101 lines
5.1 KiB
Markdown
|
# Using Red Hat Common User Experience (RCUE) - Guide to move from PatternFly to RCUE
|
||
|
|
|
||
|
|
RCUE is based on [PatternFly](https://www.patternfly.org/), which is based on [Bootstrap v3](http://getbootstrap.com/). Think of RCUE as a "skinned" version of PatternFly. **RCUE is meant to be used as a replacement for PatternFly**, so please don't include the PatternFly (or Bootstrap) CSS if you are including the RCUE CSS in your project.
|
||
|
|
|
||
|
|
This guide will walk the steps to go from a PatternFly to RCUE styles:
|
||
|
|
|
||
|
|
## 1. Installation
|
||
|
|
|
||
|
|
### Get RCUE
|
||
|
|
|
||
|
|
RCUE can be installed and managed through [NPM](https://www.npmjs.com/). To do so, either add `rcue` as a dependency in your `package.json` or run the following:
|
||
|
|
|
||
|
|
```
|
||
|
|
npm install rcue --save
|
||
|
|
```
|
||
|
|
|
||
|
|
### What's Included
|
||
|
|
|
||
|
|
Within the `node_module/rcue/dist` folder you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
|
||
|
|
|
||
|
|
```
|
||
|
|
rcue/
|
||
|
|
├── dist/
|
||
|
|
│ ├── css/
|
||
|
|
│ │ │── rcue.min.css (* need to include)
|
||
|
|
│ │ │── rcue-additions.min.css (* need to include)
|
||
|
|
│ └── img/
|
||
|
|
│ │ │── branding materials and loading indicators
|
||
|
|
├── less/
|
||
|
|
│ ├── variables, mixin, and component Less files (may need to include if you want to customize the already built CSS)
|
||
|
|
└── tests/
|
||
|
|
├── example markup source files
|
||
|
|
```
|
||
|
|
|
||
|
|
RCUE provides compiled CSS (`rcue.*`), as well as compiled and minified CSS (`rcue.min.*`). CSS [source maps](https://developer.chrome.com/devtools/docs/css-preprocessors) (`rcue.*.map`) are available for use with certain browsers' developer tools.
|
||
|
|
|
||
|
|
## 2. Replace PatternFly with RCUE
|
||
|
|
Look for the PatternFly folder on your project and replace it with the RCUE folder you've just downloaded.
|
||
|
|
|
||
|
|
This swap will break your project paths, but don't worry! it's an easy fix we will discuss later on.
|
||
|
|
|
||
|
|
## 3. Using RCUE In Your Application
|
||
|
|
|
||
|
|
Your last task is to change the paths of your project and point them to the new RCUE folder.
|
||
|
|
|
||
|
|
1. Add the following CSS includes to your HTML file(s), adjusting path where needed:
|
||
|
|
|
||
|
|
<!-- RCUE Styles -->
|
||
|
|
<!-- Note: No other CSS files are needed regardless of what other JS packages you decide to pull in -->
|
||
|
|
<link rel="stylesheet" href="PATH-TO/node_modules/rcue/dist/css/rcue.min.css" />
|
||
|
|
<link rel="stylesheet" href="PATH-TO/node_modules/rcue/dist/css/rcue-additions.min.css" />
|
||
|
|
|
||
|
|
2. Add the following script includes to your HTML file(s), adjusting where necessary to pull in only what you need:
|
||
|
|
|
||
|
|
<!-- jQuery -->
|
||
|
|
<script src="PATH-TO/node_modules/rcue/node_modules/jquery/dist/jquery.js"></script>
|
||
|
|
|
||
|
|
<!-- Bootstrap JS -->
|
||
|
|
<script src="PATH-TO/node_modules/rcue/node_modules/bootstrap/dist/js/bootstrap.js"></script>
|
||
|
|
|
||
|
|
<!-- C3, D3 - Charting Libraries -->
|
||
|
|
<script src="PATH-TO/node_modules/rcue/node_modules/c3/c3.min.js"></script>
|
||
|
|
<script src="PATH-TO/node_modules/rcue/node_modules/d3/d3.min.js"></script>
|
||
|
|
|
||
|
|
<!-- Datatables, jQuery Grid Component -->
|
||
|
|
<!-- Note: jquery.dataTables.js must occur in the html source before patternfly*.js.-->
|
||
|
|
<script src="PATH-TO/node_modules/rcue/node_modules/datatables/media/js/jquery.dataTables.js"></script>
|
||
|
|
<script src="PATH-TO/node_modules/rcue/node_modules/drmonty-datatables-colvis/js/dataTables.colVis.js"></script>
|
||
|
|
<script src="PATH-TO/node_modules/rcue/node_modules/datatables.net-colreorder/js/dataTables.colReorder.js"></script>
|
||
|
|
|
||
|
|
<!-- Patternfly Custom Componets - Sidebar, Popovers and Datatables Customizations -->
|
||
|
|
<!-- Note: jquery.dataTables.js must occur in the html source before patternfly*.js.-->
|
||
|
|
<script src="PATH-TO/node_modules/rcue/dist/js/patternfly.js"></script>
|
||
|
|
|
||
|
|
<!-- Bootstrap Date Picker -->
|
||
|
|
<script src="PATH-TO/node_modules/rcue/node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
|
||
|
|
|
||
|
|
<!-- Bootstrap Combobox -->
|
||
|
|
<script src="PATH-TO/node_modules/rcue/node_modules/patternfly-bootstrap-combobox/js/bootstrap-combobox.js"></script>
|
||
|
|
|
||
|
|
<!-- Bootstrap Select -->
|
||
|
|
<script src="PATH-TO/node_modules/rcue/node_modules/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
|
||
|
|
|
||
|
|
<!-- Bootstrap Tree View -->
|
||
|
|
<script src="PATH-TO/node_modules/rcue/node_modules/patternfly-bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
|
||
|
|
|
||
|
|
<!-- Google Code Prettify - Syntax highlighting of code snippets -->
|
||
|
|
<script src="PATH-TO/node_modules/rcue/node_modules/google-code-prettify/bin/prettify.min.js"></script>
|
||
|
|
|
||
|
|
<!-- MatchHeight - Used to make sure dashboard cards are the same height -->
|
||
|
|
<script src="PATH-TO/node_modules/rcue/node_modules/jquery-match-height/dist/jquery.matchHeight.js"></script>
|
||
|
|
|
||
|
|
<!-- Angular Application? You May Want to Consider Pulling Angular-Patternfly And Angular-UI Bootstrap instead of bootstrap.js -->
|
||
|
|
<!-- See https://github.com/patternfly/angular-patternfly for more information -->
|
||
|
|
|
||
|
|
## 6. Enjoy
|
||
|
|
|
||
|
|
You are done :smile:
|
||
|
|
|
||
|
|
If you have any question please contact [the UXD team](mailto:uxd-team@redhat.com).
|