How to add custom breakpoint in Breakdance

What is the tutorial about?

This tutorial is all about adding a custom breakpoint in Breakdance, a popular tool for designing responsive websites. The tutorial provides a step-by-step guide on how to set up a custom breakpoint, specifically for large devices. This is an essential skill for anyone looking to create websites that look great on all devices, regardless of their screen size.

Tutorial Steps

1. Open the Breakdance preferences:
   Click on the “…” menu, open preferences, and then go to breakpoints.
2. Add a custom breakpoint:
   Click on “Add Breakpoint”. Name it as per your preference, for instance, “Large Devices”.
3. Set the minimum and maximum widths:
   Click on the newly created breakpoint and set the minimum width. In this tutorial, the minimum width is set to 1600 pixels, meaning the breakpoint will apply to all devices above 1600 pixels. The maximum width is left blank, which means the breakpoint will apply regardless of how large the device is.
4. Set the default preview width:
   Enter a custom preview width. This tutorial uses 1800 pixels. This allows Breakdance to scale the design down so you can see it on your smaller screen as if it was an 1800 pixel screen.
5. Save the breakpoint:
   Click on “Save” to save the breakpoint.
6. Create styles for large devices:
   Go to your design properties and adjust the font size for large devices. In this tutorial, the font size is set to 100 pixels for large devices and 76 pixels for desktop and below.
7. Preview the design on large devices:
   Click on the breakpoints dropdown and choose your custom breakpoint to preview the design on large devices.

Use Cases for this Tutorial

• Web Designers:
  This tutorial is beneficial for web designers looking to create responsive designs for various devices, especially larger screens.
• Bloggers and Content Creators:
  Bloggers and content creators can use this tutorial to ensure their website is visually appealing and user-friendly on all devices.
• Business Owners:
  Business owners can use this tutorial to optimize their website for all devices, providing a better user experience for their customers.