<commit_before>---
id: Upgrade guide
section: developer-resources
---

Hey, Flyers! We've been busy for the past 12 weeks working on significant changes to PatternFly's HTML and CSS. We made our components mobile-first and changed colors and the default font. This upgrade guide details **what** was broken and **how** to fix it. To learn **why** a change was made, check out the linked pull requests.

## Global
### Colors
To meet accessibility requirements, various colors have been updated to increase contrast in more usage scenarios. Some color variables have been remapped to better suit new component designs such as alerts, and we’ve also added new `-50` color tints to serve as colored backgrounds where appropriate. As a follow-up to last year's color changes, we've updated Blue and Cyan palettes' `-600` and `-700` values as well.

### Mobile first CSS
We've updated some components' CSS to be mobile first by using `@min-width` media queries. The components that are now mobile-first are background image, data list, toolbar, form, login, page, toolbar, and wizard [(#2816)](https://github.com/patternfly/patternfly/pull/2816).
  - The only component that cannot be mobile-first is the table, specifically with the `.pf-m-grid[-on-{breakpoint}]` modifiers. At the specified grid breakpoint, native/default properties are modified to achieve a grid-based layout. Overwriting these changes would require adding back native properties to the table. For that reason, the table will remain the exception to a mobile-first approach.<commit_msg>chore(docs): added version details to upgrade guide (#4678)<commit_after>---
id: Upgrade guide
section: developer-resources
---

**Note:** this guide details upgrading from PatternFly v3 to v4, and references [major release 2020.07](/developer-resources/release-notes/html/#2020.07-release-notes-2020-06-05) from 2020-06-05.
<hr/>

Hey, Flyers! We've been busy for the past 12 weeks working on significant changes to PatternFly's HTML and CSS. We made our components mobile-first and changed colors and the default font. This upgrade guide details **what** was broken and **how** to fix it. To learn **why** a change was made, check out the linked pull requests.

## Global
### Colors
To meet accessibility requirements, various colors have been updated to increase contrast in more usage scenarios. Some color variables have been remapped to better suit new component designs such as alerts, and we’ve also added new `-50` color tints to serve as colored backgrounds where appropriate. As a follow-up to last year's color changes, we've updated Blue and Cyan palettes' `-600` and `-700` values as well.

### Mobile first CSS
We've updated some components' CSS to be mobile first by using `@min-width` media queries. The components that are now mobile-first are background image, data list, toolbar, form, login, page, toolbar, and wizard [(#2816)](https://github.com/patternfly/patternfly/pull/2816).
  - The only component that cannot be mobile-first is the table, specifically with the `.pf-m-grid[-on-{breakpoint}]` modifiers. At the specified grid breakpoint, native/default properties are modified to achieve a grid-based layout. Overwriting these changes would require adding back native properties to the table. For that reason, the table will remain the exception to a mobile-first approach.
{'fraction_non_alphanumeric': 0.07997612652939422, 'fraction_numerical': 0.02088928678006565, 'mean_word_length': 4.68135593220339, 'pattern_counts': {'":': 0, '<': 4, '<?xml version=': 0, '>': 4, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2590885', 'n_tokens_mistral': 892, 'n_tokens_neox': 811, 'n_words': 466}