PB101: L15 - Complete Walkthrough of Templates & Components

In L07 and L08 we talked a lot about DRY development practices when styling websites using classes and variables.

Where BEM classes and variables give you a single source of truth for styling elements, Templates and Components give you a single source of truth for the HTML, PHP, and Javascript of pages and elements.

Templates allow you to dynamically generate many different pages from one single source of truth while Components allow you to produce many instances of an element or group of elements without losing control over their structure or behavior.

The combination of BEM, tokenized styling, templates, and components is what separates truly scalable and maintainable sites from all others.

After watching this video, you'll know more about scalable and maintainable development practices than 95% of web designers, especially those who use page builders.

You'll also get a clear understanding of how to create templates (like header, footer, blog post, etc.), assign them to the proper areas of the website, and pull in dynamic content from WordPress and custom fields.

Lastly, you'll see where many page builders, including Bricks and Oxygen, are currently failing with regard to component-based development. If you want to help push these tools forward, upvote these feature requests:

Bricks: https://forum.bricksbuilder.io/t/glob...

Oxygen: https://github.com/soflyy/oxygen-bugs...

** MY TOOLS **

🔥 AutomaticCSS (ACSS) - https://automaticcss.com
🔥 Frames - https://getframes.io
See all my recommended tools here: https://geary.co/tools/

** INNER CIRCLE **

Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.

⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ ...and much more!

Learn more and join here: https://geary.co/inner-circle/

** SOCIAL **

👉 FB -   / marketingkev  
👉 LinkedIn -   / kevingeary  

** CHAPTERS **