1 | # Using [PatternFly](https://www.patternfly.org) - Quick Start Guide
|
2 |
|
3 | This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations. PatternFly is meant to be used as a replacement for Bootstrap, so please don't include the Bootstrap CSS if you are including the PatternFly CSS in your project.
|
4 |
|
5 | ### What's Included
|
6 |
|
7 | 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:
|
8 |
|
9 | ```
|
10 | patternfly/
|
11 | ├── dist/
|
12 | │ ├── css/
|
13 | │ │ │── patternfly.min.css (* need to include)
|
14 | │ │ │── patternfly-additions.min.css (* need to include)
|
15 | │ └── fonts/
|
16 | │ │ │── font and icon libraries (included via above CSS)
|
17 | │ └── img/
|
18 | │ │ │── branding materials and loading indicators
|
19 | │ └── js/
|
20 | │ │ │── patternfly.min.js (may need to include if you are using PatternFly jQuery Sidebar, Popovers or Datatables)
|
21 | ├── less/
|
22 | │ ├── variables, mixin, and component Less files (may need to include if you want to customize the already built CSS)
|
23 | └── test-src/
|
24 | ├── example markup source files
|
25 | ```
|
26 |
|
27 | We provide compiled CSS and JS (`patternfly.*`), as well as compiled and minified CSS and JS (`patternfly.min.*`). CSS [source maps](https://developer.chrome.com/devtools/docs/css-preprocessors) (`patternfly.*.map`) are available for use with certain browsers' developer tools. Fonts from OpenSans, FontAwesome, PatternFly Icons are included, as well as numerous other 3rd party JS components and libraries.
|
28 |
|
29 | ## Using PatternFly In Your Application
|
30 |
|
31 | 1. Ensure you have installed the following utilities:
|
32 | - [Git](http://git-scm.com/downloads): a free and open source distributed version control system.
|
33 | - Unfamiliar with Git? Try using [GitHub for Windows](https://windows.github.com/) or [GitHub for Mac](https://mac.github.com/).
|
34 | - [Node.js](http://nodejs.org/download/): a software platform that is used to build server-side applications.
|
35 | - [Grunt](http://gruntjs.com/getting-started): a JavaScript task runner.
|
36 |
|
37 | $ sudo npm install -g grunt-cli
|
38 |
|
39 |
|
40 | 2. Add PatternFly as a dependency for your project and you'll receive all the libraries you'll need:
|
41 |
|
42 | $ npm install patternfly --save
|
43 |
|
44 | For full install options see the [README](README.md)
|
45 |
|
46 | 3. Add the following CSS includes to your HTML file(s), adjusting path where needed:
|
47 |
|
48 | <!-- PatternFly Styles -->
|
49 | <!-- Note: No other CSS files are needed regardless of what other JS packages located in patternfly/components that you decide to pull in -->
|
50 | <link rel="stylesheet" href="node_modules/patternfly/dist/css/patternfly.min.css">
|
51 | <link rel="stylesheet" href="node_modules/patternfly/dist/css/patternfly-additions.min.css">
|
52 |
|
53 | 4. Add the following script includes to your HTML file(s), adjusting where necessary to pull in only what you need:
|
54 |
|
55 | <!-- jQuery -->
|
56 | <script src="node_modules/patternfly/node_modules/jquery/dist/jquery.min.js"></script>
|
57 |
|
58 | <!-- Bootstrap JS -->
|
59 | <script src="node_modules/patternfly/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
60 |
|
61 | <!-- C3, D3 - Charting Libraries -->
|
62 | <script src="node_modules/patternfly/node_modules/c3/c3.min.js"></script>
|
63 | <script src="node_modules/patternfly/node_modules/d3/d3.min.js"></script>
|
64 |
|
65 | <!-- Datatables, jQuery Grid Component -->
|
66 | <!-- Note: jquery.dataTables.js must occur in the html source before patternfly*.js.-->
|
67 | <script src="node_modules/patternfly/node_modules/datatables/media/js/jquery.dataTables.min.js"></script>
|
68 | <script src="node_modules/patternfly/node_modules/drmonty-datatables-colvis/js/dataTables.colVis.js"></script>
|
69 | <script src="node_modules/patternfly/node_modules/datatables.net-colreorder/js/dataTables.colReorder.js"></script>
|
70 |
|
71 | <!-- PatternFly Custom Componets - Sidebar, Popovers and Datatables Customizations -->
|
72 | <!-- Note: jquery.dataTables.js must occur in the html source before patternfly*.js.-->
|
73 | <script src="node_modules/patternfly/node_modules/patternfly/dist/js/patternfly.min.js"></script>
|
74 |
|
75 | <!-- Bootstrap Combobox -->
|
76 | <script src="node_modules/patternfly/node_modules/patternfly-bootstrap-combobox/js/bootstrap-combobox.js"></script>
|
77 |
|
78 | <!-- Bootstrap Date Picker -->
|
79 | <script src="node_modules/patternfly/node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
|
80 |
|
81 | <!-- Moment - required by Bootstrap Date Time Picker -->
|
82 | <script src="node_modules/patternfly/node_modules/moment/min/moment.min.js"></script>
|
83 |
|
84 | <!-- Bootstrap Date Time Picker - requires Moment -->
|
85 | <script src="node_modules/patternfly/node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
|
86 |
|
87 | <!-- Bootstrap Select -->
|
88 | <script src="node_modules/patternfly/node_modules/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
|
89 |
|
90 | <!-- Bootstrap Switch -->
|
91 | <script src="node_modules/patternfly/node_modules/bootstrap-switch/dist/js/bootstrap-switch.min.js"></script>
|
92 |
|
93 | <!-- Bootstrap Touchspin -->
|
94 | <script src="node_modules/patternfly/node_modules/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.js"></script>
|
95 |
|
96 | <!-- Bootstrap Tree View -->
|
97 | <script src="node_modules/patternfly/node_modules/patternfly-bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
|
98 |
|
99 | <!-- Google Code Prettify - Syntax highlighting of code snippets -->
|
100 | <script src="node_modules/patternfly/node_modules/google-code-prettify/bin/prettify.min.js"></script>
|
101 |
|
102 | <!-- MatchHeight - Used to make sure dashboard cards are the same height -->
|
103 | <script src="node_modules/patternfly/node_modules/jquery-match-height/jquery.matchHeight-min.js"></script>
|
104 |
|
105 | <!-- Angular Application? You May Want to Consider Pulling Angular-PatternFly And Angular-UI Bootstrap instead of bootstrap.js -->
|
106 | <!-- See https://github.com/patternfly/angular-patternfly for more information -->
|
107 |
|
108 | 5. Prefer to use Bower? You can install patternfly using Bower (although NPM is recommended). Add the following style and script includes from `bower_components` to your HTML file(s), adjusting where necessary to pull in only what you need:
|
109 |
|
110 | <!-- PatternFly Styles -->
|
111 | <!-- Note: No other CSS files are needed regardless of what other JS packages located in patternfly/components that you decide to pull in -->
|
112 | <link rel="stylesheet" href="bower_components/patternfly/dist/css/patternfly.min.css">
|
113 | <link rel="stylesheet" href="bower_components/patternfly/dist/css/patternfly-additions.min.css">
|
114 |
|
115 | <!-- jQuery -->
|
116 | <script src="bower_components/jquery/dist/jquery.min.js"></script>
|
117 |
|
118 | <!-- Bootstrap JS -->
|
119 | <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
|
120 |
|
121 | <!-- C3, D3 - Charting Libraries -->
|
122 | <script src="bower_components/c3/c3.min.js"></script>
|
123 | <script src="bower_components/d3/d3.min.js"></script>
|
124 |
|
125 | <!-- Datatables, jQuery Grid Component -->
|
126 | <!-- Note: jquery.dataTables.js must occur in the html source before patternfly*.js.-->
|
127 | <script src="bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
|
128 | <script src="bower_components/datatables-colvis/js/dataTables.colVis.js"></script>
|
129 | <script src="bower_components/datatables-colreorder/js/dataTables.colReorder.js"></script>
|
130 |
|
131 | <!-- PatternFly Custom Componets - Sidebar, Popovers and Datatables Customizations -->
|
132 | <!-- Note: jquery.dataTables.js must occur in the html source before patternfly*.js.-->
|
133 | <script src="bower_components/patternfly/dist/js/patternfly.min.js"></script>
|
134 |
|
135 | <!-- Bootstrap Combobox -->
|
136 | <script src="bower_components/bootstrap-combobox/js/bootstrap-combobox.js"></script>
|
137 |
|
138 | <!-- Bootstrap Date Time Picker - requires Moment -->
|
139 | <script src="bower_components/moment/min/moment.min.js"></script>
|
140 |
|
141 | <!-- Bootstrap Date Picker -->
|
142 | <script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
|
143 |
|
144 | <!-- Bootstrap Select -->
|
145 | <script src="bower_components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
|
146 |
|
147 | <!-- Bootstrap Switch -->
|
148 | <script src="bower_components/bootstrap-switch/dist/js/bootstrap-switch.min.js"></script>
|
149 |
|
150 | <!-- Bootstrap Touchspin -->
|
151 | <script src="bower_components/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.js"></script>
|
152 |
|
153 | <!-- Bootstrap Tree View -->
|
154 | <script src="bower_components/patternfly-bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
|
155 |
|
156 | <!-- Google Code Prettify - Syntax highlighting of code snippets -->
|
157 | <script src="bower_components/google-code-prettify/bin/prettify.min.js"></script>
|
158 |
|
159 | <!-- MatchHeight - Used to make sure dashboard cards are the same height -->
|
160 | <script src="bower_components/matchHeight/jquery.matchHeight-min.js"></script>
|
161 |
|
162 | <!-- Angular Application? You May Want to Consider Pulling Angular-PatternFly And Angular-UI Bootstrap instead of bootstrap.js -->
|
163 | <!-- See https://github.com/patternfly/angular-patternfly for more information -->
|
164 |
|
165 | 6. Enjoy!!!
|