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/js/patternfly.min.js"></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.