Initial Files
This commit is contained in:
100
common/resources/node_modules/rcue/QUICKSTART.md
generated
vendored
Normal file
100
common/resources/node_modules/rcue/QUICKSTART.md
generated
vendored
Normal file
@@ -0,0 +1,100 @@
|
||||
# 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).
|
||||
Reference in New Issue
Block a user