Style Guide
Craft Version 1.0
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.
Layout
section
container
grid
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.
Colors
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.
Foreground
--foreground-primary
--foreground-secondary
--foreground-accent
--foreground-muted
--foreground-border
Background
--background-primary
--background-secondary
--background-accent
--background-card
Other
--focus-color
invert-theme
Text
Sets the background to the opposite (dark) and makes --foreground-muted a proper contrast ratio.
Elements
heading-1|2|3|4|5|6
Heading 1 text
you can edit
Heading 2 text
you can edit
Heading 3 text
you can edit
Heading 4 text
you can edit
Heading 5 text
you can edit
Heading 6 text
you can edit
Paragraph
text you
can edit
that spans multiple lines
blockquote text you can edit
list
- list-item text you can edit
- List Item text you can edit
- List Item text you can edit
separator
code
console.log("Hello World");
Forms
my-token
Radix
my-token
Utility
my-token
Slots
my-slot
Custom
badge
The text you can edit
Card
The text you can edit
Heading text you can edit
Paragraph text you can edit
is-card-horizontal
The text you can edit
Heading text you can edit
Paragraph text you can edit
Testimonial
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Client Name
“
Section Header
Case Studies
Solving user & business problems since last 15+ years. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
my-token
Notes
Add notes for yourself or other creators that explain any nuances of the build.
The following CSS variables were the modifications or additions made to the default Craft variables, jyfi.
--foreground-primary: var(--gray-12); --foreground-muted:
var(--gray-6); --foreground-accent: var(--green-8);
--foreground-border: var(--gray-11); --background-primary:
var(--gray-0); --background-secondary: var(--gray-12);
--background-tertiary: var(--gray-11); --background-accent:
var(--foreground-accent); --background-card:
var(--background-primary); --shadow-accent: 0px 8px 30px
rgba(63, 142, 0, 0.5); --font-family-primary: "IBM Plex
Mono", Arial; --font-family-secondary: "Raleway",
Arial; --gray-0: #FFFFFF; --gray-2: #F8F8F8; --gray-4: #D8D8D8;
--gray-6: #9C9C9C; --gray-7: #757575; --gray-11: #1B1B1B;
--gray-12: #080808; --green-0: #E0FFF8; --green-6: #62BA1B;
--green-7: #3F8E00; --green-8: #398000; --blue-2: #D0E6FF;
--blue-7: #000AFF; --teal-6: #2AB090; --teal-9: #1d7b65;
--orange-9: #99610e; --orange-7: #FFA217; --orange-0: #FFF6E9;
--gray-1: unset; --gray-3: unset; --gray-5: unset; --gray-8:
unset; --gray-9: unset; --gray-10: unset; --green-1: unset;
--green-2: unset; --green-3: unset; --green-4: unset; --green-5:
unset; --green-9: unset; --green-10: unset; --green-11: unset;
--green-12: unset; --blue-0: unset; --blue-1: unset; --blue-3:
unset; --blue-4: unset; --blue-5: unset; --blue-6: unset;
--blue-8: unset; --blue-9: unset; --blue-10: unset; --blue-11:
unset; --blue-12: unset; --teal-0: #E0FFF8; --teal-1: unset;
--teal-2: unset; --teal-3: unset; --teal-4: unset; --teal-5:
unset; --teal-7: unset; --teal-8: unset; --teal-10: unset;
--teal-11: unset; --teal-12: unset; --orange-1: unset;
--orange-2: unset; --orange-3: unset; --orange-4: unset;
--orange-5: unset; --orange-6: unset; --orange-8: unset;
--orange-10: unset; --orange-11: unset; --orange-12: unset;
--yellow-1: unset; --yellow-2: unset; --yellow-3: unset;
--yellow-4: unset; --yellow-5: unset; --yellow-6: unset;
--yellow-7: unset; --yellow-8: unset; --yellow-9: unset;
--yellow-10: unset; --yellow-11: unset; --yellow-12: unset;
--gap-m: var(--size-fluid-5); --gap-s: var(--size-fluid-3);
--gradient-1: linear-gradient(to right, #484848 0%, rgba(27, 27,
27, 0) 100%);