Custom breakpoints

AnchorIntroduction

By default Makeswift has one base breakpoint desktop, and two additional breakpoints, tablet and mobile:

You can use the breakpoints dropdown to view your site on different devices and build responsively.

The default breakpoints are great for starting a new site, but for integrating a site with existing media queries it's better to setup custom breakpoints to match.

AnchorUsage

To use the new API pattern and custom breakpoints, you first need to import ReactRuntime, and create an instance while passing the breakpoints option to the constructor:

import { ReactRuntime } from '@makeswift/runtime/react'

const runtime = new ReactRuntime({
  breakpoints: {
    tablet: { width: 768, viewport: 760, label: 'Tablet' },
    mobile: { width: 575, viewport: 390, label: 'Mobile' },
    pager: { width: 200 },
  },
})

• width is the value used in the media query. Width is required.

• viewport is is the size of the preview we show in app.makeswift.com when you are building. Viewport is optional and falls back to width.

• label is the text shown in the breakpoint dropdown. Label is optional and falls back to the key it is assigned to.

  Example: The third breakpoint above doesn't have a label, so the text used in the breakpoint dropdown is pager.

Then make sure your component registration uses the runtime instance instead of the global ReactRuntime:

- ReactRuntime.registerComponent(...)
+ runtime.registerComponent(HelloWorld, {
  type: "hello-world",
  label: "Hello world",
  props: {
    className: Style(),
    ...
  },
});

Then pass the runtime instance to Makeswift and MakeswiftPage:

export async function getStaticPaths() {
  const makeswift = new Makeswift(process.env.MAKESWIFT_SITE_API_KEY!, {
    runtime: runtime, // Pass the runtime here
  });

  // ...
}

export default function Page({ snapshot }) {
  return (
    <MakeswiftPage
      snapshot={snapshot}
      runtime={runtime} {/* and here */}
    />
  );
}

AnchorImportant Notes

• Makeswift currently only supports desktop-first responsiveness. We may support for mobile-first responsiveness in the future. Let us know if mobile-first responsiveness is important to you.
• The desktop breakpoint is always added, and its value is calculated based on the largest custom breakpoint.

AnchorAPI

AnchorTypes

type Breakpoint = {
  width: number
  viewport?: number
  label?: string
}

type BreakpointsInput = Record<string, Breakpoint>