Guidelines

We're doing everything we can to make our architecture as user-friendly as possible, but not everything might speak for itself. On this page we'll explain everything you need to know besides component specific documentation.

Imports

Components, utilities and sections from this documentation can be imported as following:

import hydrate from '@dpdk/library/utilities/prismic/hydrate';

Notes

• We only support modern browsers, so no IE11
• What can I use? CSS variables, CSS grid, promises and more!
• All components and utilities from the library have a default export
• Utilities are lowercase, components are camelcase
• CSS modules and code-splitting are handled automatically

Styling

For components we use CSS modules with scss:

import styles from './Header.module.scss';

export default function Header() {
  return <h1 className={styles.header}>Example</h1>;
}

It's recommended to configure colors and fonts for your project before starting heavy work:

/* frontend/styles/globals.scss */

:root {
  --accent: #2fd0b7;
  --primary: #1f2937;
  --body: #4b5563;
}

.paragraph {
  color: var(--body);
}

Typography

We all like beautiful and readable fonts in our websites so here's a few tips:

#1 Every project we start has a font-family by default that should look pretty on every device:

font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira
    Sans, Droid Sans, Helvetica Neue, sans-serif;

#2 Using Google Fonts is fine, but make sure they are local!

Visit Google Webfonts Helper -> Select font & styles -> Copy CSS (modern) and download the files!

Once everything in place you can make it faster by adding preload tags for font styles that are used on first load:

<link rel="preload" href="/fonts/inter-v3-latin-700.woff2" as="font" crossOrigin="" />

It's also required to add font-display: swap; to every font-face!

#3 Be aware of the performance and bandwidth hit when loading too many fonts.

#4 We use the default browser font size of 16px. Make sure our websites are always responsive and work properly when zooming in.

#5 Make sure that licenses are purchased and included when the used font requires it.

Source code

This architecture doesn't have a build step, which means the source is available in every project.

Let's say you want to see what a component does under the hood, simply navigate to /node_modules/@dpdk/library/ and view any source file directly how we created them in the library.