Skip to main content
This wedding template uses a combination of CSS and SASS to provide flexible styling options. Learn how to customize the visual appearance to match your wedding theme.

​
Understanding the Style Structure

The template uses a modular SASS architecture that compiles to CSS:

Source Files

SASS files in assets/sass/ with variables and mixins

Compiled Output

Production CSS in assets/css/main.css

​
File Organization

assets/
├── css/
│   └── main.css          # Compiled CSS (production)
└── sass/
    ├── main.scss         # Main SASS entry point
    └── libs/
        ├── _vars.scss    # Color & typography variables
        ├── _mixins.scss  # Reusable SASS mixins
        └── _breakpoints.scss  # Responsive breakpoints

​
Changing Colors

The template uses a palette system defined in assets/sass/libs/_vars.scss: 
// Main color palette
$palette: (
  bg:          #2e3842,  // Background color
  fg:          #fff,     // Text color
  fg-bold:     #fff,     // Bold text
  fg-light:    rgba(255,255,255,0.5),  // Light text
  border:      #fff,     // Border color
  
  // Accent colors for different sections
  accent1: (
    bg:        #21b2a6,  // Teal
    fg-bold:   #ffffff
  ),
  
  accent2: (
    bg:        #00ffcc,  // Bright cyan
    fg-bold:   #ffffff
  ),
  
  accent3: (
    bg:        #00f0ff,  // Sky blue
    fg-bold:   #ffffff
  ),
  
  accent4: (
    bg:        #76ddff,  // Light blue
    fg-bold:   #ffffff
  ),
  
  accent5: (
    bg:        #505393,  // Purple
    fg-bold:   #ffffff
  ),
  
  accent6: (
    bg:        #ed4933,  // Red/coral
    fg-bold:   #ffffff
  ),
  
  accent7: (
    bg:        #ffffff,  // White
    fg-bold:   #2E3842
  )
);
1

Choose Your Approach

Decide whether to edit SASS files (recommended for major changes) or CSS directly (quick tweaks)
2

Update Color Values

Modify the hex codes in _vars.scss or main.css to your wedding colors
3

Compile SASS (if using SASS)

Run the SASS compiler to generate updated CSS:
sass assets/sass/main.scss assets/css/main.css
4

Test Your Changes

Open your website in a browser to preview the new color scheme
If you’re making quick edits, modifying main.css directly is faster. For comprehensive theming, edit the SASS variables and recompile.

​
Customizing Typography

The template uses Open Sans from Google Fonts with specific weights:

​
Font Configuration

// Font settings in _vars.scss
$font: (
  family:         ('Open Sans', Helvetica, sans-serif),
  family-fixed:   ('Courier New', monospace),
  weight:         400,      // Regular text
  weight-bold:    600,      // Bold text
  weight-extrabold: 800     // Headers
);

​
Changing the Font Family

1

Choose Your Font

Select a font from Google Fonts or use a custom font file
2

Add Font Import

In main.css or main.scss, add the import at the top:
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,600,800');
3

Update Font Family

Replace the font family in your styles:
body, input, select, textarea {
  font-family: "Playfair Display", serif;
}

​
Font Size Adjustments

/* Base font size */
body, input, select, textarea {
  font-size: 15pt;  /* Increase for larger text */
  letter-spacing: 0.075em;
}

/* Heading sizes */
h2 {
  font-size: 1.35em;
  line-height: 1.75em;
}

h3 {
  font-size: 1.15em;
  line-height: 1.75em;
}

​
Responsive Breakpoints

The template includes responsive design with predefined breakpoints: 
// Breakpoints in _vars.scss
@include breakpoints((
  xlarge:   ( 1281px,  1680px ),  // Large desktops
  large:    ( 981px,   1280px ),  // Standard desktops
  medium:   ( 737px,   980px  ),  // Tablets
  small:    ( 481px,   736px  ),  // Large phones
  xsmall:   ( null,    480px  )   // Small phones
));

​
Customizing Mobile Styles

/* Desktop styles (default) */
body {
  font-size: 15pt;
}

/* Tablet and below */
@media screen and (max-width: 736px) {
  body {
    font-size: 11pt;
    letter-spacing: 0.0375em;
  }
}
Always test your styling changes across different screen sizes to ensure responsive behavior is maintained.

​
Layout Customization

​
Adjusting Section Spacing

/* Element margins */
p {
  margin: 0 0 2em 0;  /* Bottom margin */
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 1em 0;  /* Heading margin */
}

a {
  transition: color 0.2s ease, border-bottom-color 0.2s ease;
  border-bottom: dotted 1px;  /* Underline style */
  color: inherit;
  text-decoration: none;
}

a:hover {
  border-bottom-color: transparent;  /* Remove underline on hover */
}

​
Common Customization Examples

/* Romantic Rose Gold Theme */
body {
  background: #fff5f5;
}

h1, h2, h3 {
  color: #b76e79;
}

.button.primary {
  background-color: #d4af37;
}
Use browser developer tools (F12) to experiment with CSS changes in real-time before applying them to your files.

​
Next Steps

Update Content

Learn how to change text and content

Countdown Timer

Customize the wedding countdown

Build docs developers (and LLMs) love

Get started for freeTalk to us