Why PatternFly can be the answer to the new age Web Designing?

Build better experiences with repeatable, scalable Open Source design framework.

Have you ever wished for a framework that will not only let you develop but also will help you design the UX in an Open-Source way? **Well, you don’t need to wait anymore. Grab a cup of coffee and enjoy learning about such a framework with each sip.

With each passing day, we are inching towards even better technologies and products, and this is a great time for tech startups to make their mark. In the era of AI and Machine Learning where everyone is crazy about making their product stand out, there is a small part which plays a very significant role. i.e User Interface Design.

A good User Interface is important because it can turn potential visitors to buyers as it facilitates interactions between the user and your website or web application

Now to cope up with that need, various Front-end frameworks are created for developing complex user interfaces. Patternfly is one of them.

What is PatternFly?

PatternFly is an Open Source interface design system by RedHat which provides various visual components, tools for designing visual components, and code examples to make it possible for almost anyone to design and build responsive, accessible user experiences.

Why use PatternFly

Patternfly is a project which connects the developers and designers in a single platform to collaborate, create and share their designs or components or widgets. Being based on Bootstrap-3 it uses a mobile-first approach for creating websites and applications which makes it more responsive. PatternFly helps save you time and energy by providing demo examples and layouts with the code to implement those solutions.

How is it different from other frameworks?

Patternfly extends the features and functionality of Bootstrap. It offers a bunch of additional components with custom look with a modern touch and clean design. All components pose behavioural consistency which lets the developer re-use the components even in disparate projects and makes them look like they belong in the same portfolio. And most importantly, it is built in an open-source way.

How is PatternFly built?

PatternFly is based on Bootstrap and built using Less (a cascading style sheet (CSS) pre-processor). Less extends the CSS language, allowing variables, mixins, functions etc. which makes it maintainable, themeable, and extendible

How to Use PatternFly in your project

Well, with PatternFly we can design as well as develop the visual components. In this article, we will focus more on the developing aspect of it.

Note : PatternFly provides design kit which helps the designers to create hi-fi mock-ups of the PatternFly components and the layouts. The design kit is a collection of sketch assets that make it easy for designers to create hi-fi mockups that accurately match PatternFly components and layouts. It works with the Sketch library (Sketch version 47 or above).

PatternFly comes in three types of components. i.e. React, HTML/CSS or Angular Components. There are some specific steps to get PatternFly configured in the system according to the framework used. Before getting into the setup, it is always a good idea to get the package managers like npm or yarn installed.

Note: PatternFly components for Vue 2 is available as 3rd party library Vue-PatternFly

Setup of PatternFly environment

1. HTML/CSS Setup:

Download all the CSS and JS files of PatternFly using:

npm install @patternfly/patternfly — save

Note: Each of the three modules (layouts, components, and utilities) delivers a Sass file (.scss) and CSS file, which you can include in your build environment by using tag in html.

2. React Setup:

Using npm:

