CC Open Source Blog
CC Vocabulary - My First Four Weeks
Vocabulary is Creative Commons's web design system; an extension of CC Style Guide for the web. This project was originally started by my mentors Dhruv Bhanushali and Hugo Solar to unify all of CC websites and applications. Vocabulary has been undergoing a lot of changes lately. As part of my Outreachy internship, I will be contributing to extending its scope and usage.
My Progress so far...
Before my first contribution, Vocabulary comprised of reusable UI components built with Vue.js and a live styleguide built with Styleguidist. My first task was to create an interactive playground experience with Storybook which would eventually replace that built with Styleguidist. Storybook was chosen for obvious reasons:
- It provides a workbench environment for your components in isolation where you can play around with, customize and test as you develop.
- It provides Storybook Docs to generate design system documentation, customize, and share best practices with your team. Styleguidist majorly creates a UI documentation site that can be done better with Storybook Docs.
My first three weeks were more of struggling and learning. Coming from a React background, I had to reconfigure my brain to understand Vue and Vue storybook. I did a lot of reading of documentation and articles, testing locally and asking for help when stuck. I eventually completed the task and created a pull request. A live version of the interactive playground can be seen here. Please feel free to play around with it and give a feedback.
The following week, I worked on updating some Vue Vocabulary components with the CC Vocabulary design library.
Well, all said, the past weeks have been great. I will be sharing more in two weeks.