This is part of a series of posts introducing the projects built by open source contributors mentored by Creative Commons duringGoogle Summer of Code (GSoC) 2019. Dhruv Bhanushali was one of those contributors and we are grateful for his work on this project.
Over the past few months, we’ve been working onCC Vocabulary, a new open source software project that provides a cohesive design system to unite the web-facing Creative Commons (CC).
Vocabulary is intended to be an extension of theCC Style Guidefor the web, providing reusable components, patterns, and more. The software includes a JavaScript user interface component library (using theVue.jsframework), an interactive playground to try out various elements, and general usage guidelines.
Since 2001, CC’s web presence has grown to encompass a large assortment of tools and resources, including applications ranging from the vastCC Searchto the single-pageCC Chooser. We also have numerous websites for our programs, such asCC Open Source, theCC Global Summit, theCC Certificates, and theCC Global Network. There are also CC Chapter websites, apluginfor WordPress, a browserextension, and more. Due to the fact that each of these tools and websites were developed and maintained independently, typography, color palette, components, design, and experience vary wildly. In addition, important concerns, such as accessibility, slipped through the cracks.
That’s why we decided to create a design system that would help unify all of the CC websites and applications. We named it “Vocabulary,” reflecting the notion that numbered components (like words) could be strung together to form countless web sites (like sentences).
The principles of Vocabulary
- Singular
Vocabulary provides a single home for user interface (UI) components. The code for how a component looks and feels is pulled from Vocabulary instead of being reimplemented in each individual website. This ensures that common components, such as headers and footers, are identical everywhere. This makes even the most distinct websites familiar and “look CC.”
This also ensures that discussions, features, and fixes are made in one location and reach the whole ecosystem. Pulling in the newest features in a Vocabulary-based website is only a matter of updating to the latest version of Vocabulary.
- Versatile
词汇表在风格选择方面提供了很大程度的可变性，使应用程序在不牺牲内合性和可访问性的情况下具有美学上的多样性。每个组件的许多方面都可以定制，从而产生指数级的变体。即使是像切换器这样简单的组件，也提供了近300种不同的颜色、阴影、圆度和简单性选项。
- Flexible
Although centralized, Vocabulary components can be customized from site to site as per the needs of the service. This ensures that there’s always room for creative expression and personality. For example, the standard footer allows specific content in all three panes to be customized.
- Responsive
Vocabulary ensures that the applications adapt to the diverse range of screen sizes on the Internet, from mobile phones to flat screen TVs. All Vocabulary components are built on a self-designed five-tier responsive grid to automatically scale up and down based on the screen size.
- Vibrant
All the colors in theCC Style Guide在CC词汇表中提供，以及浅色和深色的阴影，以帮助构建丰富的界面。Color is integral to creativity, thus every component in Vocabulary can be colored.
- Cohesive
The entire library of components offered by Vocabulary are designed to work in tandem with each other, allowing beautiful websites to be built with very little effort while maintaining consistency across all CC websites. In addition, Vocabulary conforms to and makes the most of the latest CSS specifications that are supported widely by web browsers.
- Accessible
Vocabulary incorporates UI accessibility best practices, such as contrasts, readability, and ease-of-use. Applications that use Vocabulary automatically receives these accessibility benefits as well.
- Translation-Friendly
构建Vocabulary中的每一个组件都是为了能够进行翻译。It’s impossible to build a component that’snottranslation-ready.
The translations are stored in a separate file from the code, which allows Vocabulary to offer pre-translated versions of common components and also makes contributing translations really easy, even for people without any coding experience.
词汇的下一个目标是什么?
Vocabularyis open-source under the MIT/Expat license, with the code hosted onGitHuband a livingstyle guidethat is an extension of theCC Style Guide. We’re actively improving the project by adding new features, implementing new components, fixing bugs, etc. Work on integrating Vocabulary with existing CC sites and applications, such as CC Search, is alreadyunderway.
CC is also working withOutreachyfor the December 2019 – March 2020 session to identify and implement ways to further enhance the scope of the project as well as integrate it with existing applications and websites, such as the CC Chooser and the CC Global Network. This provides interns an exciting opportunity to collaborate with a dynamic developer community working to bring impactful new features to a global audience of creatives.
We encourage you tocontributeby checking out the project, giving us feedback orreporting bugs, helping uswrite code, or contributing translations. If you’re a developer embarking on your next web project, you can use Vocabulary to make prototyping UIs a breeze. We provide Vocabulary as anpm packageas well as viaCDNs. You can even integrate Vocabulary with an existing project. If you’re a designer, we could use your insights to improve our components. If you’re good with words, you could help us with writing new documentation or translating the current body of text.
It’s an exciting time for the Web, and we couldn’t be happier to have you with us as we embark onthis new project. We look forward to seeing how this library powers a new era of rapid, cohesive, and accessible front-end development across the web-facing Creative Commons.
