Repository navigation
feat(preview): add a column guide over the canvas - #42
Merged
Merged
Conversation
A new toolbar button, next to the breakpoints buttons, opens the column guide's menu. When on, the guide draws full-height columns over the preview, under the selection outlines. It never takes a click and never writes to the project. It works in the desktop app and in Studio, which share the same implementation. In a Lumos project, the guide reads the layout variables at the current preview width: the column count from --site-column-count, --site-columns or --_column-count, and the margin, gutter and max width from --site-margin, --site-gutter and --max-width-main. Fluid clamp() values are resolved to pixels by the preview frame. Without those variables, Stacki's defaults apply: 12 columns, a fluid margin (16–48px) and gutter (16–32px), and no max width. In the menu, the column count can be picked from an editable list of whole numbers from 4 to 24, or read from a project variable. A count outside that range is ignored, and the menu says why. The margin, gutter and max width take a length (px or rem) or a project variable. Reset brings back the project's value or the default. Colour, opacity, numbers and visibility are saved per project, and ⇧G shows or hides the guide. The menu reuses the style panel's controls, which adds a preview edge to eslint.config.mjs.
Owner
|
Amazing! Thank you |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
A new toolbar button, next to the breakpoints buttons, opens the column guide's menu. When on, the guide draws full-height columns over the preview, under the selection outlines. It never takes a click and never writes to the project. It works in the desktop app and in Studio, which share the same implementation.
In a Lumos project, the guide reads the layout variables at the current preview width: the column count from --site-column-count, --site-columns or --_column-count, and the margin, gutter and max width from --site-margin, --site-gutter and --max-width-main. Fluid clamp() values are resolved to pixels by the preview frame.
Without those variables, Stacki's defaults apply: 12 columns, a fluid margin (16–48px) and gutter (16–32px), and no max width.
In the menu, the column count can be picked from an editable list of whole numbers from 4 to 24, or read from a project variable. A count outside that range is ignored, and the menu says why. The margin, gutter and max width take a length (px or rem) or a project variable. Reset brings back the project's value or the default.
Colour, opacity, numbers and visibility are saved per project, and ⇧G shows or hides the guide. The menu reuses the style panel's controls, which adds a preview edge to eslint.config.mjs.