Generalizing this theme for usage
  • Delete all posts
  • Update the Site Logo below (favicon, square-based)
  • Empty Media Library, besides the Site Logo you just uploaded
    • This will break the image galleries below
  • Delete boilerplate SCSS in main.scss (keep all the rest)
  • Disable any default Block Variants this brand doesn’t use
  • Add in per-design Block Styles and Variants
Animation Primer & Library

Animations are managed using both an animated element, and its parent. The parent receives a class named .has-animation, which works in tandem with some JavaScript code. That code runs on page load, and then every time the page is scrolled.

Once an element has been detected as scrolled into view, the parent is appended an additional class, named .has-been-revealed. With minimal exceptions, animations are only triggered on elements with a specific animation class, that is the child of an element bearing both the classes .has-animation and .has-been-revealed.

Basic Animations
.fade-in-up
.fade-in-right
.fade-in-down
.fade-in-right
.reveal-in
.draw-in-line

.draw-in-line-80

Like the above animations, leverages the class .has-animation but also the class (on parent still) of .has-image-animation.

Advanced Animations

Tilted Text Animation:

  • As seen on Astute Homepage
  • Limited as it does not flow like real text — text is grouped by line, then sub-grouped by word

Retro Machinery Animation:

  • As seen on Astute 404
  • Static layer overlaid with two reels, underlaid by two additional reels through transparencies in main layer

Scroll-based Rings:

  • As seen on Astute Services
  • Outermost ring stays static
  • Other two rings rotate with scroll up/down
    • Middle ring rotates clockwise/counterclockwise
    • Innermost ring rotates counterclockwise/clockwise

Scroll-based Globe:

  • As seen on KSG Homepage
  • Scroll-based triggers to paginate text alongside animation
  • Most complexity in terms of planning for active and idle states of globe
SCSS Architecture

|sass/
| - meta.scss            # WP Header Comments for style meta
|
|– utils/                # Misc stuff like variables, helper classes, functions, mix-ins, and animation stuff
|   |– _variables.scss   # Sass Variables
|   |– _functions.scss   # Sass Functions
|   |– _mixins.scss      # Sass Mixins
|   |– _helpers.scss     # Class & placeholders helpers
|   |–  animations.scss  # Class & placeholders helpers
|
|– base/                 # Boilerplate, typography, normalizing -- shouldn't need edits
|   |–  normalize.scss   # Reset/normalize
|   |– _typography.scss  # Typography rules
|   ...                  # Etc…
|
|– layout/               # Globals, grid system, forms, etc.
|   |– _navigation.scss  # Navigation
|   |– _header.scss      # Header
|   |– _footer.scss      # Footer
|   |– _forms.scss       # Forms
|   ...                  # Etc…
|
|– components/           # Styles specific to widgets -- overrides for ACF Blocks go here
|   |– _buttons.scss     # Buttons -- includes default permutations
|   |– _carousel.scss    # Carousel
|   |– _cover.scss       # Cover
|   |– _dropdown.scss    # Dropdown
|   ...                  # Etc…
|
|– sections/             # Styles specific to pages
|   |– _home.scss        # Home specific styles
|   |– _contact.scss     # Contact specific styles
|   ...                  # Etc…
|
| – main.scss            # Primary Sass file -- only @import and comments in here

Anatomy of a Style Guide

Font Faces, Weights, Styles, Sizes

  • List out all font families used
  • List out all font weights used in those families
  • Styles refers to normal vs. italics, so just call out if any fonts should also have their italics variant registered (if applicable, not off font families offer italics)
  • All font sizes used, even one-offs like copyright text only used in a single place

Each Unique Text Element Instance

  • Paragraphs, Headings, List Items
  • Any permutations of those items
    • One-off text variants are still Paragraphs like “Label” or whatnot
    • Additional styles for semantic headings, such as if the H1 on Homepage differs from how an H1 would look on a Blog Post
    • Unordered list variants besides default bullet (see top level of this list)
    • Ordered list variants (number, letter, Roman num, etc.), if applicable

Other Relevant Elements

  • Callout any element with more than one permutation
    • Buttons, specifically color changes and functionality such as play buttons
    • Block Quotes

Paragraphs & Text Variants

This is normal text.

This is some fancy variant.

This is some other fancy variant

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

List Styles

  • This is an
  • unordered list
  • using default bullets
  1. This is an
  2. ordered list
  3. using numbers


ACF Custom Blocks /acf-blocks/


Blog Category Filter and API Blog Listing (two blocks)

Category block doesn’t work without the API Blog Listing block.


Breadcrumb (Dynamic)

Only works if the page has a parent page, otherwise it assumes you wanna go 🏠. Includes plain, chevron, and arrow (for now, and counting).


Flex Divider (Colorable)

Vertical line on desktop; horizontal line on mobile. There is no native vertical line in HTML, but there is for horizontal.


Hamburger Toggle (Colorable)

Must be implemented in conjunction with the meganav (see header).


Expanding Bio

Line height will look wonky pending your brand choice, will need to be refined on a per-site basis (quick and easy to do that, though).

Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my Here is my


