Backyard ·

Backyard is Lowe’s open source design system for digital products and experiences. With the Backyard Design Tokens as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.

Guiding Principles

Backyard is open. The design system is a distributed effort, guided by the principles of the open source movement. Backyard’s users are also its makers, and everyone is encouraged to contribute.

Backyard is inclusive. It’s designed and built to be accessible to all, regardless of ability or situation.

Backyard is modular and flexible. The system’s modularity ensures maximum flexibility in execution. Its components are designed to work seamlessly with each other, in whichever combination suits the needs of the user.

Backyard builds consistency. Based on the Backyard Design Tokens, every element and component of Backyard was designed from the ground up to work elegantly together to ensure consistent, cohesive user experiences.

Ecosystem

Project	Status	Description
tokens		The styling engine for Backyard
icons		Icon pack as react components
react		React UI component library

Installation

NPM

npm install --save-dev @lowes-tech/bds-tokens @lowes-tech/bds-icons @lowes-tech/bds-react

Yarn

yarn add -D @lowes-tech/bds-tokens @lowes-tech/bds-icons @lowes-tech/bds-react

PNPM

pnpm add -D @lowes-tech/bds-tokens @lowes-tech/bds-icons @lowes-tech/bds-react

Setup

Create the Theme Provider

import React from 'react'
import { ThemeProvider } from '@lowes-tech/bds-react'

const App = (props) => {
  return (
    <ThemeProvider theme='light'>
      { props.children }
    </ThemeProvider>
  )
}

Add Global Styles

/** Globals.ts */

import { createGlobalStyle } from 'styled-components'
import { Fonts } from '@lowes-tech/bds-react'
import { ThemeVariables } from '@lowes-tech/bds-tokens'

const GlobalStyles = createGlobalStyle`
  ${ ThemeVariables }
  ${ Fonts }
  
  // other css global code (eg. Resets)
`

export { GlobalStyles }
export default GlobalStyles

/** App.tsx */

import React from 'react'
import { ThemeProvider } from '@lowes-tech/bds-react'
import { GlobalStyles } from './Globals'

const App = (props) => {
  return (
    <ThemeProvider theme="light" font="roboto">
      <GlobalStyles />
      { props.children }
    </ThemeProvider>
  )
}

export { App }
export default App

Contributing

The main purpose of this repository is to continue evolving Backyard, making it faster and easier to use. Development of Backyard happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Read below to learn how you can take part in improving React.

License

Backyard is MIT licensed.

psullivan6/backyard-design-system