For usage examples, please refer to the Puzzle Shell Storybook, specifically you may look at the complete examples that demonstrate how the components can be used to create an entire layout.
The mobile/desktop breakpoint of the Puzzle Shell is at 800px
per default. Below that screen width, the hamburger menu is displayed, paddings will change etc. To customize this breakpoint, you can set the global window.pzshBreakpoint
property to another value before the Puzzle Shell import, e.g.:
<script>
window.pzshBreakpoint = 1024;
</script>
<script
type="module"
src="/path/to/@puzzleitc/puzzle-shell/dist/puzzle-shell.js"
></script>