What is Clone?
Clone is a few things: it's an open-source front-end framework first, but it's also a design system, a prototyping tool, and a project boilerplate. It is produced by the team at the Government of Canada Talent Cloud.
Clone the Framework
First and foremost, Clone is a front-end framework that leverages HTML5 data attributes to create an easy-to-use system of styles and components. Instead of classes, Clone uses key-value pairs written right in your HTML to style elements, allowing for easy manipulation, and requiring minimal knowledge to get started.
Clone the Design System
Clone is also a design system - by imposing thoughtful restrictions while still allowing for plenty of customization, it allows you to build your project with a consistent yet flexible design language. This ensures that your site feels unified without removing your ability to design things as you see fit.
Clone the Prototyping Tool
One of the main advantages to Clone due to it's use of data attributes is that the barrier to entry is extremely low - if you know basic HTML you can get building in almost no time at all. This allows for rapid, in-context prototyping using real web technology, which can have a tremendous impact on user testing and research.
Clone the Boilerplate
Finally, Clone is also a great way to get your project off the ground quickly. It provides a ready to go environment that will let you prototype and build in minutes with very little knowledge required. This allows you to worry less about getting started and more about building things that matter.
Why Clone?
Clone helps you get your project off the ground by doing the following:
- It's built in standard web languages - HTML5, CSS3 with the help of Sass, Cash, and Twig if you want to get fancy!
- It uses HTML5 data-attributes instead of classes:
- You can build and manipulate styles through data instead of writing CSS.
- It's namespaced so that it won't interfere with your existing CSS unless you want it to.
- It's regularly tested for meeting WCAG AA compliance, so the system has accessibility benefits baked in.
- It provides enough flexibility to theme your project without overhwhelming you with options.
- It can be used through NPM, the CDN, or you can start from scratch using the Clone boilerplate.
- It's lightweight! (
)
Contributing
Clone is an open source project using an MIT license. This means that anyone can contribute, build upon, rework, or improve it's code. Clone's code is hosted on Github. If you spot an issue, feel free to submit a ticket, or if you're interested in adding or improving a feature in Clone, you can fork the repository.
It is important to note that Clone is accessible by design, meaning anything included in the system must meet a minimum of WCAG AA.
Generally, adding something to Clone should follow these basic steps:
- Accessibility & Standards Research
- Design & Development
- General User Testing
- Accessibility Testing
- Submit a Pull Request on Github
Your pull request will then be reviewed and dicussed before being merged into the main repository. Contributing to Clone is a collaborative effort, so expect lots of fun discussion and testing!