WELCOME TO
Compass Design System
let the work flow
Ready to use Design components
React Compass offers a comprehensive suite of UI tools to help you ship new features faster. Start with React Compass, our full-loaded component library, or bring your own design system to our production-ready component.
Introduction
This is guideline page for ComfortDelGro's Workbench Design System library. Which a set of components that created using web component and can be used to implement user experiences consistent with ComfortDelGro's design principles. These components can work without any other library like jQuery, Angular, VueJS, React and can run on most of modern browsers. Refer Workbench Design System
Usage
There are three parts of the package: CSS, Javascript, and Icon or Image resource. We are fetching icon and images from cdn by default.
Add preflight flushing styles for SSR.
import Preflight from '@comfortdelgro/react-compass/preflight'
import Document, {
DocumentContext,
Head,
Html,
Main,
NextScript,
} from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx)
return {
...initialProps,
styles: <>{initialProps.styles}</>,
}
}
render() {
return (
<Html>
<Head>{Preflight.flush()}</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocumentAdd Preflight component for better CSS resets according to design guidelines.
import Preflight from '@comfortdelgro/react-compass/preflight'
import {AppProps} from 'next/app'
const App: React.FC<AppProps> = ({Component, pageProps}) => {
return (
<>
<Preflight />
<Component {...pageProps} />
</>
)
}
export default App