Design system
*taken from twenty twenty four and ollie theme
https://www.gutenberg-devtools.com/generator/themejson-support
Colours
Brand: primary, secondary, tertiary, quaternary, quinary, senary, septenary, octonary, nonary, and denary
Variations: primary-accent, primary-contrast
Percentages: primary-10
Utility: success, error, warning, highlight
Base(eg: black to white ): base, base-10
Text default: primary-text, secondary-text…
Backgrounds: primary-background…
Dark or Light: primary-dark, primary-text-dark, primary-background-dark
"settings": {
"appearanceTools": true,
"color": {
"defaultDuotone": false,
"defaultPalette": false,
"defaultGradients": false,
"palette": [
{
"name": "Primary",
"slug": "primary",
"color": "#4d34fa"
},
{
"name": "Primary",
"slug": "primary-10",
"color": "#edebff"
},
{
"name": "Base",
"slug": "base",
"color": "#000000"
},
{
"name": "Primary Background",
"slug": "primary-background",
"color": "#ffffff"
}
]
}
}
Duotone
primary-duotone, secondary-duotone, custom-duotone, grayscale….
"duotone": [
{
"name": "Primary Duotone",
"slug": "primary-duotone",
"colors": [
"#4d34fa",
"#edebff"
]
},
{
"name": "Sunset",
"slug": "sunset",
"colors": [
"#FF3253",
"#FFDC53"
]
},
{
"name": "Grayscale",
"slug": "grayscale",
"colors": [
"#000",
"#fff"
]
}
]
Gradients
"gradients": [
{
"name": "Primary",
"slug": "primary",
"gradient": "linear-gradient(135deg, #4d34fa, #edebff)"
},
{
"name": "Primary to Secondary",
"slug": "primary-to-secondary",
"gradient": "linear-gradient(135deg, #4d34fa, #636381)"
},
{
"name": "Purple",
"slug": "purple",
"gradient": "linear-gradient(135deg, #4D34FA, #ad34fa)"
},
{
"name": "Base",
"slug": "base",
"gradient": "linear-gradient(135deg, #000000, #ffffff)"
},
]
Typography custom settings
"typography": {
"dropCap": false,
"fluid": true,
"fontFamilies": [
{
"fontFace": [
{
"fontFamily": "\"Playfair Display\"",
"fontStyle": "normal",
"fontWeight": "700",
"src": "https://racerpacer.com/wp-content/uploads/fonts/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKeiukDVZNLo_U2r.woff2"
},
{
"fontFamily": "\"Playfair Display\"",
"fontStyle": "italic",
"fontWeight": "700",
"src": "https://racerpacer.com/wp-content/uploads/fonts/nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_k-UbtPK-F2rA0s.woff2"
}
],
"fontFamily": "\"Playfair Display\", serif",
"name": "Playfair Display",
"slug": "heading"
}],
"fontSizes": [
{
"fluid": {
"min": ".9rem",
"max": "1rem"
},
"size": "1rem",
"slug": "x-small",
"name": "Extra Small"
},
{
"fluid": {
"min": "1rem",
"max": "1.2rem"
},
"size": "1.2rem",
"slug": "small"
}
]
}
Font weights and line height:
"settings": {
"custom": {
"fontWeight": {
"thin": 100,
"extra-light": 200,
"light": 300,
"regular": 400,
"medium": 500,
"semi-bold": 600,
"bold": 700,
"extra-bold": 800,
"black": 900
},
"lineHeight": {
"none": 1,
"tight": 1.1,
"snug": 1.2,
"normal": 1.5,
"relaxed": 1.625,
"loose": 2,
"body": "calc(1px + 2ex + 7px)"
}
}
}
Spacing settings
"settings": {
"spacing": {
"spacingSizes": [
{
"name": "Small",
"size": "clamp(.5rem, 2.5vw, 1rem)",
"slug": "small"
},
{
"name": "Medium",
"size": "clamp(1.5rem, 4vw, 2rem)",
"slug": "medium"
},
{
"name": "Large",
"size": "clamp(2rem, 5vw, 3rem)",
"slug": "large"
},
{
"name": "Extra Large",
"size": "clamp(3rem, 7vw, 5rem)",
"slug": "x-large"
},
{
"name": "2xl",
"size": "clamp(4rem, 9vw, 7rem)",
"slug": "xx-large"
},
{
"name": "3xl",
"size": "clamp(5rem, 12vw, 9rem)",
"slug": "xxx-large"
},
{
"name": "4xl",
"size": "clamp(6rem, 14vw, 13rem)",
"slug": "xxxx-large"
}
]
}
}
adding a block with all the possible slick slider settings is a bit of a chore so the following is a way to simplify it by using data-slide attributes.
$data_slick = get_field('data_slick');
$responsive = get_field('responsive');
if ($responsive) {
$responsive = ', "responsive": [' . $responsive . ']';
} else {
$responsive = '';
}
data-slick='{<?php if ($data_slick) { echo $data_slick . $responsive; } ?>}'
c
Example field settings for data_slick text area ACF field:
“slidesToShow”: 2, “dots”: false, “slidesToScroll”: 1, “autoplay”: true, “infinite”: true, “speed”: 200, “fade”: true
Example field settings for responsive options using a text area ACF field:
{“breakpoint”:600, “settings”:{“slidesToShow”: 1, “dots”: true}}
or
{“breakpoint”:600, “settings”:{“slidesToShow”: 1, “dots”: true}}, {“breakpoint”:1000, “settings”:{“slidesToShow”: 2, “dots”: true}}
Important
don’t having trailing commas where they are not needed!
use double quotes for all properties
check that each of your settings at each of the breakpoints are being applied!
More details: https://kenwheeler.github.io/slick/
PHP:
- File Names:
- Use lowercase letters.
- Separate words with underscores (_).
- Example:
my_custom_template.php
- Function Names:
- Use lowercase letters.
- Use underscores to separate words.
- Be descriptive and use verbs for functions.
- Example:
get_post_title()
- Variable Names:
- Use lowercase letters.
- Use underscores to separate words.
- Be descriptive and use nouns for variables.
- Example:
$user_id
- Class Names:
- Use uppercase letters for the first letter of each word (PascalCase).
- Be descriptive and use nouns.
- Example:
My_Custom_Class
- Constants:
- Use uppercase letters.
- Separate words with underscores.
- Example:
MY_CONSTANT_VALUE
- Hooks (Actions and Filters):
- Use lowercase letters.
- Use underscores to separate words.
- Be descriptive and use verbs for actions.
- Example:
add_action('init', 'my_custom_function');
- Prefixes:
- Add a unique prefix to your functions, variables, classes, etc., to avoid naming conflicts.
- Example:
myplugin_custom_function()
- Database Tables:
- Use lowercase letters.
- Separate words with underscores.
- Be descriptive and use nouns.
- Example:
wp_my_plugin_settings
CSS/SCSS:
- Selectors (Classes and IDs):
- Use lowercase letters.
- Separate words with hyphens (-).
- Be descriptive.
- Example:
.my-custom-container
or#my-custom-element
- Naming for Styles:
- Use lowercase letters.
- Be descriptive and use hyphens to separate words.
- Example:
font-size
,background-color
- File Names:
- Use lowercase letters.
- Separate words with hyphens (-).
- Example:
styles.css
ormain-styles.scss
JavaScript:
- Variable Names:
- Use camelCase for variables.
- Be descriptive and use nouns.
- Example:
myVariableName
- Function Names:
- Use camelCase for functions.
- Be descriptive and use verbs.
- Example:
getUserData()
- Object Names:
- Use camelCase.
- Be descriptive and use nouns.
- Example:
myObject
- Constants:
- Use uppercase letters.
- Separate words with underscores.
- Example:
MAX_VALUE
- Event Handlers:
- Use camelCase.
- Be descriptive.
- Example:
onClickHandler
- File Names:
- Use lowercase letters.
- Separate words with hyphens (-).
- Example:
main-script.js