⛔ DEPRECATED ⛔

Use Foundation UI instead

Synergy-Ui

Synergy-ui is a component library that implements extendas synergy design system. The components can be seen in Storybook

Installation

Synergy-Ui is available as an npm package

npm install @hiiretail/synergy-ui

Getting started

To start working with the library create a theme using the createTheme() function.

Parameter spacingUnit is used as a minimal measure in pixels for spacing in the application. By default, it's set to 4px

const myTheme = createTheme({spacingUnit: 2});

Theme object contains the following fields:

• spacing is a function that takes a multiplier param and returns the actual spacing by multiplying spacingUnit and multiplier
• breakpoints - an object containing a set of breakpoints to handle responsiveness
• media - an object containing 3 helper functions: between, greaterThan and lessThan. These functions take breakpoints as parameters and return a media query.

const SyledDiv = styled.div`
  border-radius: ${(props) => props.theme.spacing(1)}px;
`;

Our approach to CSS

Synergy-Ui is aimed at reducing the amount of CSS code needed to build an application. We use styled-components to provide isolated CSS styling for components. For that purpose, the library provides layout components (Flexbox, CssGrid and Box) with intuitive APIs to avoid a scenario when developers implement their layouts using divs and CSS classes, keeping the code clean and readable. All components are still customizable via ClassName, allowing changing of look and feel.

Responsiveness

Media component and useMedia hook handle responsiveness. Use theme.breakpoints and theme.media to simplify your work.

Contributing

The source code is available on GitHub.

If you found a bug or see some space for improvement feel free to submit a pull request.

Docs

You can find docs for each component in the docs tab in Storybook.