Buildit Gravity pattern library

Gravity design system logo

Gravity is Buildit @ Wipro Digital's design system. This pattern library showcases all of Gravity's styles and components for web-based projects, which are provided by the @buildit/gravity-ui-web NPM package.

As long as you have Gravity's CSS integrated into your project, all you need to do to "use" a component you find here is to copy the HTML markup shown in this pattern library. For complete setup and usage instructions, please refer to @buildit/gravity-ui-web's documentation on GitHub.

(In future, we plan to make the underlying Nunjucks templates directly available via another NPM package. Until then, you need to produce your own markup though)

Package versions

The following Gravity package versions were used to build this pattern library:

Package Version Description
@buildit/gravity-particles v0.6.1 Gravity's design tokens and shared assets.
@buildit/gravity-ui-web v3.0.0-alpha.10 Gravity's core web UI library. Provides CSS, JavaScript and SVG assets.
@buildit/gravity-nunjucks v0.0.0 Nunjucks templates and Fractal config used to generate this pattern library.

Available Gravity pattern libraries

There are multiple versions of this pattern library available online:

  • Production (Currently viewing)

    Always shows the most recently released Gravity styles and components. Updates whenever new releases of @buildit/gravity-ui-web are made.

    Builds from the master git branch.

  • Staging

    Shows unreleased updates the current major version of @buildit/gravity-ui-web.

    Builds from the develop git branch.

  • Staging for Next

    Shows unreleased updates targeting the next major release of @buildit/gravity-ui-web.

    Builds from the next git branch.

Component statuses

Components and their variants have been given statuses reflecting their state of completion. The available statuses are listed below.

Label Description
Do not implement.
Work in progress. Implement with caution.
Ready to implement.