Cordage v1.9.5
Edit page
Getting Started
IntroductionAtomic Design MethodologyFile TreeComponents GuidelinesThemingBreakpoints
Atoms
Molecules
Organisms
Templates
Styleguide
Readme

Introduction

Cordage requires a specific design system for their product. According to Cordage, the design system should be as modular and reusable as possible. The secondary objetive is to make a NUU's design system based on Cordage's design system in a future. This has been previously authorized by Cordage.

A couple of things to consider:

  1. The code for everything inside this library tries to be as simple and direct as possible. Trying to prevent the use of complex variables to achieve whatever your heart desires.
  2. Everything is considered to have a 16px font-size on the html <body></body> and all rules are calculated by using rem only. You might want to test out 'fluid typographies' ;)
  3. There are a couple of themes available for this library and these themes exist in their own separate folder, just to prevent having a complete mess inside our styles. You can even try to import the main file and just the selected theme eventually ;)
  4. normalize is already included so, in theory, this should look exactly the same for every browser.
  5. React's Hooks and Context are the bread-and-butter of this library, but we try to keep it as friendly and unrestricted as possible.
  6. If you are not using flow-type, es6, react hooks and context, and you are trying to understand the code in this library... you are going to have a bad time.
  7. Every atom, molecule and organism has been setup to be fully accessible, but we would love your input if you have the chance.