Setting Up PatternFly
Directly introduce PatternFly with CDN provider
If you want to try out the components provided by PatternFly in a fast way. Just use these PatternFly CDN links.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly-additions.min.css">
</head>
<body>
<div class="container">
<!-- Just enjoy various PatternFly components -->
<div class="alert alert-success">
<span class="pficon pficon-ok"></span>
<strong>Great job!</strong> This is really working out <a href="#" class="alert-link">great for us</a>.
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly.min.css"></script>
</body>
</html>
Setting Up PatternFly with npm
Step 1: Prerequisites
Before you build up web apps with npm and PatternFly, there are a few things that you have to do first:
- Make sure that you have node.js installed.
- mkdir myProject && cd myProject
- Type npm init to create package.json file.
Step 2: Install PatternFly
npm install patternfly --save
This will download and write to node_modules PatternFly and its dependency libraries.
Step 3: Apply PatternFly in your project
Now we can include the necessary assets by directly specifying their path inside the node_modules folder.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="/node_modules/patternfly/dist/css/patternfly.css">
<link rel="stylesheet" type="text/css" href="/node_modules/patternfly/dist/css/patternfly-additions.css">
</head>
<body>
<div class="container">
<!-- Just enjoy various PatternFly components -->
<div class="alert alert-success">
<span class="pficon pficon-ok"></span>
<strong>Great job!</strong> This is really working out <a href="#" class="alert-link">great for us</a>.
</div>
</div>
<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>
For any questions, reach out to us on our mailing list, Gitter or on Freenode at #patternfly.