Skip to main content

CSS to WordPress: Conversion Patterns

Practical, reusable patterns for converting AI-generated HTML/CSS into WordPress (GP+GB or Bricks).

1. Pattern: Section Hero​

HTML/CSS Version (AI-generated)​

<section class="hero">
  <div class="hero__content">
    <p class="hero__label">Welcome</p>
    <h1 class="hero__title">Headline Here</h1>
    <a href="#" class="btn-primary">Get Started</a>
  </div>
</section>
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)), url('hero.jpg') center/cover;
  text-align: center;
  color: #fff;
}

Bricks Builder Translation​

  • Structure: Section → Container (.hero-section) → Inner Container → Heading, Text, Button.
  • Custom CSS on Section: 
    %root% {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)), url('{DYNAMIC_BG}') center/cover;
      color: #fff;
    }

2. Pattern: Card Grid​

HTML/CSS Version​

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}
.card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-normal);
}
.card:hover { transform: translateY(-4px); }

GenerateBlocks Translation​

  • Structure: GB Container (.card-grid) with columns set to 3.
  • Additional CSS: 
    .card-grid > .gb-grid-wrapper {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 2rem;
    }

3. Pattern: Sticky Navigation​

HTML/CSS Version​

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(15, 15, 15, 0.9);
  backdrop-filter: blur(12px);
  padding: 1rem 2rem;
}

GeneratePress Translation​

/* In Additional CSS → target the GP header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(15, 15, 15, 0.9);
  backdrop-filter: blur(12px);
}

4. Pattern: Dark Mode Toggle​

/* In child theme style.css */
:root {
  --bg:   #fff;
  --text: #111;
}
body.dark-mode {
  --bg:   #0f0f0f;
  --text: #f0f0f0;
}
body {
  background-color: var(--bg);
  color: var(--text);
  transition: background-color 0.3s, color 0.3s;
}
// Simple toggle — can be called from a GeneratePress hook or Bricks JS field
document.body.classList.toggle('dark-mode');