Test your responsive layouts on various screen sizes in Live Preview.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.github/ISSUE_TEMPLATE
docs
src
.babelrc
.editorconfig
.eslintignore
.eslintrc.js
.gitattributes
.gitignore
.prettierrc
CHANGELOG.md
LICENSE.md
README.md
composer.json
package-lock.json
package.json
postcss.config.js
webpack.config.js

README.md

Icon

Breakpoint for Craft CMS 3

Test your responsive layouts on various screen sizes in Live Preview.

Preview

Table of contents

Features

  • Extends Craft's Live Preview while preserving its original function.
  • Can be enabled or disabled at any time with the click of a button.
  • Customize your own screen presets or choose from a list of popular devices.
  • Automatic zoom keeps the whole preview visible even when testing large screen sizes.
  • Detailed User Manual with screenshots.

Installation

Install this plugin from the Plugin Store or with Composer.

Plugin Store

Go to the Plugin Store in your projects Control Panel and search for "Breakpoint". Then click on the "Install" button in its modal window.

Composer

Open your terminal and run the following command inside your project directory:

$ composer require michaelhue/craft-breakpoint

Open the Control Panel and navigate to Settings → Plugins and install the plugin or use the terminal:

$ php craft install/plugin breakpoint

Requirements

Usage

See User Manual.

Licensing

The license fee for this plugin is $29 (license + one year of updates) via the Craft Plugin Store, then $9 per year for updates.

Limitations

  • While the plugin functionality is similar to most browsers device preview, it does not emulate touch-events or user-agents.
  • May not work with other plugins that extend or change the Live Preview.

Support

  • User Manual – Learn how to use the plugin.
  • Issues – Submit bug reports, feature requests and general questions.
  • Changelog – View recent changes and bug fixes.