Design and user experience (UX) can often be an afterthought for open source projects. But that’s changing. PatternFly is a project helping to bridge the gap between developers and designers.
PatternFly is an open source project that promotes design commonality and improved user experience. It’s a place where open source developers and designers can collaborate, create, and share user interface (UI) components and widgets. PatternFly is based on Bootstrap, a mobile-first front-end framework for creating web sites and applications.
I had a chance to catch up with some of the PatternFly team including Leslie Hinson, an interaction designer at Red Hat, and Robb Hamilton, a front-end developer on the UXD team at Red Hat. I wanted to go behind the scenes and find out more about PatternFly, how it came to be, and why developers should know about the project.
What problem does PatternFly solve? Why wouldn’t someone just use Bootstrap?
We wanted people to be able to look at one of our applications and say, “Yeah, that looks like Red Hat.” A challenge at Red Hat is that our products evolve from various upstream open source projects, which results in a variety of UIs that lack cohesion when you view them as a whole. Consistency across a portfolio leads to better usability because users are familiar with the designs and interactions. So, our team created PatternFly as a way to provide enterprise design solutions that can be applied across multiple products, applications, and projects as a way to provide a standard UI that is recognizable to our users.
We choose Bootstrap because it’s open source and addresses many of the problems we just mentioned. It’s one of the most popular projects on GitHub, and it uses a mobile-first design approach. Many of the development teams that we were working with were already using Bootstrap, and that made PatternFly easier to adopt internally.
Designers and developers looking for a pattern library and reference implementation to help build their applications should use PatternFly over Bootstrap because we extend the functionality of what Bootstrap offers. PatternFly offers a custom look and feel that is modern and clean, includes additional components, and the UX expertise on how it should all be used.
Why would an open source developer use PatternFly?
PatternFly is meant to be a place where designers and developers can collaborate to help solve common design problems by defining visual and behavioral patterns. These patterns provide a baseline design that can be customized to meet an application’s needs. Instead of having to think about how can I lay this out or how can I build this, PatternFly helps save you time and energy by providing design examples and layouts plus the code to implement those solutions.
How can PatternFly be used with other open source projects?
PatternFly is Bootstrap plus custom styling and additional components to extend the functionality of PatternFly beyond what Bootstrap offers. The additional components include Datatables, Font Awesome, custom icons, Bootstrap Select, Bootstrap Treeview, IE8 utilities (html5shiv, respond), charts, and more.
How is PatternFly built?
Bootstrap and PatternFly are built using Less, a cascading style sheet (CSS) pre-processor. Less extends the CSS language, adding features that allow variables, mixins, functions, and many other techniques that allow you to develop CSS that is more maintainable, themeable, and extendible. Although possible, it is not recommended to use the compiled PatternFly CSS directly, but rather to integrate PatternFly’s source Less files and recompile. This allows the developer to add any required app-specific CSS directly into one CSS file, which is more performant, and make any necessary adjustments to Bootstrap or PatternFly via variable overrides. There is also an AngularJS project that provides a set of common AngularJS directives specific to the PatternFly reference implementation as well as a Sass-powered version of PatternFly that is ready to drop right into your Sass powered applications.
The reference implementation bits can be obtained from the GitHub repository via Git clone, by downloading a zip file from the GitHub website, as an RPM, or via Bower, a front-end package manager from Twitter. Bower provides a simple way to find, install, update, and manage front-end dependencies via a command-line interface.
Why would developers choose PatternFly over another library?
One of the main things that sets us apart from other libraries is our focus on design for IT enterprise applications. We recognize the importance for a user to be able to migrate seamlessly from one product to another without having to relearn the UI. Behavioral consistency leads to better usability because users are familiar with the interactions. Visual consistency establishes a look and feel that users will recognize. It allows you to unify disparate projects, make them look great and make them look like they belong in the same portfolio.
Another difference is our approach. It’s important for us to build this project the open source way. We have a team of experienced interaction designers that are dedicated to the PatternFly effort but we value collaboration and meritocracy and invite anyone to participate by contributing designs or code.
How can someone get involved with PatternFly?
Visit our Contribute page for more information on how you can get involved. To contact us, you can find us on Freenode at #patternfly, subscribe to our mailing list or follow us on Twitter @patternfly_dev.
Also, check out PatternFly at DevNation. Robb Hamilton and Andres Galante will be presenting Creating a Common UI Across Products Using PatternFly, or visit the PatternFly booth.
Speaker Interview
This article is part of the Speaker Interview Series for DevNation 2015 an open source conference by and for developers from across the globe.
Comments are closed.