This is the SUSE Pattern Library project

Created as a reference implementation of recommended common SUSE styles and components.

Intended for both products and online properties depending on the pattern.

SUSE-PL is not designed to be a replacement for existing frameworks and aims to make it as easy as possible to cherry pick useful code.

All CSS is prefixed .suse-pl so as not to break your site when importing.

Getting Started

# npm
npm install
npm start

# yarn
yarn install
yarn start

# pnpnm
pnpm install
pnpm start

Development

Generating new component

npm run generate

You'll be prompted to enter a component name, e.g., suse-pl-button-success.

Edit the generated files in src/components/suse-pl-button-success/:

• suse-pl-button-success.tsx: Component logic and JSX rendering;

• suse-pl-button-success.scss or suse-pl-button-success.css: Styles for the component;

• readme.md: Documentation for the component,

  then open a pull request.

Helpers utilities

Helper utilities are in the utils directory. Just open an HTML file.

Feedback

For feeedback and discussion please join #network-design-cop on slack.

Current Project Participants:

• Dominic Vieira @domvieira
• James Mason @bear454
• Kaira Johnson
• Karen Van der Veer
• Alex Palladii @arharovets
• Thomas Schmidt
• Andy Fitzsimon @andyfitz-suse