/storefront-ui

Customization-first Vue.js UI framework for eCommerce.

Primary LanguageJavaScriptMIT LicenseMIT

Storefront UI

Netlify Status

This project is on the early stages of development. Not ready for production use. Expect some things to be broken and api to change

We are looking for contributors and agencies willing to join us and build best UI library for Vue together!

Customization-first and elegant UI framework for eCommerce (and not only) based on Vue.js and Google Retail UX Playbook. Made with ❤️ by Vue Storefront team and contributors.

What makes it unique?

Some libraries aim to give as much as they can out of the box but they faill when it comes to customization. Our goal was to enable as much as possible out of the box but with primary focus on ability to customize any aspect of the components.

With SfUI you need to do a little bit more than with other libs for basic tasks but you get 100% customizable components in return!

You can easly change almost every aspect of provided components and use them to make stunning eCommerce shops (and not only)!

Here are the key characteristics of Storefront UI:

  • Ability to customize any aspect of the library.
  • Performance-oriented
  • High-level global customization can be done through SCSS variables
  • Component content customization with slots.
  • Component design customization with pure css BEM classes instead of countless props.
  • Possibility to compose your own components from partials (markup/Vue instance/SCSS)
  • Implementation of Atomic Design (with limit to atoms, molecules and organisms)

Read about code design concepts behind Storefront UI and how it can be customized.

Design

You can find the stunning designs we are using for Storefront UI components here

image

How to try it?

Storefront UI is not ready to use in projects yet. We plan to release working alpha before the end of April 2019. If you want to check current state of components just check storybook If you really want to play with components: npm install --save @storefrontui/vue

Then check if sfui.scss file was created in a root of your app. If not - create it.

Documentation

The documentation is always THE HARDEST PART of each open source project! But we're trying hard. Feel free to contribute to the documentation if you like.

Please find out what we've already managed to prepare: available here. Please note that the documentation is not yet finished as this project is still in the early stages of development and will be continuously updated. You can find them also under the docs/ folder.

Contributing

We are currently in a process of building the library. If you want to help shaping future of vue and eCommerce UI's we'd be more than happy if you want to contribute! Here you can find all the required information.

Maintainers

Those awesome people are maintaining Storefront UI. Their ensuring that it performs smooth and looks awesome!

and amazing contributors commiting their time to make it better.

Thank you! There would be no Storefront UI without you

Cooperation with Alpacas

Ideas behind Storefront UI and Alpaca are common efforts. We joined forces in figuring out how to make things right to deliver best possible experience to the users.

Supporters

e-com club

Roadmap

  • Category page components (April) - Done
  • Product Page components (May) (alpha release) - Done
  • Homepage, form elements, monorepo setup, product page example (June)
  • Last polishments and focus on documentation (July) (beta release)

Other things to include in the meantime:

  • include additional build for every compoennt so they can also be imported separately but after a build step (useful for apps that don't have a build step at all)
  • webpack build that can be merged into your current one with everything that is needed to consume SFUI webpack source

In consideration

  • SCSS - CSS vars transition

Want to help and make it even faster? Grab an issue and become part of our amazing community ;)