Figma To Pug Sass

Implementation Procedure

Step 1 — Analyze the Design

• Identify all sections in the image and their visual hierarchy
• Note: background colors, typography sizes, spacing, border radius, shadows
• Note: responsive breakpoints that are visible (desktop vs mobile)
• Map each visual token to a project token using token-mapping.md
• Identify repeating patterns that should be Pug mixin or Sass @apply blocks

Step 2 — Plan the Markup Structure

Before writing Pug, plan the HTML structure:

page
└── section.section-[name]          ← wrap every main block in section
    └── .container
        └── .row                    ← use when flex columns are needed
            ├── .col(lg:w-6/12)
            └── .col(lg:w-6/12)

Rules:

• section.section-[name] naming applies inside <main> only (not header/footer)
• Class attributes must be written as div(class="...") not div.class-name for Tailwind utilities
• Use semantic heading hierarchy: one h1 per page, h2 for section titles, h3 for cards

Step 3 — Map Design Tokens

Use project tokens from tailwind.config.js (not arbitrary values) wherever possible.
Consult token-mapping.md for spacing, font-size, color, and breakpoint references.

Key rules:

• Spacing: use scale values like mt-10 (= 40px), p-6 (= 24px)
• Font size: use named sizes like text-2xl (= 24px), text-base (= 16px)
• Arbitrary pixel values MUST use rem: prefix: rem:text-[18px] not text-[18px]
• Breakpoints order: mobile-first, use lg:, xl:, 2xl: for desktop layout

Step 4 — Write Pug Markup

section.section-hero
  .container
    .row
      .col(class="lg:w-7/12")
        h1.section-hero__title Tiêu đề chính
        p.section-hero__desc Mô tả nội dung
        a.btn(href="#") Xem thêm
      .col(class="lg:w-5/12")
        +PugImg()

Rules:

• Use +PugImg() mixin for ALL images — never hardcode img tags with paths
• Use Font Awesome classes for icons — never inline SVG
• div.row > div.col pattern for flex column layouts
• Tailwind utilities go inside class="" attribute

Step 5 — Write Sass

.section-hero
  @apply py-20 bg-white

  &__title
    @apply text-3xl font-bold text-gray-900 mb-6

  &__desc
    @apply text-base text-gray-600 mb-8

Rules:

• Use BEM-style naming: .section-hero__title, .section-hero__desc
• Use @apply for all Tailwind utilities inside Sass blocks
• File lives alongside the .pug file in src/components/[section-name]/
• Import the sass file in src/components/_core/index.sass if it's a new component

Step 6 — Add Interactions (if needed)

• General UI interactions → src/js/main.js
• Swiper/slider logic → src/js/swiper.js
• Use jQuery ($()) syntax
• Initialize on $(document).ready() or $(window).on('load', ...)

Step 7 — QA Pass

Compare the rendered output to the design image:

• Desktop layout matches design (1920px baseline)
• Typography size, weight, and color are correct
• Spacing between elements matches design
• Images are in correct positions and aspect ratios
• Colors match design (check against Tailwind config custom colors)
• Responsive behavior looks appropriate on mobile
• No Sass compile errors or missing @apply tokens

Common Patterns

Card Grid

.row
  each item in [1,2,3]
    .col(class="lg:w-4/12")
      .card-item
        +PugImg()
        h3.card-item__title Tiêu đề
        p.card-item__desc Mô tả

Section with Background Image

section.section-intro(style="background-image: url(...)")
  .container
    h2.section-intro__title ...

.section-intro
  @apply relative bg-cover bg-center
  // use tailwind class, not hardcoded CSS

Marquee / Slider Section

• Wrap slides in .swiper-wrapper > .swiper-slide
• Initialize in src/js/swiper.js using new Swiper()

References

• File Conventions — where to put files
• Token Mapping — spacing, font, color, breakpoint tokens
• Implementation Checklist — pre-submit QA checklist