Skip to content
Bufferthemes

Layout Options

Layout Options

Your Bufferthemes theme comes with flexible layout options that can be customized to match your needs. This guide covers the main layout customization features.

Basic Layout Structure

Our themes typically follow this structure:

src/
├── layouts/
│   ├── BaseLayout.astro
│   ├── PostLayout.astro
│   └── PageLayout.astro
├── components/
│   ├── Header.astro
│   ├── Footer.astro
│   └── Sidebar.astro

Customizing Layouts

Container Width

Modify the main container width in your CSS:

.container {
  --container-width: 1200px;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1rem;
}

Grid System

Our themes use CSS Grid for flexible layouts. Customize the grid settings:

.grid-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap, 2rem);
}

Responsive Breakpoints

Adjust the responsive breakpoints in your theme configuration:

module.exports = {
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    }
  }
}

Common Layout Patterns

src/layouts/SidebarLayout.astro
<div class="layout-with-sidebar">
  <aside class="sidebar">
    <slot name="sidebar" />
  </aside>
  <main class="main-content">
    <slot />
  </main>
</div>


<style>
  .layout-with-sidebar {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;
  }


  @media (max-width: 768px) {
    .layout-with-sidebar {
      grid-template-columns: 1fr;
    }
  }
</style>

Header Options

Customize the header position and behavior:

.header {
  /* Fixed header */
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;


  /* Or sticky header */
  position: sticky;
  top: 0;
}

Spacing System

Our themes use a consistent spacing scale. Customize it in your configuration:

module.exports = {
  theme: {
    spacing: {
      px: '1px',
      0: '0',
      1: '0.25rem',
      2: '0.5rem',
      3: '0.75rem',
      4: '1rem',
      // ... other spacing values
    }
  }
}

Best Practices

  • Keep layouts consistent across pages
  • Ensure layouts are responsive
  • Use semantic HTML structure
  • Consider content hierarchy
  • Test layouts across different screen sizes

Need help with layouts? Check out our support documentation or contact our team.