Pajamas Design System

GitLab's design system is our single source of truth (SSOT) for resources, components, and design guidelines. Pajamas pulls in components from GitLab UI, which are in turn used within the product. Our Figma UI kit is used as a reference for building SSOT components, but is not the SSOT itself.

To learn more about how we create, build, style, and implement components, read the Component Lifecycle documentation.

Prerequisites

Ensure you have Node 12.x and Yarn 1.10 or newer installed.

Start using Git on the command line

• Start using Git
• Command Line basic commands
• Technical Tutorials for Product Designers on Unfiltered

Development

Quick start

1. Clone the project with git clone git@gitlab.com:gitlab-org/gitlab-services/design.gitlab.com.git
2. Install yarn
3. Run yarn install
4. Run yarn start to start build & watch changes
5. Open http://localhost:2018

Alternatively, you can also open this repository in Gitpod to make and preview changes directly in your browser.

Conventional commits

We use conventional commits specifications to write meaningful commit messages that are used as part of our semantic release process. Learn how to write conventional commits.

Writing component documentation

When starting from scratch:

1. Copy the contents from pages/components/template.md
2. Paste the contents in an existing placeholder file in contents/components/ or create a new file and call it componentname.md
3. Edit and write your documentation
4. Include your new page in the navigation. Learn more about populating the navbar.

Writing component examples

Component examples can be included in component docs and are available in the Implementation tab when they are associated with a documentation page. Component examples should be used over static images whenever possible.

Learn how to write and use component examples.

Adding images

• When adding images to documentation, wrap the image in a <figure> element with a nested <figcaption> that explains the figure content in text form for all users.
• If using an svg in an img, be sure to add role="img" to the element.
• The aria-label on the <figure> and <figcaption> should be the same content.
• <figcaption> is not a replacement for alt text, and when an image is present it must contain meaningful alt text.

For more background on the following example structure, refer to "How do you figure?", by Scott O'Hara.

<figure class="figure" role="figure" aria-label="Brief explanation on the figure content (same as figcaption)">
  <img class="figure-img" src="https://github.com/KI-SSC-TEST/design.gitlab/raw/main/img/file-name.svg" alt="Description of the visual" role="img" />
  <figcaption class="figure-caption">Brief explanation on the figure content (same as figure aria-label)</figcaption>
</figure>

Linting

We control code quality with automatic linting tools like eslint and prettier.

If you change something in the code, you can run yarn test to see if your changes are up-to-code. A lot of failures are auto-fixable, so simply run yarn run lint:fix to fix errors automatically.

Reviewing

Each merge request for this repository will generate a review app. Review apps create a new environment (dynamically) for each one of your branches. A Review App is then visible as a link when you visit the merge request relevant to the branch. That way, you are able to see live all changes introduced by the merge request changes.

Contributing

GitLab is an open source project and we are very happy to accept community contributions. Please refer to CONTRIBUTING.md for details.

Pajamas UI Kit

To contribute to our Pajamas UI Kit, review our contributing guidelines.

Why is the design system called Pajamas?

Pajamas is a nod to our fully remote culture. In addition, they are comfortable, reliable, and consistent! Read more about how we landed on the name Pajamas in the original issue.