Skip to content
This repository has been archived by the owner on Aug 8, 2023. It is now read-only.

UI Kit v3.1

Compare
Choose a tag to compare
@mitchquik mitchquik released this 08 Nov 18:20
· 2 commits to master since this release
542bb03

Responsive Checkout Screens

This UI Kit release (version 3.1) is a part of Mobify’s 'November Rain' product release. It aligns with the Progressive Web SDK: version 1.5.0. Download the UI Kit on its own by using the Download link, or download the source files and kit requirements from this repo’s master branch.


What’s New in v3.1?

  • Responsive Cart … New artboards added show our best practice responsive shopping cart, based on industry research and learnings from our commerce customers.

screen shot 2018-11-08 at 10 12 24 am

  • Responsive Checkout … New artboards added show our best practice responsive checkout flow from shipping to confirmation, based on industry research and learnings from our commerce customers.

screen shot 2018-11-08 at 10 12 53 am

  • One single setup page … We've simplified the setup process by combining colors and type setup into one page. Applying your design system to the UI Kit can now be done in one place.

screen shot 2018-11-08 at 10 14 45 am


Was New In v3.0

  • Responsive Components … We've added a new artboard to the Components page that contains responsive variations of the Header, Footer and Navigation patterns.

  • MegaMenu … To back up the release of our new responsive navigation component MegaMenu, you'll find an example of it on the Responsive Components artboard to use in your next UPWA design.

  • Responsive Layouts ... In the Best Practice Layouts page you will now see design examples of how the homepage, search, navigation, PLP and PDP scale up responsively.

  • Grid & Breakpoints ... To compliment the SDK's new Grid component, the UI Kit's responsive components and layouts use a 4 breakpoint system - Small (0-599px) Medium (600px) Large (960px) and Xlarge (1280+px). This grid system is how the responsive Homepage, PLP and PDP are set up in the UPWA developer starting point.

  • Easier way to define colors and typography ... We've adjusted the layout of the setup pages to make it easier to apply a brand's digital style guide.


Need Help?

If you encounter a bug, get stuck on using the kit, or want to see something new added, please open up an issue in the parent GitHub repo, or open up a pull request so that we can have a discussion!

Happy building! ❤️