FAQ Items (w/ Category Filter)

Filter does not render on mobile.

All

Category One

Category Two

Category One

Example Item One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales, nulla vel tristique euismod, orci erat laoreet massa, vitae accumsan augue tellus aliquet tortor. Mauris ante tortor, varius nec posuere vitae, tincidunt at tortor. Sed malesuada elementum sollicitudin. Quisque ornare neque quis orci laoreet egestas eu at justo. Vestibulum a congue nunc. Nulla ultricies tortor vel nunc rutrum scelerisque. Sed accumsan aliquet ex sit amet congue. Phasellus eu nibh ipsum. Nunc dapibus, odio sit amet tempus interdum, purus quam accumsan turpis, nec posuere metus elit vitae ipsum. Praesent non lorem id tellus pretium lacinia. Nunc porta lectus mi, eu ornare ipsum facilisis a. Nam et eros aliquet, tristique lorem ac, congue nisi. Sed faucibus ornare diam sed ultrices. Suspendisse quis blandit orci. Phasellus dictum dictum sapien eget tempus. Curabitur ut vestibulum erat.


Example Item One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales, nulla vel tristique euismod, orci erat laoreet massa, vitae accumsan augue tellus aliquet tortor. Mauris ante tortor, varius nec posuere vitae, tincidunt at tortor. Sed malesuada elementum sollicitudin. Quisque ornare neque quis orci laoreet egestas eu at justo. Vestibulum a congue nunc. Nulla ultricies tortor vel nunc rutrum scelerisque. Sed accumsan aliquet ex sit amet congue. Phasellus eu nibh ipsum. Nunc dapibus, odio sit amet tempus interdum, purus quam accumsan turpis, nec posuere metus elit vitae ipsum. Praesent non lorem id tellus pretium lacinia. Nunc porta lectus mi, eu ornare ipsum facilisis a. Nam et eros aliquet, tristique lorem ac, congue nisi. Sed faucibus ornare diam sed ultrices. Suspendisse quis blandit orci. Phasellus dictum dictum sapien eget tempus. Curabitur ut vestibulum erat.


Category Two

Example Item Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales, nulla vel tristique euismod, orci erat laoreet massa, vitae accumsan augue tellus aliquet tortor. Mauris ante tortor, varius nec posuere vitae, tincidunt at tortor. Sed malesuada elementum sollicitudin. Quisque ornare neque quis orci laoreet egestas eu at justo. Vestibulum a congue nunc. Nulla ultricies tortor vel nunc rutrum scelerisque. Sed accumsan aliquet ex sit amet congue. Phasellus eu nibh ipsum. Nunc dapibus, odio sit amet tempus interdum, purus quam accumsan turpis, nec posuere metus elit vitae ipsum. Praesent non lorem id tellus pretium lacinia. Nunc porta lectus mi, eu ornare ipsum facilisis a. Nam et eros aliquet, tristique lorem ac, congue nisi. Sed faucibus ornare diam sed ultrices. Suspendisse quis blandit orci. Phasellus dictum dictum sapien eget tempus. Curabitur ut vestibulum erat.


Example Item Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales, nulla vel tristique euismod, orci erat laoreet massa, vitae accumsan augue tellus aliquet tortor. Mauris ante tortor, varius nec posuere vitae, tincidunt at tortor. Sed malesuada elementum sollicitudin. Quisque ornare neque quis orci laoreet egestas eu at justo. Vestibulum a congue nunc. Nulla ultricies tortor vel nunc rutrum scelerisque. Sed accumsan aliquet ex sit amet congue. Phasellus eu nibh ipsum. Nunc dapibus, odio sit amet tempus interdum, purus quam accumsan turpis, nec posuere metus elit vitae ipsum. Praesent non lorem id tellus pretium lacinia. Nunc porta lectus mi, eu ornare ipsum facilisis a. Nam et eros aliquet, tristique lorem ac, congue nisi. Sed faucibus ornare diam sed ultrices. Suspendisse quis blandit orci. Phasellus dictum dictum sapien eget tempus. Curabitur ut vestibulum erat.



“Details” Items (FAQ but w/o Filter)

Example Category

Example Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales, nulla vel tristique euismod, orci erat laoreet massa, vitae accumsan augue tellus aliquet tortor. Mauris ante tortor, varius nec posuere vitae, tincidunt at tortor. Sed malesuada elementum sollicitudin. Quisque ornare neque quis orci laoreet egestas eu at justo. Vestibulum a congue nunc. Nulla ultricies tortor vel nunc rutrum scelerisque. Sed accumsan aliquet ex sit amet congue. Phasellus eu nibh ipsum. Nunc dapibus, odio sit amet tempus interdum, purus quam accumsan turpis, nec posuere metus elit vitae ipsum. Praesent non lorem id tellus pretium lacinia. Nunc porta lectus mi, eu ornare ipsum facilisis a. Nam et eros aliquet, tristique lorem ac, congue nisi. Sed faucibus ornare diam sed ultrices. Suspendisse quis blandit orci. Phasellus dictum dictum sapien eget tempus. Curabitur ut vestibulum erat.

