The PatternFly Design Kit is a Sketch library used for creating PatternFly accurate design mockups

Overview

PatternFly Design Kit

The PatternFly Design Kit is a collection of Sketch assets that make it easy for designers to create high-fidelity design mockups that accurately represent PatternFly components and layouts. It includes:

  • A Sketch symbol library that includes components, icons, color palettes, and other PatternFly elements. Hosted on Sketch Cloud here.
  • A template file that provides several starter layouts that will make it easier to construct common PatternFly screens. Hosted on Sketch Cloud here.

Updating the kit

Sketch will automatically receive library updates in the top, right corner of an open Sketch file. You'll want to update the PatternFly library and update the symbols within your file (two separate notifications). You'll have to update all files that are using PatternFly symbols - it is not a one and done process, unfortunately.

To update you PatternFly Template file, open the updated template from your local repo and select File > Save as Template... This will replace the current template with the updated version and make the latest layouts available using the New from Template... feature.

Please check out our announcements for specific design kit release updates!

Filing bugs

If something isn't working as expected with the library or template file, please file an issue in this repo and label it with "bug". We should be able to fix it within a couple days!

Release notes

To check out the latest design kit release notes, go here.

Please check out our announcements for specific design kit release updates!

Contributing to the PatternFly Design Kit

We welcome contributions from our community of PatternFly designers. Please contact Marie Doruskova (@doruskova) on the #patternfly-design-kit channel within the patternfly.slack.com Slack workspace.

Contributing a new or edited symbol

Follow these steps:

  1. Download the library file from here.
  2. Create new symbols or edit symbols using the styles and elements from "Document". Be sure you take them from "Document" rather than "PatternFly"
  3. When naming a new symbol, follow the naming mechanism within that same category (e.g., Forms / 2. Text Box / Success).
  4. Make it clear which page in the file you edited and which symbols on the page you added/edited by adding a ⭐️ or some other mark to call them out.
  5. Add the labels "Pre-release" to symbols that haven't been implemented yet or "Core-only" to symbols that are available only in HTML. This info is usually added to the description of the issue.
  6. Zip your file and attach it to the GitHub issue you were assigned to. Add a list of the symbols you added/edited and, finally, tag @doruskova in your comment.

Contributing a new or edited template

Follow these steps:

  1. Download the template file hosted on Sketch Cloud from here.
  2. If the template you're working on fits within an existing page, create a new artboard and add it to that page. If it doesn't fit into an existing page, create a new page and then add artboards from there.
  3. Be sure to add all padding specific to that example in it's own folder within the layer list called " πŸ“ Padding" and hide it.
  4. If the design variation is new and needs a spec, add it to the first artboard, add it's name (use the comment text style), and unhide the " πŸ“ Padding" group (see the template file for existing examples of how this is done now).
  5. Add the labels "Pre-release" to artboards with symbols that haven't been implemented yet or "Core-only" to artboards with symbols that are available only in HTML. This info is usually added to the description of the issue.
  6. Zip your file and attach it to the GitHub issue you were assigned to. Add a list of pages you added/edited and the artboards on those pages. Finally, tag @doruskova in your comment.

Questions?

If you have any questions or concerns, please contact Marie Doruskova [email protected].

