Figma to Bricks — Deeblessed Website Build | Cards, CPTs & Query Loops (Ep 3)

This is Episode 3 of the Deeblessed Website Build in the Figma to Bricks series.

In this episode, the build moves from layout execution into system-driven components.

After completing the Hero and initial sections on the Home page, I begin setting up reusable card structures and laying the foundation for Testimonials — focusing on scalability, naming discipline, and dynamic data.

This is where the project starts behaving like a system, not just a page.

As the build evolves, deeper concepts naturally come into play — not as theory, but as requirements of the work.

In this video, you will see:
- How I create modifier classes to extend components without duplication
- Why Testimonials deserve their own Custom Post Type (CPT)
- How I apply BEM naming (Block, Element, Modifier) for predictable styling
- Setting up and configuring a Bricks Query Loop
- Mapping dynamic data (images, titles, content) into components
- Styling card layouts systematically
- Using :nth-child for targeted styling
- Applying CSS Logical Properties for future-proof spacing

Timestamps:
01:03:50 – Creating Modifier Classes (Button No Stroke)
01:17:20 – Why we use Custom Post Types (CPT) for Testimonials
01:23:00 – BEM Naming Strategy (Block, Element, Modifier)
01:24:20 – Setting up the Bricks Query Loop
01:25:30 – Mapping Dynamic Data (Images, Titles, Content)
01:30:30 – Styling the Card Layout
01:35:40 – Advanced CSS: Using :nth-child to Style Specific Cards
01:36:20 – Using CSS Logical Properties (margin-inline-start)

Tools Used:
- Bricks Builder
- Core Framework
- Advanced Themer

Original UI Design by:
Ejemighaye Oghenemaro
LinkedIn: https://www.linkedin.com/in/ejemighaye-maro/

Connect with me:
LinkedIn: https://www.linkedin.com/in/mimamhebron
Website: https://hebronmimam.com

Видео Figma to Bricks — Deeblessed Website Build | Cards, CPTs & Query Loops (Ep 3) канала Hebronmimam