Example Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales, nulla vel tristique euismod, orci erat laoreet massa, vitae accumsan augue tellus aliquet tortor. Mauris ante tortor, varius nec posuere vitae, tincidunt at tortor. Sed malesuada elementum sollicitudin. Quisque ornare neque quis orci laoreet egestas eu at justo. Vestibulum a congue nunc. Nulla ultricies tortor vel nunc rutrum scelerisque. Sed accumsan aliquet ex sit amet congue. Phasellus eu nibh ipsum. Nunc dapibus, odio sit amet tempus interdum, purus quam accumsan turpis, nec posuere metus elit vitae ipsum. Praesent non lorem id tellus pretium lacinia. Nunc porta lectus mi, eu ornare ipsum facilisis a. Nam et eros aliquet, tristique lorem ac, congue nisi. Sed faucibus ornare diam sed ultrices. Suspendisse quis blandit orci. Phasellus dictum dictum sapien eget tempus. Curabitur ut vestibulum erat.


Search Results (Colorable)

Dynamically shows results from search query when added to a “Search” Gutenberg template. If not part of that template, will render a list of all pages.

What to Ask Your Doctor Before Taking a GLP-1 in Recovery

Medically reviewed by Dr. Aaron Wilson, Chief Medical Officer of Meadows Behavioral Healthcare. GLP-1 medications have become part of a much bigger conversation than diabetes, weight loss, or appetite. More people are asking whether medications like Ozempic, Wegovy, Mounjaro, and Zepbound may also affect cravings for alcohol, nicotine, or other substances. For someone in recovery, […]

Can Semaglutide Help With Alcohol Cravings?

Medically reviewed by Dr. Aaron Wilson, Chief Medical Officer of Meadows Behavioral Healthcare. Semaglutide has become known for treating type 2 diabetes and supporting weight management. Now, researchers are asking a different question: could it also help reduce alcohol cravings? For someone struggling with alcohol use, that question can feel personal. Cravings can be loud, […]

When Sports Betting Becomes a Problem: Signs and Next Steps

Sports betting has changed quickly. What once required a casino, sportsbook, or private betting arrangement is now available from a phone, often within seconds. For many people, betting on a game stays occasional and recreational. But for others, especially when betting becomes frequent, secretive, emotional, or hard to stop, it can become a serious behavioral […]

Why Co-Occurring Disorders Are Common & How to Treat Them

Learn why co-occurring disorders—addiction and mental health—are so common, how they interact, and why treating both is key to recovery.

How Veterans Can Get Addiction Treatment with TRICARE

For anyone who doesn’t have a family member, colleague, or close friend who has served in the military, sometimes the only window into the unique challenges of a soldier’s life is from a big-budget blockbuster like 1917, Saving Private Ryan, or Platoon — or more detailed accounts found on the small screen, such as the miniseries Band of Brothers or The Pacific.

The common thread in all these stories? Deployments are stressful and, not surprisingly, they take a serious toll on your body, mind, and the relationships that matter most. As a result, many service members develop unhealthy coping mechanisms like substance abuse, depression, and alcohol misuse, which can follow them into retirement and provide a new set of challenges.

GLP-1s and Addiction Treatment: Setting a Thoughtful Standard

GLP-1 receptor agonists (often called GLP-1s) are best known for their role in diabetes and weight management. More recently, they have drawn attention for their potential impact on cravings, impulse control, and compulsive behaviors. At The Meadows, we are committed to responsible innovation and are carefully exploring this emerging area. GLP-1s are not intended for […]

Why Alcohol Abuse in Firefighters is Common (And How to Find Help)

Alcohol addiction doesn’t always look the way people expect. Some firefighters keep showing up to work, doing their job well, and handling responsibilities without obvious issues. From the outside, everything can seem normal. At home, though, it may be a different story. Mood changes, distance, and reliance on alcohol to unwind can start to show […]

What is Combat Trauma? Steps to Heal Military PTSD Symptoms

It may be shocking to discover that the deadliest threat to active U.S. military members and veterans is not combat — it’s suicide. The United Service Organizations (USO) and other organizations are taking steps to prevent suicide among our soliders, especially those who are at higher risk due to military trauma, stress, or mental health concerns. If you have a friend or family member who is a current or former member of the armed services, it’s important to know the risk factors and how you can help prevent tragic outcomes. 

How Common Is Cannabis‑Induced Psychosis — and How Long Does It Last?

Cannabis is often viewed as low‑risk or “natural,” but for some individuals — especially those who use it often or use high‑THC products — it can trigger serious mental health reactions. One possible reaction is cannabis‑induced psychosis.  Clinicians describe these reactions in clinical texts such as The Other Side of Cannabis: Impact on Mental and […]

How Does Addiction Affect a Person’s Life?

Addiction rarely stays contained to one area of life. What may begin as occasional substance use can gradually start affecting mental health, relationships, daily routines, and overall well-being. For many people, these changes happen slowly: Mood shifts become more noticeable, responsibilities feel harder to manage, and relationships may become strained or distant. Over time, substance […]


Multiple Gallery Image Gallery