Capybara – Storefront UI based theme for Vue Storefront
New default template theme for Vue Storefront, based on Storefront UI. 90% of the Capybara code is closed in the Storefront UI library. Thanks to it, Capybara can maintain its flexibility, but minimize the risk of errors.
🔨 Current status: Production Ready
We have prepared short introduction to our coding standards and conventions we are using in Capybara theme.
🚀 See it in action
Try out our open demo and if you like it first give us some star on Github ★ and then contact us on Vue Storefront Official Slack or via [email protected].
This demo site is connected to Magento2.
📺 Video demo
✨ Features
Capybara theme provides out of the box ready to use elements, like Cart, Checkout, Modals or Product-related components – to name only a few of them, which all are based on awesome Storefront UI. It provides new look & feel for the Vue Storefront with simpler development experience. You can just grab it and use it, or you can play around to re-design existing components and build something new easily.
If you’re new and need some guidance feel free to visit out forum or reach anyone from the core team on our slack:
Tomasz Kikowski – @qiqqq
Tomasz Kostuch – @gibkigonzo
Paweł Smyrek – @psmyrek
Rafał Makara – @rmakara
🤝 Contributing
We are currently in the early developer’s preview phase. If you would like to help us improve this beautiful theme we’d be more than happy if you want to contribute! Here you can find all the required information how to start.
🔌 Installation
To be able to use new Capybara theme in your Vue Storefront installation, you need to:
Install lerna globally:
npm install -g lerna
or
yarn global add lerna
Configure vsf-capybara repository as a git submodule in theme path of your Vue Storefront workspace, and then track master branch:
git submodule add -b master https://github.com/DivanteLtd/vsf-capybara.git src/themes/capybara
Fetch all the data:
git submodule update –init –remote
Generate local.json file from script generate-local-config.js:
node src/themes/capybara/scripts/generate-local-config.js
Update Vue Storefront configuration by copying local.json file from src/themes/capybara to root config directory.
Update TypeScript compiler option in tsconfig.json in root directory: change value for compilerOptions.paths.theme/* from default theme [“src/themes/default/*”] to brand new Capybara theme: [“src/themes/capybara/*”].
Download all dependencies and start development server:
lerna bootstrap && yarn dev
That’s all! Now after opening your development server (http://localhost:3000 by default) you should see Vue Storefront with Capybara theme! 🎉
Design customization
If you want to customize the Capybara designs you can start with this amazing Figma file by Aditya Patel from HotWax Commerce.