Understanding Vocabulary Design System
When I started my Outreachy internship with Creative Commons, I knew it’d be exciting, but I didn’t anticipate just how rewarding and growth-filled the journey would be. My project focuses on consolidating and implementing Vocabulary—the Creative Commons design system—across several websites. If that sounds a bit vague, let’s break it down.
What Is Creative Commons?
Creative Commons (CC) is a global nonprofit organization that makes it easier for people to share and build upon creative work legally. From educators and researchers to musicians and artists, CC provides tools like licenses that allow creators to define how their work can be used by others.
The Problem: Inconsistent Implementation of Vocabulary
Creative Commons’ new refactored design system, Vocabulary, was introduced to create consistency across its various websites. However, it has been implemented to varying degrees across these sites. The differences in versions and features mean some of the ancillary websites don’t fully align with the latest Vocabulary standards(markups and components).
For instance:
Some sites still use components from the legacy vocabulary like header and footer.
Features available in one implementation/website may be missing in another.
Localized customizations sometimes lead to design or functional inconsistencies.
The goal of my project is to ensure all ancillary CC websites implement the latest version and features of Vocabulary in a consistent and stable way. When necessary, new features will be built and added upstream into Vocabulary, while site-specific needs will be addressed with localized implementations.
What I’ve Accomplished So Far
Refactoring Websites to Use Vocabulary
In the first phase of my project, I worked on replacing outdated styles and components with Vocabulary’s pre-designed ones. This included:
Standardizing Components: I replaced older markup with Vocabulary’s current and accessible markups.
Simplifying Code: By adopting Vocabulary, I removed a lot of redundant styles and reduced the amount of custom CSS, making the sites easier to maintain.
Styling Where Vocabulary Doesn’t Cover
While Vocabulary provides many useful components, it doesn’t cover everything. For the parts it doesn’t address—like highly specific layouts or features unique to certain pages—I’ll be adding local styles that align with Vocabulary’s principles. This ensures the overall look and feel remains cohesive.
What I’m Working On Now
The Homepage
The homepage is the face of Creative Commons. It’s where many users form their first impression, so it’s critical that it’s visually appealing and easy to navigate. I’m currently restyling it to ensure it aligns perfectly with Vocabulary while addressing unique design requirements.
The Issue Finder Tool
This tool helps contributors find open-source issues to work on. Previously, it relied on outdated designs and heavy JavaScript. I’ve been:
Refactoring the logic from vue.js to use plain javascript.
Restyling the page with Vocabulary and adding any necessary local styles for features Vocabulary doesn’t cover.
Advice for Future Outreachy Applicants
If you’re considering applying to Outreachy or contributing to Creative Commons, here’s my advice:
Ask Questions: The open-source community is incredibly supportive. Don’t hesitate to seek help when you’re stuck.
Be Open to Learning: You don’t need to know everything upfront. Curiosity and determination are your greatest assets.
Enjoy the Journey: Contributing to a project that aligns with your passions is an incredibly rewarding experience.
This project has been a fantastic blend of creativity, technical skill, and collaboration. If you’re passionate about design, development, or making the internet more accessible, Creative Commons might just be the perfect place for you!