Here is the community style guide according to Craft, the recommended starting point for Webstudio Projects. CSS variables containing colors, sizes, and more are on the Global Root.
Grid quickly provides the properties to create a grid. Once added, switch over to Local and type in your template columns.
Note, grid turns into flex on 767. This is because grid children may use start/end columns and would require us to reset each one manually on mobile. By setting the parent to flex, those values are ignored.
Change these values on the Global Root. It's best practice to map semantic variables such as --foreground-primary to another variable such as --gray-10.
Paragraph text you can edit
that spans multiple lines
blockquote text you can edit
console.log("Hello World");Add notes for yourself or other creators that explain any nuances of the build.
These are global CSS variables added in addition to Open Props.
--foreground-primary
--foreground-secondary
--foreground-accent
--foreground-muted
--foreground-border
--background-primary
--background-secondary
--background-accent
--background-card
--gap-xs
--gap-s
--gap-m
--gap-l
--focus-color
--focus-width
--focus-offset
--duration-default
--easing-defaultWant to start with a light theme?
Click + in Advanced on the Global Root and paste in the following:
--foreground-primary: var(--gray-10);
--foreground-muted: var(--gray-7);
--background-primary: var(--gray-0);
--background-secondary: var(--gray-3);
--background-accent: var(--gray-10);When creating a new page, you can copy the "Page Wrapper" instance below (see navigator) and paste it on the new page. It contains the skeleton of a page, including a nav, footer, and section.