Comments
  • Hint component

    Hint component

    Create a PF component for the hint pattern as documented in the OpenShift design wiki and draft PF design guidelines for embedded assistance.

    Hint pattern should meeting the following requirements: Hint area is shown in context of where it applies

    • This may be above the page title for cases where the hints apply to the entire page of the application.
    • This may be below a specific tab or area on a page for cases where the hints only apply to a portion.

    Hint area can be different shapes and sizes to fit a specific context (for example, could be a horizontal rectangle - like an inline alert - if applies to an entire page or page area, or could take a vertical rectangle to fit in white space on the right side of a modal or page)

    Hint area is highlighted in blue Hint must have a title (h3 style) Hint must have some body text (body-copy style) There can optionally be external links within the body text There can optionally be a primary action below the body text Title, body text, and primary action are left aligned For cases without a primary action, there should be an X in the top right corner to dismiss the message.

    Colors Font: pf-blue-600 Background: pf-blue-50 Primary Action: Standard PatternFly button colors

    template symbol 
    opened by stacymcauliffe 23
  • Define design pattern for drag and drop

    Define design pattern for drag and drop

    Multiple interactions within PatternFly may employ drag and drop. These include, but are not limited to, reordering rows in a list or table, moving cards in a card grid, and reordering columns in a table. We should have a common set of visual affordances to ensure consistency wherever drag and drop is used. Considerations must include:

    • Cursor change to indicate that an object is draggable and is in the process of being dragged.
    • Change in appearance of an object as it is being dragged.
    • How we visually indicate where an object can be dropped.

    see https://github.com/patternfly/patternfly-react/issues/2908#issuecomment-532734997 for more specific question and design requirements from dev

    There is some prior work for PatternFly 3 that can be found here: https://www.patternfly.org/v3/pattern-library/forms-and-controls/drag-and-drop/#design

    In the process of making these recommendations, we should consider accessibility. Are there ways to make drag and drop interactions accessible to keyboard-only users? Must we always have a redundant method for moving an object when drag and drop is used?

    template symbol 
    opened by mcarrano 23
  • Skeleton loading

    Skeleton loading

    This is an enhancement for an existing pattern.

    Pattenfly Spinner could be substituted with skeleton loading which looks much cleaner on the screen. Or skeleton loading could be introduced as a new pattern to pick from when any information is being loaded.

    47005198-e9c3d080-d13b-11e8-96b6-78b06d9fc004

    46404134-9ba6da00-c704-11e8-9c40-13d242578a3d

    The idea originated in https://github.com/theforeman/foreman/pull/6103#issuecomment-430162419

    template 
    opened by terezanovotna 22
  • Dropdown with description needed

    Dropdown with description needed

    We need a dropdown with description in it in AMQ. So users can have some help information about the options. I created an initial wireframe like this. Screen Shot 2019-05-17 at 15 47 52

    symbol 
    opened by yih-wang 22
  • Compact pagination on mobile phone is not usable

    Compact pagination on mobile phone is not usable

    Describe the issue. What is the expected and unexpected behavior?

    When using compact pagination on smaller screen, it's not usable.

    compactpag

    Expected:

    An ability to switch pages.

    Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.

    1. Set compact navigation
    2. Decrease size of your browser's window
    3. Try to change the page

    Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around?

    A bug. It's not blocking us.

    What is your product and what release version are you targeting?

    Sources UI ASAP. It affects all other Insights applications that are using the compact pagination.

    cc @Hyperkid123 @karelhala

    help wanted template symbol 
    opened by rvsia 22
  • File upload

    File upload

    Here are some options I played with for a Portal project. I didn't include pasting since that's not a use case for me. file upload

    The left side shows 3 ideas. I like the concept of making it one regular height input field but it might be too cramped. I imagine with pasting capability it would grow in height after pasting.

    The middle one might work best - there's an explicit button for browse, a larger drag and drop target area, and then clicking anywhere that's not the button could be used for pasting. It's a little big though.

    The third one copies the PF3 version most but I prefer having a button instead of a link for browse. A button is more appropriate for an action and it's more obvious what to do in this field.

    On the right shows the flow of uploading and then the success message of uploading a file. That takes care of the questions about how to see the file name and how to remove it.

    @mturley and I plan on talking through this more and trying to come up with a single solution for all of these use cases.

    Originally posted by @ajacobs21e in https://github.com/patternfly/patternfly-react/issues/1254#issuecomment-461840247

    template 
    opened by ajacobs21e 21
  • primary light color (for dark background)

    primary light color (for dark background)

    Screen Shot 2020-01-07 at 5 02 46 PM

    The pf-global--primary-color--light-100 (#73BCF7 or blue-200) layer style isn't used anywhere in the sketch file.

    On navigation dark theme, the blue highlights use pf-global--active-color--400 (#2B9AF3 or blue-300)

    https://github.com/patternfly/patternfly-next/blob/master/src/patternfly/sass-utilities/scss-variables.scss says $pf-global--primary-color--light-100: $pf-color-blue-200 !default;

    Where should #73BCF7 ( pf-global--primary-color--light-100 or blue-200) be used versus #2B9AF3 (blue-300) ?

    opened by ajacobs21e 17
  • Label size in design kit does not match implemented

    Label size in design kit does not match implemented

    image In implementation, the label text size is 14px. image In the design kit, the label text size is 12px.

    The larger label size in implementation does not work well for compact tables, see below: large labels

    The request is to update the implemented label size to size 12 font (and subsequent overall size changes)

    symbol 
    opened by katierik 16
  • Reduce use of white-space throught the PatternFly library

    Reduce use of white-space throught the PatternFly library

    In some areas of the system we have too much white space. This mostly is seen in our page layouts but we see it in a couple components as well. Initially we had a goal of aligning to the new brand visual direction which tastefully utilizes large amounts of white space to communicate or symbolize the open nature of our culture and products. While this works well in a marketing context, taking it too far in a product context hinders our products by seeming to waste space for no reason in an industry that really cares about information density. To put it bluntly, our users don’t make the brand connection and generally respond negatively to the additional white space.

    cc: @mceledonia @LHinson

    template symbol 
    opened by mcarrano 14
  • Radios with more information

    Radios with more information

    There are use cases to show additional descriptive information with a radio button.

    Screen Shot 2019-09-26 at 11 10 35 AM

    It is likely that this would also be helpful as an option for checkboxes, but I do not have use cases for this as of writing.

    Notes/screenshots: https://docs.google.com/document/d/13NkTdfpH7ZD7gBsmhYgjlux9K2mKa5s9t5JNmFV_KpI/edit?usp=sharing

    –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

    Final Designs: marvel: https://marvelapp.com/50eh328/screen/64407412 raw file: https://sketch.cloud/s/l8Dk4

    template 
    opened by katierik 14
  • Reconsider design of alerts

    Reconsider design of alerts

    Stacking two status colors on top of each other creates a difficult accessibility issue when ensuring the items meet the required contrast ratios.

    cc @mceledonia

    template symbol 
    opened by mcarrano 13
  • Fix text input with icon symbols

    Fix text input with icon symbols

    Seems like there are inconsistencies between the states for the forms/text box/with icon symbols. Looks like the default component may be showing an input group and not a text box with icon. The other states appear to show a search input with the icon on the left.

    After review it looks like the forms/text box/with icon symbols should show the icon on the right (shown here) and allow for icon overrides. Default icon should be changed so it is not confused with search input symbol.

    bug symbol 
    opened by lboehling 4
  • Update empty state icons

    Update empty state icons

    We're updating our empty states to use rh brand icons instead of the existing font awesome icons. These new icons will need to be added to the symbol library and also updated in the template file. See https://github.com/patternfly/patternfly-design/issues/1198 for updated designs.

    -add new icons to the symbol library -update template file empty state page to reflect new icons

    on hold Figma V5 
    opened by lboehling 0
Owner
PatternFly
Created to promote design commonality and improved user experience across enterprise IT products and applications.
PatternFly
Grupprojekt fΓΆr kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet fΓΆr kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide FΓΆr information om hur utv

Svante Jonsson IT-HΓΆgskolan 3 May 18, 2022
Hemsida fΓΆr personer i Sverige som kan och vill erbjuda boende till mΓ€nniskor pΓ₯ flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo fΓΆr kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
This project is a user friendly project that provides the accurate constellation name of the user

OVERVIEW: This is a group project by certain members of the 100Devs community. Contributors Lee Gill | GitHub: LeeGee64 | Twitter: @LeeGee64 | LinkedI

Lee Gill 5 Jun 15, 2022
Swipe is the most accurate touch slider.

Usage Swipe only needs to follow a simple pattern. Here is an example: <div id='slider' class='swipe'> <div class='swipe-wrap'> <div></div>

Brad Birdsall 6.8k Dec 16, 2022
Web UI kit following simply superb.'s design system, based on Tailwind CSS.

ui-kit TailwindCSS powered UI kit following simply superb.'s design system. ➑️ Demo available here Why I am building few applications (iOS / Android /

simply superb. 8 Mar 4, 2022
Bootstrap 5 & Material Design 2.0 UI KIT

Bootstrap 5 UI KIT - 700+ components, plain JavaScript, MIT license, simple installation. MDB is a collection of free Bootstrap templates, themes, des

MDBootstrap 22.9k Dec 30, 2022
A frida script that can be used to find the public RSA key used in the native libakamaibmp.so shared library, seen in version 3.3.0 of Akamai BMP

Akamai BMP - RSA/AES Frida Hook This Frida script can be used to find the public RSA key used in the encryption process in Akamai BMP 3.3.0. Since ver

yog 31 Jan 8, 2023
Used for creating a out-of-the-box template without additional configuration.

ou Used for creating a out-of-the-box template without additional configuration. Templates Vue3 Lite Template Used for some simple web app Vue3 + Vite

Dewey Ou 6 Jul 17, 2022
Twitter Text Libraries. This code is used at Twitter to tokenize and parse text to meet the expectations for what can be used on the platform.

twitter-text This repository is a collection of libraries and conformance tests to standardize parsing of Tweet text. It synchronizes development, tes

Twitter 2.9k Jan 8, 2023
Kyrillos Hany 14 Aug 10, 2022
this is a single-page web application. we built a book website where the user can add , remove and display books. we used modules to implement these functionalities. also, we used the Date class to display the date and time.

Awsome Books In this Project, we have built A Books websites. Built With ?? HTML CSS javascript Git & Github Live Demo Here you can find the live Demo

Nedjwa Bouraiou 10 Aug 3, 2022
Fully dockered starter kit for Elm with Hasura

elm-hasura-dockered This repo contains a Elm-Hasura starter kit for rapid+typesafe web application development on open source foundations. Elm is grea

Cies Breijs 41 Dec 9, 2022
A homebridge plugin to display the current consumption from your Tibber pulse as lux in Home kit.

homebridge-tibber-lightsensor Tibber lightsensor is a plugin for Homebridge. It fetches the current watt usage of your house and displays it as a ligh

Johan Runbert 2 Oct 11, 2022
Node-cli-starter - Basic starter kit for building Node CLI applications with TypeScript.

node-cli-starter Minimal starter kit for building Node CLI applications with TypeScript. Getting Started To get started clone repo locally and run npm

Cory Rylan 7 May 17, 2022
BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework

BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework. It provides a faster, easier and less repetitive way for web developers to create elegant web apps.

bootflat 4.3k Dec 25, 2022
The best Nodejs price kit you need when working with cryptocurrencies with multiple providers support

Cryptocurrency Price Kit STAGE: RFC The best Nodejs price kit you need when working with cryptocurrencies with multiple providers support. Goal To pro

TrapCode 6 Sep 7, 2022