This reference implementation of RCUE is based on PatternFly, which is based on Bootstrap v3. 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.
Within the download 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/
├── components/
│ ├── third-party repos (may need to pull in additional JS includes based on usage, but no additional CSS includes are needed)
├── 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)
└── test-src/
├── example markup source files
RCUE provides compiled CSS (rcue.*
), as well as compiled and minified CSS (rcue.min.*
). CSS source maps (rcue.*.map
) are available for use with certain browsers' developer tools.
-
Add the follwing 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="dist/css/rcue.min.css" /> <link rel="stylesheet" href="dist/css/rcue-additions.min.css" />
-
Add the following script includes to your HTML file(s), adjusting where necessary to pull in only what you need:
<!-- jQuery --> <script src="components/patternfly/components/jquery/dist/jquery.js"></script> <!-- Bootstrap JS --> <script src="components/patternfly/components/bootstrap/dist/js/bootstrap.js"></script> <!-- C3, D3 - Charting Libraries --> <script src="components/patternfly/components/c3/c3.min.js"></script> <script src="components/patternfly/components/d3/d3.min.js"></script> <!-- Datatables, jQuery Grid Component --> <!-- Note: jquery.dataTables.js must occur in the html source before patternfly*.js.--> <script src="components/patternfly/components/datatables/media/js/jquery.dataTables.js"></script> <script src="components/patternfly/components/datatables-colvis/js/dataTables.colVis.js"></script> <script src="components/patternfly/components/datatables-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="components/patternfly/dist/js/patternfly.js"></script> <!-- Bootstrap Date Picker --> <script src="components/patternfly/components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script> <!-- Bootstrap Combobox --> <script src="components/patternfly/components/bootstrap-combobox/js/bootstrap-combobox.js"></script> <!-- Bootstrap Select --> <script src="components/patternfly/components/bootstrap-select/dist/js/bootstrap-select.min.js"></script> <!-- Bootstrap Tree View --> <script src="components/patternfly/components/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script> <!-- Google Code Prettify - Syntax highlighting of code snippets --> <script src="components/patternfly/components/google-code-prettify/bin/prettify.min.js"></script> <!-- MatchHeight - Used to make sure dashboard cards are the same height --> <script src="components/patternfly/components/matchHeight/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 -->
-
Enjoy!!!