Hello everyone. We are excited for PatternFly, a Red Hat sponsored project, to be featured as part of the Open Studio blog. It’s nice to have a forum to share and learn about all the cool and creative efforts within Red Hat.
As I was wrapping up this blog post about PatternFly, I came across this tweet from Rafael, a JBoss Middleware Senior Engineer. I couldn’t resist including it for a number of reasons. First, I get to use the word “fancy,” but more importantly because it alludes to a big part of the PatternFly initiative: to reduce cost and time to market by providing resources to create an easy-to-use and visually appealing UI. Design and development teams can pick up reusable solutions rather than having to create them from scratch, leaving them more time to innovate on domain-specific features and functionality.
The other part of the initiative, not covered in Rafael’s tweet, is that PatternFly provides common resources that are intended to be used across Red Hat products to create a consistent user experience for the entire portfolio. Consistency increases usability because users become familiar with the interactions and the way things should work. Additionally, it knits our various products together so that they all look and feel like Red Hat.
PatternFly is Bootstrap plus extra goodness and love.
PatternFly is Bootstrap components with custom styling. We chose Bootstrap because it is open source and one of the most popular projects on GitHub. Also, it uses a mobile-first design approach, a 12-column grid system which allows an application using PatternFly to be responsive out of the box. We also have an Angular flavor of PatternFly that provides a set of common AngularJS directives for use with PatternFly.
The extra goodness includes additional components to extend Bootstrap’s functionality. Bootstrap is a great foundation, but because we cater to enterprise IT applications, we need additional components to meet application requirements. Some examples include:
- Bootstrap Select
- Charts powered by C3 and D3
- Custom PatternFly font icons
- Custom PatternFly components
- Font Awesome icons
- Google Prettify
- JQuery Data Grid
The love is the UX expertise that puts it all together. We use Agile and open source methodologies to create designs collaboratively and iteratively. Our work spans from initial research into users’ needs and desires, through early design concepts and prototypes, all the way to usability validation and code generation.
Visit patternfly.org to view our patterns with usage guidelines, coded examples, high-fidelity images, and code snippets. Other resources on the site include the PatternFly color palette, icon library, and terminology and wording guidelines. The code for PatternFly and Angular PatternFly can be obtained from the GitHub repository via Git clone, by downloading a zip file from the Github website using Bower, a front end package manager.
We’re always looking for smart, community-minded designers and developers to contribute. Contributions to the project can be made in various forms like giving feedback, filing or fixing bugs, editing or writing documentation, designing patterns, and evangelism. To learn more, join us on Freenode at #patternfly, subscribe to our mailing list, and follow us on Twitter @patternfly_des.
Contributed by Leslie Hinson, Red Hat Senior Interaction Designer and PatternFly Product Owner
Edited by Sarahjane Clark, Red Hat Senior User Experience Researcher
Graphics by Brian Dellascio, Red Hat Principal User Experience Visual Designer
Font used within illustrations: “Penelope Anne” by Vanessa Bays