npm install [@patternfly/react-core](http://twitter.com/patternfly/react-core) — save

Using yarn:

yarn add [@patternfly/react-core](http://twitter.com/patternfly/react-core)

Note: A starter project using React PatternFly components can be found in the repo PatternFly React seed.

1. **Angular Setup:**

Install patternfly-ng

npm install patternfly-ng --save

Install patternfly

npm install patternfly --save

Importing CSS files

The base CSS files need to be imported inside the project to use PatternFly styling. Apart from that, in order to use the styling for a component, the CSS files for that specific component also needs to be imported.

1. HTML/CSS:

Copy the needed CSS or SCSS files inside the node_modules to the project directory.

A single file for the entire compiled library: node_modules/@patternfly/patternfly/patternfly.css
Individual files with each component compiled separately: node_modules/@patternfly/patternfly//styles.css
A single file for the entire library’s source (Sass): node_modules/@patternfly/patternfly/patternfly.scss
Individual files for each component’s source (Sass): node_modules/@patternfly/patternfly//styles.scss

Now, these CSS files can be linked using in one HTML file as :

<link rel=”stylesheet” href=”css/patternfly.css”>

Or, we need to import the “base.css” or “base.scss” to our unified/main CSS file to use the CSS in multiple HTML Files. We can also import the CSS files of required components in order to use them.

@import ‘./patternfly-base.css’;
@import ‘node_modules/@patternfly/patternfly/ComponentName/styles.css‘;

1. React:

Import the “base.css” file in the unified/main CSS file.

@import ‘node_modules/@patternfly/react-core/dist/styles/base.css’;

To use the PatternFly components, import the component’s CSS to “src/PageName/index.js”

import { C[omponetName](https://patternfly.github.io/patternfly-ng/#/) } from ‘@patternfly/react-core’;

Note: We might need to use “@patternfly/react-styles” to enable CSS-in-JS capabilities along with build plugins to convert raw css imports to a consumable form for JS.
@patternfly/react-styles
*A library that provides CSS-in-JS capabilities along with build plugins to convert raw CSS imports to a consumable form…*www.npmjs.com

1. Angular(doc):

Open angular.json and insert a new entry into the styles array

"styles": [
        "./node_modules/patternfly/dist/css/patternfly.min.css",
        "./node_modules/patternfly/dist/css/patternfly-additions.min.css",
        "./node_modules/patternfly-ng/dist/css/patternfly-ng.min.css",
        "styles.css",
        "./node_modules/patternfly-ng/dist/css/patternfly-ng.min.css",
        "base.css",
          ],

To import the CSS of a specific component (ex. ToastNotificationModule) Open src/app/app.module.ts and add the component to the imports array.

**import** { ToastNotificationModule } **from** 'patternfly-ng/notification';
*// Or*
**import** { ToastNotificationModule } **from** 'patternfly-ng';
...

**@NgModule**({
   ...
   imports: [ToastNotificationModule, ... ],
    ... 
})

Open src/app/app.component.html and add

<pfng-toast-notification
  [header]="'test header'"
  [message]="'this is a notification'"
  [showClose]="'true'"
  [type]="'success'">
</pfng-toast-notification>

Note: For Angular 8, insert the following into angular.json

"options": {
  "preserveSymlinks": true,

Note: It is important to link to “base.css” file in case of React and HTML/CSS framework.
The default CSS of PatternFly can be modified by overriding them with CSS using a new user-given class or ID. In some cases it might be troublesome to override the CSS with just the user-given class name so in those cases, writing CSS with full class name, i.e: **PatternFly Default class+ User Given Class **might be useful.
.startbtn {color: red}can be written as .pf-m-btn.pf-c-btn,startbtn{color:red}

Features of PatternFly

Global variables:

PatternFly uses a bunch of predefined Global variables to maintain consistency throughout the design and at the same time gives the user privilege to modify any component without disturbing the consistency.

For example, we can get the value of colour #fafafa with --pf-global — palette — black-100 or set border-width:3px is similar to border-width: var(- -pf-global — BorderWidth — lg) . The variables are needed to get wrapped inside var() or can be written followed by $.

The Global variables can be found for colours, spacers, font-sizes, line-heights, border-width etc.

More about global-variables can be found here.

Font

PatternFly uses Red Hat Display font and Red Hat Text font.

We can modify the font-size or spacer between texts by the variables like, --pf-global — spacer — xs/sm/lg/xl/2xl or -- pf-global — FontSize--xm/sm/lg/xl/2xl .

Note: In a future breaking-change release, the font will default to the Red Hat font. You can opt-in and update to use the Red Hat font now by wrapping your application with the “.pf-m-redhat-font” class — www.patternfly.org

Icons

PatternFly icons are two dimensional and flat and it can be imported from ‘@patternfly/react-icons’. These Icons are used with Inline links or buttons.

Now, to use a PatternFly icon, we can use:

//For React
import { IconName } from ‘[@patternfly/react-icons](http://twitter.com/patternfly/react-icons)’; //for  React 
render (){
  return (
    <Button variant="link" icon={<IconName />}>
       Link button
    </Button>{' '});
)}

//For HTML
<i className=”pf-icon pf-icon-add-circle-o”></i>    // for HTML

We can also download the SVG to reuse the Icons.

PatternFly also uses custom icons and selections from FontAwesome.

To utilize the same in HTML, update the sass-utilities/scss-variables.scss file as follows:

$pf-global — enable-fontawesome-cdn: true !default

To use FontAwesome with PatternFly React, it needs two different packages named: @fortawesome/free-solid-svg-icons, @fontawesome/react-fontawesome and @fortawesome/fontawesome-svg-core
@fortawesome/free-solid-svg-icons
@fortawesome/react-fontawesome
@fortawesome/fontawesome-svg-core

Now install the three packages using “npm”.

To use the FontAwesome Icon, add in “src/PageName/index.js”

import { FontAwesomeIcon } from ‘@fontawesome/react-fontawesome’

import { faPencilAlt } from ‘@fortawesome/free-solid-svg-icons’

render (){
  return (
    <Button variant="link" icon={<FontAwesomeIcon icon=     {faPencilAlt}>
       Link button
    </Button>{' '});
)}

Note: If the PatternFly default font-awesome icons are not getting loaded properly, the alternative is to download the svg of the same and re-use them in your code base. (For example: Brand Icons like GitHub, Gmail etc.)

Colours

PatternFly has a set of default colours for all its components like Primary colours, Typography and Iconography colours, Background colours, Status and state colours(active/inactive states). Using the same pattern of colours helps the components look alike and fit together. It also supports some parameters of adding shadow and contrast ratio.

Find out more here

Spacers

Similar to colours, PatternFly has default variables for the space( typically used for giving border or padding) between components with the value ranging from xs(4px) to 3xl(64px)

Use of PatternFly Elements (Components, Layouts and Charts)

Component

PatternFly website lists a wide number of visual components (ex. modal, card, checkbox, toolbar etc. ) which comes with example codes(in React, HTML and Angular) for exact implementation.

(Just the CSS file of the components needs to be imported or linked with the main CSS files of the project as stated above.)

In case of Angular, it also includes some more features like Directives(For remaining char counts in textboxes), Pipes(For Search Highlight, Sort Arrays and Truncate Chars) and Services(For copying any text or Launching Notification).

Implementing interactivity to core components

The lack of interactivity (ex. opening of a modal or scrolling etc.) is expected for the core or HTML/CSS components, as they don’t include JavaScript for interactivity. So, you’ll have to include your own JavaScript if you’re not using the react components. The core components are meant to be pure with just HTML/CSS.

Layout

For React and Core(HTML/CSS), PatternFly provides 8 types of layouts to visualize data in a responsive manner. For example, the Grid layout, which works almost the same way as Bootstrap columns. The Gallery layout is my personal favourite though. An example of using page layout can here found here.

Charts

Patternfly provides a bunch of chart options in React and Angular which makes it even more feasible for analysis dashboard and data visualization.

In React, there are options of various charts ranging from Area charts to display metrics for continuous data to Donut charts represent relative amounts. PatternFly React charts are based on the Victory chart library, with a lot of customization and theming.

Note: PatternFly React charts is live in its own package at:
@patternfly/react-charts
*This package provides PatternFly charting components for PatternFly 4. Node Environment This project currently supports…*www.npmjs.com

For Angular as well, there are a few charting options available.

To enable charts, add pattern fly-settings.js from the PatternFly package. Open angular.json and insert a new entry into the scripts array.

 “scripts”: [

 “./node_modules/patternfly/dist/js/patternfly-settings.js”

 ],

Bonus:

1. Demos

PatternFly Demo Page can be found here

2. Help to create content better

“The words we use in our products are just as important as the components or layouts.”

So PatternFly website also provides help with strategical writing for website development which will complement the components. It provides docs for sections as Terminology, Voice and Writing.

3. Training

PatternFly has an official training program in KataCoda environment help understand the concept better.
Training
*PatternFly is an open-source design system built to drive consistency and unify teams. We provide tools like design…*www.patternfly.org

Even though with a lot of flaws and plenty of scope of improvement, PatternFly indeed leaves a mark, with its unique approach towards making the users’ experience better. From its impressive technique of maintaining consistency to its nature of giving freedom of design to the developer, PatternFly can indeed be the answer to the new age Web Designing.

Visit the Contribute page for more information on how to contribute to the project and you can find the team on Freenode at #patternfly, subscribe to the mailing list or follow them on Twitter @patternfly_dev.

References:

Go beyond Bootstrap with PatternFly
Frequently Asked Questions
PatternFly 4

For more updates on UI Frameworks, stay tuned and let us know your thoughts in the comment section. Thank You