Global CSS
To set up global CSS at the beginning of a project some things you need to do are:
-
Tailwind Typography (Prose) Set Up
-
theme.jsonSet Up -
tailwind.config.jsSet Up -
Fonts Set Up
Tailwind Typography (Prose)
In our current iteration of Origins we use Tailwind Typography (Prose) to achieve our global styles. With our global styles our goal is to cover all of the default styling across the site to the best of our ability. This will save us time from having to reapply the same styling classes in multiple places, as well as help keep our site consistent in styling. The best way to think about it is that, if someone were to make a blog post on the site, they likely wouldn't be using any custom made blocks. They would be using WordPress Core blocks, primarily core/headings and core/paragraph. They may also use core/list and hyperlinks, and less frequently core/table or core/blockquote among others. With global styles, our goals should be to make sure that these core elements look good and fit the theme style when used without any furthur customization.
When we make custom blocks we can choose to apply the prose styling that we've written out as the defaults if we want to. We also have more control over the styling in blocks so we could apply prose but overwrite some of the styles situationally if there are some exceptions to the global styling we've set. We could choose not to use prose at all for a block if the global styles are not accurate to how the block should look. Or if many blocks across the site have similar styling but it don't match the global styling that we set as the default when we wrote it for the blog, we could make a separate prose class for them to be able to apply across multiple blocks.
Start by reviewing the mockup that you have been given for a site, specifically the blog page or something that resembles a large block of WordPress core blocks if the site will not have a blog. Mark down the sizing and other CSS attributes for headings (h1, h2, h3, h4, h5, h6), pargraphs (p), links (a) or any of the other html elements that match core blocks that might be needed on the site at both mobile and desktop sizes. We typically make separate prose classes for desktop and mobile and apply the approriate class at the appropriate breakpoints for responsiveness.
Then open up your tailwind-typography.config.js. The DEFAULT class will apply any time the prose class is used, so if a secondary prose class is being made it only needs to outline css attributes that differ from the DEFAULT prose class. because Tailwind uses a mobile-first breakpoint system, it's best practice to make DEFAULT your mobile global styles, and then if desktop varies from mobile, make a secondary class that outlines in what ways the desktop global styles differ from the mobile styles (typically the sizes of all headings and paragraphs will need to be addressed here, but if you have outlined in DEFAULT that images should not have the margin that WordPress tries to give them, you should be able to omit that if they should still not have margins in the desktop global styles). Origins boilerplate has two classes already started that can be modified DEFAULT and lg.
// tailwind-typography.config.js
module.exports = {
theme: {
fontFamily: {
body: ['"Roboto"', 'sans-serif'],
},
extend: {
typography: () => ({
/**
* Tailwind Typography’s default styles are opinionated, and
* you may need to override them if you have mockups to
* replicate. You can view the default modifiers here:
*
* https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js
*/
DEFAULT: {
css: [
{
color: 'black',
/**
* By default, max-width is set to 65 characters.
* This is a good default for readability, but
* often in conflict with client-supplied designs.
* A value of false removes the max-width property.
*/
maxWidth: false,
h1: {
color: 'inherit',
fontSize: '3.052rem',
fontWeight: '400',
'line-height': '1.75',
'margin-bottom': '0.8em',
},
h2: {
color: 'inherit',
fontSize: '2.441rem',
fontWeight: '400',
'line-height': '1.75',
'margin-top': 0,
'margin-bottom': '0.7em',
},
h3: {
color: 'inherit',
fontSize: '1.953rem',
fontWeight: '400',
'line-height': '1.75',
},
h4: {
color: 'inherit',
fontSize: '1.563rem',
fontWeight: '400',
'line-height': '1.75',
},
h5: {
color: 'inherit',
fontSize: '1.25rem',
fontWeight: '400',
'line-height': '1.75',
},
h6: {
color: 'inherit',
fontSize: '1rem',
fontWeight: '400',
'line-height': '1.75',
},
p: {
color: 'inherit',
fontSize: '1rem',
fontWeight: '400',
'line-height': '1.75',
},
strong: {
color: 'inherit',
fontWeight: '700',
},
a: {
color: 'inherit',
cursor: 'pointer',
'font-weight': '600',
transition: 'color 0.2s ease-in-out',
},
'a:hover': {
color: 'inherit',
},
ul: {},
ol: {},
'ul, ol': {
'padding-inline-start': '30px',
'& li': {
'padding-left': '0px',
'margin-top': '0px',
'margin-bottom': '0px',
},
'& li::marker': {
color: 'var(--origins-primary)',
},
},
img: {
'margin-top': '0',
'margin-bottom': '0',
},
table: {},
thead: {},
tbody: {},
tfoot: {},
tr: {},
th: {},
td: {},
figure: {
'margin-top': '0',
'margin-bottom': '0',
},
figcaption: {},
code: {},
hr: {},
video: {},
details: {
summary: {
'&::marker': {
color: 'var(--origins-primary)',
},
},
},
blockquote: {
borderLeftStyle: 'solid',
},
'blockquote > cite': {},
'blockquote > cite::before': {},
/**
* Block editor styles use 1px borders for the top
* and bottom of the `hr` element. The rule below
* removes the bottom border, as Tailwind
* Typography only uses the top border.
*/
hr: {
borderBottom: 'none',
margin: '1rem',
},
'--tw-prose-hr': 'var(--origins-primary)',
},
],
},
// Additional prose classes should outline css attributes that DIFFER from the default prose class in the cases that they are used.
'lg': {
css: [
{
color: 'black',
maxWidth: false,
h1: {
color: 'inherit',
fontSize: '4.578rem',
fontWeight: '400',
'line-height': '1.75',
'margin-bottom': '0.8em',
},
h2: {
color: 'inherit',
fontSize: '3.662rem',
fontWeight: '400',
'line-height': '1.75',
'margin-top': 0,
'margin-bottom': '0.7em',
},
h3: {
color: 'inherit',
fontSize: '2.93rem',
fontWeight: '400',
'line-height': '1.75',
},
h4: {
color: 'inherit',
fontSize: '2.345rem',
fontWeight: '400',
'line-height': '1.75',
},
h5: {
color: 'inherit',
fontSize: '1.875rem',
fontWeight: '400',
'line-height': '1.75',
},
h6: {
color: 'inherit',
fontSize: '1.5rem',
fontWeight: '400',
'line-height': '1.75',
},
p: {
color: 'inherit',
fontSize: '1.5rem',
fontWeight: '400',
'line-height': '1.75',
},
},
],
},
}),
},
},
};
Note: It is helpful to start a page called Style Guide for a project, where you put one of each block or core block. In particular core blocks for when you are setting your global styles. This way you can test that it's working and that it looks how you expect it to look. The Style Guide can also be useful to showcase each custom block that has been made to the editors, and show them what they can expect the core WordPress blocks to look like as well.
Applying Prose Styling
To apply prose styling settings that you have written to a page or block is just a matter of incuding the class. In the example below, the single.twig file has prose (the DEFAULT class for prose) being apply until it reaches the lg breakpoint, at which point prose-lg is applied.
{% extends "base.twig" %} {% block content %}
<div class="prose lg:prose-lg page-content">
<h1>{{ post.title }}</h1>
{{ post.content }}
</div>
{% endblock %}
Some prose classes are already applied throughout the Origins boilerplate.
Overwritting Prose Styling
If you have a block that you are applying prose to because the styling applies to most of the elements within that block but not all you may want to use a prose modifier class. Here is an example of a block that prose worked well for except the headers needed to be a different color than the default:
<div class="max-w-[1224px] m-auto prose lg:prose-lg prose-headings:text-blue-700 has-global-padding">
{% for blog in data.blogs %}
<a href="{{ blog.link }}" class="no-underline"> <h3>{{blog.title}}</h3></a>
<span class="text-base">{{blog.date}}</span>
<p>{{blog.excerpt({read_more: ''})}}</p>
<a href="{{blog.link}}">Read More</a>
{% endfor %}
</div>
The prose-headings:text-blue-700 class is the modifier to change all headings to a specific color. You use a selector for before the colon (prose- then what you want to select, headings, p, h5 specifically, etc.) and then a regular tailwind class to style it in a different way than the prose settings.
You can read more about tailwind typography from their documentation.
theme.json
theme.json is a powerful tool provided by WordPress that allows us to optionally add configurations to the editor for the user to use that affect styling in predictable ways on the front-end. Depending on the site, there are functionalities that can be provided to the user through the theme.json that you may want, or that you may want to stay away from to limit their freedom to alter the theme style.
Please view WordPress's documentation on theme.json or FullSiteEditing for a more indepth view of just what all you can accomplish inside of theme.json.
Here I will just show some of the things we usually start with when setting up global styles for a site inside of our theme.json.
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"useRootPaddingAwareAlignments": true,
"color": {
"palette": [
{ "slug": "white", "color": "#ffffff", "name": "white" },
{ "slug": "black", "color": "#000000", "name": "black" },
{ "slug": "leadpoint-blue", "color": "var(--origins-primary)", "name": "Leadpoint Blue" },
{"slug": "leadpoint-green", "color": "var(--origins-secondary)", "name": "Leadpoint Green" },
],
"custom": true,
"customGradient": true,
"link": true
},
"typography": {
"customFontSize": true,
"dropCap": true,
"fluid": true,
"fontSizes": [
{
"name": "Small",
"size": "1.5rem",
"slug": "small"
},
{
"name": "Medium",
"size": "2.25rem",
"slug": "medium"
},
{
"name": "Large",
"size": "3.75rem",
"slug": "large"
},
{
"name": "Extra Large",
"size": "6rem",
"slug": "extra-large"
}
]
},
"layout": {
"contentSize": "1400px",
"wideSize": "1920px"
}
},
"styles": {
"spacing": {
"padding": {
"top": "0",
"right": "var(--og--global-padding)",
"bottom": "0",
"left": "var(--og--global-padding)"
}
}
}
}
In the sample theme.json above, we have added some theme colors to the site. This makes these color appear in the editor in several different places so the users can select that color for use across the site (i.e. for changing the color of text or backgrounds). In this particular example we have set them to variables that are tied to colors chosen in the customizer menu, however they can also be set to defined values (in hex or rgba.)
We frequently also add predefined gradients if a site design has gradients that are reapplied in different places across the site.
Further down you can see the layout secion with defined content size and width size. These options correspond to "None" and "Wide Width" if you go to change the size of a block. There is also "Full" which by default spans the whole screen width. These settings can be turned on and off individually for blocks but sometimes we want to keep these settings as well. Regardless we should set content width to the average width of all blocks in the site markup that don't span full screen except for some outliers that are larger/wider than most blocks. You can set wide width the be the width of those larger outliers average. We are not set to just these two widths. If a block doesn't fit these options we can turn off the alignment options, force it to full screen, and type a specific max-width for the block somewhere within the blocks tailwind css if need be. But in general during global styling setup our goal should be covering the majority of cases.
Lastly, in the spacing sections, we have set padding equal to a variable that we've defined elsewhere called --og--global-padding. This will help keep our padding consisten across the site for all non-full width blocks consistent (and should also be applied inside full width blocks if they contain content so that content inside of those blocks doesn't hit the sides of the screen).
If you need to change the value of --og--global-padding, it is in /resources/assets/styles/tailwind/base.css.
tailwind.config.js
There is not too much that you should need to do in the tailwind.config.js file, because the theme-provider.js should convert the colors, font families, font sizes, and content widths from theme.json as extended classes that can be used with Tailwind.
Example:
The above code from our theme.json allows us to use Tailwind classes such as text-leadpoint-blue or bg-leadpoint-blue.
And that allows us to use Tailwind classes such as max-w-content and max-w-wide.
Add any additional class extensions that you think you may need for use across the site manually (we frequently have to add gradients that are used repeatedly across the site as an easy to apply class). See example below.
theme: {
extend: {
backgroundImage: {
'leadpoint-gradient':
'radial-gradient(ellipse at center, var(--origins-primary) 0%, var(--origins-secondary) 73%)',
},
animation: {
'spin-slow': 'spin 10s linear infinite',
},
breakpoints: {
'3xl': '1920px',
},
},
}
Fonts
Coming soon!