Search

Advanced Search

Custom Layouts

Learn how to create and customize layouts for your Arsxy Theme site

While Arsxy Theme comes with several pre-designed layouts, you may want to create your own custom layouts for specific content types or page designs. This guide will walk you through the process of creating and implementing custom layouts.

Understanding Jekyll Layouts

Jekyll layouts are templates that wrap around your content. They allow you to have a consistent look and feel across your site without duplicating code in each page.

Creating a New Layout

  1. Create a layout file: Create a new HTML file in the _layouts directory of your project:
_layouts/
  ├── default.html
  ├── post.html
  ├── docs.html
  └── my-custom-layout.html  # Your new layout
  1. Define the layout structure: Start with the basic structure, typically extending an existing layout:
---
layout: default
---

<div class="custom-container">
  <header class="custom-header">
    <h1>Custom Layouts</h1>
    
  </header>
  
  <div class="custom-content">
    <div class="docs-container">
  <div class="docs-content">
    <article class="docs-article">
      <header class="docs-header">
        <h1 class="docs-title">CSS Variables Reference</h1>
        
        <p class="docs-description">Complete reference for CSS custom properties (variables) used in Arsxy Theme</p>
        
      </header>

      <div class="docs-body">
        <p>Arsxy Theme uses CSS custom properties (variables) to make customization simple and consistent. This reference documents all available CSS variables and how to use them to customize your site’s appearance.</p>

<h2 id="overview">Overview</h2>

<p>CSS variables (officially called CSS custom properties) allow you to define reusable values that can be used throughout your stylesheets. The Arsxy Theme uses a comprehensive variable system to control colors, spacing, typography, and more.</p>

<h2 id="using-css-variables">Using CSS Variables</h2>

<p>To override any CSS variable, add your custom values to your <code class="language-plaintext highlighter-rouge">_sass/_custom.scss</code> file:</p>

<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nd">:root</span> <span class="p">{</span>
  <span class="na">--primary-color</span><span class="p">:</span> <span class="mh">#3490dc</span><span class="p">;</span>
  <span class="na">--heading-font-family</span><span class="p">:</span> <span class="s1">'Montserrat'</span><span class="o">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>

<h2 id="color-variables">Color Variables</h2>

<h3 id="base-colors">Base Colors</h3>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* Primary brand colors */</span>
<span class="nt">--primary-color</span><span class="o">:</span> <span class="err">#3182</span><span class="nt">ce</span><span class="o">;</span>
<span class="nt">--primary-color-rgb</span><span class="o">:</span> <span class="err">49</span><span class="o">,</span> <span class="err">130</span><span class="o">,</span> <span class="err">206</span><span class="o">;</span>  <span class="c">/* RGB values for rgba() usage */</span>
<span class="nt">--primary-color-dark</span><span class="o">:</span> <span class="err">#2</span><span class="nt">c5282</span><span class="o">;</span>
<span class="nt">--primary-color-light</span><span class="o">:</span> <span class="err">#63</span><span class="nt">b3ed</span><span class="o">;</span>

<span class="c">/* Accent color */</span>
<span class="nt">--accent-color</span><span class="o">:</span> <span class="err">#805</span><span class="nt">ad5</span><span class="o">;</span>
<span class="nt">--accent-color-rgb</span><span class="o">:</span> <span class="err">128</span><span class="o">,</span> <span class="err">90</span><span class="o">,</span> <span class="err">213</span><span class="o">;</span>
<span class="nt">--accent-color-dark</span><span class="o">:</span> <span class="err">#553</span><span class="nt">c9a</span><span class="o">;</span>
<span class="nt">--accent-color-light</span><span class="o">:</span> <span class="nf">#b794f4</span><span class="o">;</span>

<span class="c">/* Neutral colors */</span>
<span class="nt">--background-color</span><span class="o">:</span> <span class="nf">#ffffff</span><span class="o">;</span>
<span class="nt">--text-color</span><span class="o">:</span> <span class="err">#2</span><span class="nt">d3748</span><span class="o">;</span>
<span class="nt">--light-text-color</span><span class="o">:</span> <span class="err">#718096</span><span class="o">;</span>
<span class="nt">--border-color</span><span class="o">:</span> <span class="nf">#e2e8f0</span><span class="o">;</span>
<span class="nt">--light-bg-color</span><span class="o">:</span> <span class="nf">#f7fafc</span><span class="o">;</span>
</code></pre></div></div>

<h3 id="state-colors">State Colors</h3>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* Feedback colors */</span>
<span class="nt">--success-color</span><span class="o">:</span> <span class="err">#38</span><span class="nt">a169</span><span class="o">;</span>
<span class="nt">--warning-color</span><span class="o">:</span> <span class="nf">#dd6b20</span><span class="o">;</span>
<span class="nt">--danger-color</span><span class="o">:</span> <span class="nf">#e53e3e</span><span class="o">;</span>
<span class="nt">--info-color</span><span class="o">:</span> <span class="err">#4299</span><span class="nt">e1</span><span class="o">;</span>

<span class="c">/* Interactive colors */</span>
<span class="nt">--link-color</span><span class="o">:</span> <span class="err">#3182</span><span class="nt">ce</span><span class="o">;</span>
<span class="nt">--link-hover-color</span><span class="o">:</span> <span class="err">#2</span><span class="nt">c5282</span><span class="o">;</span>
<span class="nt">--focus-ring-color</span><span class="o">:</span> <span class="nt">rgba</span><span class="o">(</span><span class="err">49</span><span class="o">,</span> <span class="err">130</span><span class="o">,</span> <span class="err">206</span><span class="o">,</span> <span class="err">0</span><span class="o">.</span><span class="err">3</span><span class="o">);</span>
</code></pre></div></div>

<h3 id="dark-mode-colors">Dark Mode Colors</h3>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.dark-mode</span> <span class="p">{</span>
  <span class="py">--background-color</span><span class="p">:</span> <span class="m">#1a202c</span><span class="p">;</span>
  <span class="py">--text-color</span><span class="p">:</span> <span class="m">#f7fafc</span><span class="p">;</span>
  <span class="py">--light-text-color</span><span class="p">:</span> <span class="m">#a0aec0</span><span class="p">;</span>
  <span class="py">--border-color</span><span class="p">:</span> <span class="m">#2d3748</span><span class="p">;</span>
  <span class="py">--light-bg-color</span><span class="p">:</span> <span class="m">#2d3748</span><span class="p">;</span>
  
  <span class="py">--link-color</span><span class="p">:</span> <span class="m">#63b3ed</span><span class="p">;</span>
  <span class="py">--link-hover-color</span><span class="p">:</span> <span class="m">#90cdf4</span><span class="p">;</span>
  <span class="py">--focus-ring-color</span><span class="p">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">99</span><span class="p">,</span> <span class="m">179</span><span class="p">,</span> <span class="m">237</span><span class="p">,</span> <span class="m">0.4</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>

<h3 id="code-colors">Code Colors</h3>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* Light mode code */</span>
<span class="nt">--code-bg</span><span class="o">:</span> <span class="nf">#f5f7fa</span><span class="o">;</span>
<span class="nt">--code-color</span><span class="o">:</span> <span class="err">#2</span><span class="nt">d3748</span><span class="o">;</span>
<span class="nt">--code-comment</span><span class="o">:</span> <span class="err">#718096</span><span class="o">;</span>
<span class="nt">--code-keyword</span><span class="o">:</span> <span class="err">#805</span><span class="nt">ad5</span><span class="o">;</span>
<span class="nt">--code-function</span><span class="o">:</span> <span class="err">#3182</span><span class="nt">ce</span><span class="o">;</span>
<span class="nt">--code-string</span><span class="o">:</span> <span class="err">#38</span><span class="nt">a169</span><span class="o">;</span>
<span class="nt">--code-number</span><span class="o">:</span> <span class="nf">#dd6b20</span><span class="o">;</span>
<span class="nt">--code-operator</span><span class="o">:</span> <span class="nf">#c53030</span><span class="o">;</span>
<span class="nt">--code-class</span><span class="o">:</span> <span class="err">#2</span><span class="nt">b6cb0</span><span class="o">;</span>
<span class="nt">--code-variable</span><span class="o">:</span> <span class="err">#2</span><span class="nt">c5282</span><span class="o">;</span>

<span class="c">/* Dark mode code */</span>
<span class="nc">.dark-mode</span> <span class="p">{</span>
  <span class="py">--code-bg</span><span class="p">:</span> <span class="m">#1a202c</span><span class="p">;</span>
  <span class="py">--code-color</span><span class="p">:</span> <span class="m">#e2e8f0</span><span class="p">;</span>
  <span class="py">--code-comment</span><span class="p">:</span> <span class="m">#718096</span><span class="p">;</span>
  <span class="py">--code-keyword</span><span class="p">:</span> <span class="m">#b794f4</span><span class="p">;</span>
  <span class="py">--code-function</span><span class="p">:</span> <span class="m">#63b3ed</span><span class="p">;</span>
  <span class="py">--code-string</span><span class="p">:</span> <span class="m">#68d391</span><span class="p">;</span>
  <span class="py">--code-number</span><span class="p">:</span> <span class="m">#fbd38d</span><span class="p">;</span>
  <span class="py">--code-operator</span><span class="p">:</span> <span class="m">#fc8181</span><span class="p">;</span>
  <span class="py">--code-class</span><span class="p">:</span> <span class="m">#90cdf4</span><span class="p">;</span>
  <span class="py">--code-variable</span><span class="p">:</span> <span class="m">#a0aec0</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>

<h2 id="typography-variables">Typography Variables</h2>

<h3 id="font-families">Font Families</h3>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">--font-family-sans</span><span class="o">:</span> <span class="nt">-apple-system</span><span class="o">,</span> <span class="nt">BlinkMacSystemFont</span><span class="o">,</span> <span class="s1">"Segoe UI"</span><span class="o">,</span> <span class="nt">Roboto</span><span class="o">,</span> <span class="nt">Oxygen-Sans</span><span class="o">,</span> <span class="nt">Ubuntu</span><span class="o">,</span> <span class="nt">Cantarell</span><span class="o">,</span> <span class="s1">"Helvetica Neue"</span><span class="o">,</span> <span class="nt">sans-serif</span><span class="o">;</span>
<span class="nt">--font-family-mono</span><span class="o">:</span> <span class="nt">SFMono-Regular</span><span class="o">,</span> <span class="nt">Menlo</span><span class="o">,</span> <span class="nt">Monaco</span><span class="o">,</span> <span class="nt">Consolas</span><span class="o">,</span> <span class="s1">"Liberation Mono"</span><span class="o">,</span> <span class="s1">"Courier New"</span><span class="o">,</span> <span class="nt">monospace</span><span class="o">;</span>
<span class="nt">--font-family-serif</span><span class="o">:</span> <span class="s1">"Palatino Linotype"</span><span class="o">,</span> <span class="nt">Palatino</span><span class="o">,</span> <span class="nt">Palladio</span><span class="o">,</span> <span class="s1">"URW Palladio L"</span><span class="o">,</span> <span class="s1">"Book Antiqua"</span><span class="o">,</span> <span class="nt">Baskerville</span><span class="o">,</span> <span class="s1">"Bookman Old Style"</span><span class="o">,</span> <span class="s1">"Bitstream Charter"</span><span class="o">,</span> <span class="s1">"Nimbus Roman No9 L"</span><span class="o">,</span> <span class="nt">Garamond</span><span class="o">,</span> <span class="s1">"Apple Garamond"</span><span class="o">,</span> <span class="s1">"ITC Garamond Narrow"</span><span class="o">,</span> <span class="s1">"New Century Schoolbook"</span><span class="o">,</span> <span class="s1">"Century Schoolbook"</span><span class="o">,</span> <span class="s1">"Century Schoolbook L"</span><span class="o">,</span> <span class="nt">Georgia</span><span class="o">,</span> <span class="nt">serif</span><span class="o">;</span>

<span class="nt">--heading-font-family</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--font-family-sans</span><span class="o">);</span>
<span class="nt">--body-font-family</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--font-family-sans</span><span class="o">);</span>
<span class="nt">--code-font-family</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--font-family-mono</span><span class="o">);</span>
</code></pre></div></div>

<h3 id="font-sizes">Font Sizes</h3>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* Base size */</span>
<span class="nt">--font-size-base</span><span class="o">:</span> <span class="err">1</span><span class="nt">rem</span><span class="o">;</span>          <span class="c">/* 16px */</span>

<span class="c">/* Type scale */</span>
<span class="nt">--font-size-xs</span><span class="o">:</span> <span class="err">0</span><span class="o">.</span><span class="err">75</span><span class="nt">rem</span><span class="o">;</span>         <span class="c">/* 12px */</span>
<span class="nt">--font-size-sm</span><span class="o">:</span> <span class="err">0</span><span class="o">.</span><span class="err">875</span><span class="nt">rem</span><span class="o">;</span>        <span class="c">/* 14px */</span>
<span class="nt">--font-size-md</span><span class="o">:</span> <span class="err">1</span><span class="nt">rem</span><span class="o">;</span>            <span class="c">/* 16px */</span>
<span class="nt">--font-size-lg</span><span class="o">:</span> <span class="err">1</span><span class="o">.</span><span class="err">125</span><span class="nt">rem</span><span class="o">;</span>        <span class="c">/* 18px */</span>
<span class="nt">--font-size-xl</span><span class="o">:</span> <span class="err">1</span><span class="o">.</span><span class="err">25</span><span class="nt">rem</span><span class="o">;</span>         <span class="c">/* 20px */</span>
<span class="nt">--font-size-2xl</span><span class="o">:</span> <span class="err">1</span><span class="o">.</span><span class="err">5</span><span class="nt">rem</span><span class="o">;</span>         <span class="c">/* 24px */</span>
<span class="nt">--font-size-3xl</span><span class="o">:</span> <span class="err">1</span><span class="o">.</span><span class="err">875</span><span class="nt">rem</span><span class="o">;</span>       <span class="c">/* 30px */</span>
<span class="nt">--font-size-4xl</span><span class="o">:</span> <span class="err">2</span><span class="o">.</span><span class="err">25</span><span class="nt">rem</span><span class="o">;</span>        <span class="c">/* 36px */</span>
<span class="nt">--font-size-5xl</span><span class="o">:</span> <span class="err">3</span><span class="nt">rem</span><span class="o">;</span>           <span class="c">/* 48px */</span>
</code></pre></div></div>

<h3 id="line-heights-and-letter-spacing">Line Heights and Letter Spacing</h3>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* Line heights */</span>
<span class="nt">--line-height-none</span><span class="o">:</span> <span class="err">1</span><span class="o">;</span>
<span class="nt">--line-height-tight</span><span class="o">:</span> <span class="err">1</span><span class="o">.</span><span class="err">25</span><span class="o">;</span>
<span class="nt">--line-height-normal</span><span class="o">:</span> <span class="err">1</span><span class="o">.</span><span class="err">5</span><span class="o">;</span>
<span class="nt">--line-height-relaxed</span><span class="o">:</span> <span class="err">1</span><span class="o">.</span><span class="err">625</span><span class="o">;</span>
<span class="nt">--line-height-loose</span><span class="o">:</span> <span class="err">2</span><span class="o">;</span>

<span class="nt">--line-height-body</span><span class="o">:</span> <span class="err">1</span><span class="o">.</span><span class="err">7</span><span class="o">;</span>
<span class="nt">--line-height-headings</span><span class="o">:</span> <span class="err">1</span><span class="o">.</span><span class="err">2</span><span class="o">;</span>

<span class="c">/* Letter spacing */</span>
<span class="nt">--tracking-tighter</span><span class="o">:</span> <span class="nt">-0</span><span class="o">.</span><span class="err">05</span><span class="nt">em</span><span class="o">;</span>
<span class="nt">--tracking-tight</span><span class="o">:</span> <span class="nt">-0</span><span class="o">.</span><span class="err">025</span><span class="nt">em</span><span class="o">;</span>
<span class="nt">--tracking-normal</span><span class="o">:</span> <span class="err">0</span><span class="o">;</span>
<span class="nt">--tracking-wide</span><span class="o">:</span> <span class="err">0</span><span class="o">.</span><span class="err">025</span><span class="nt">em</span><span class="o">;</span>
<span class="nt">--tracking-wider</span><span class="o">:</span> <span class="err">0</span><span class="o">.</span><span class="err">05</span><span class="nt">em</span><span class="o">;</span>
<span class="nt">--tracking-widest</span><span class="o">:</span> <span class="err">0</span><span class="o">.</span><span class="err">1</span><span class="nt">em</span><span class="o">;</span>
</code></pre></div></div>

<h3 id="font-weights">Font Weights</h3>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">--font-weight-light</span><span class="o">:</span> <span class="err">300</span><span class="o">;</span>
<span class="nt">--font-weight-normal</span><span class="o">:</span> <span class="err">400</span><span class="o">;</span>
<span class="nt">--font-weight-medium</span><span class="o">:</span> <span class="err">500</span><span class="o">;</span>
<span class="nt">--font-weight-semibold</span><span class="o">:</span> <span class="err">600</span><span class="o">;</span>
<span class="nt">--font-weight-bold</span><span class="o">:</span> <span class="err">700</span><span class="o">;</span>
<span class="nt">--font-weight-extrabold</span><span class="o">:</span> <span class="err">800</span><span class="o">;</span>
<span class="nt">--font-weight-black</span><span class="o">:</span> <span class="err">900</span><span class="o">;</span>
</code></pre></div></div>

<h2 id="spacing-variables">Spacing Variables</h2>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* Base spacing unit */</span>
<span class="nt">--spacing-unit</span><span class="o">:</span> <span class="err">1</span><span class="nt">rem</span><span class="o">;</span>            <span class="c">/* 16px */</span>

<span class="c">/* Spacing scale */</span>
<span class="nt">--spacing-0</span><span class="o">:</span> <span class="err">0</span><span class="o">;</span>
<span class="nt">--spacing-1</span><span class="o">:</span> <span class="err">0</span><span class="o">.</span><span class="err">25</span><span class="nt">rem</span><span class="o">;</span>            <span class="c">/* 4px */</span>
<span class="nt">--spacing-2</span><span class="o">:</span> <span class="err">0</span><span class="o">.</span><span class="err">5</span><span class="nt">rem</span><span class="o">;</span>             <span class="c">/* 8px */</span>
<span class="nt">--spacing-3</span><span class="o">:</span> <span class="err">0</span><span class="o">.</span><span class="err">75</span><span class="nt">rem</span><span class="o">;</span>            <span class="c">/* 12px */</span>
<span class="nt">--spacing-4</span><span class="o">:</span> <span class="err">1</span><span class="nt">rem</span><span class="o">;</span>               <span class="c">/* 16px */</span>
<span class="nt">--spacing-5</span><span class="o">:</span> <span class="err">1</span><span class="o">.</span><span class="err">25</span><span class="nt">rem</span><span class="o">;</span>            <span class="c">/* 20px */</span>
<span class="nt">--spacing-6</span><span class="o">:</span> <span class="err">1</span><span class="o">.</span><span class="err">5</span><span class="nt">rem</span><span class="o">;</span>             <span class="c">/* 24px */</span>
<span class="nt">--spacing-8</span><span class="o">:</span> <span class="err">2</span><span class="nt">rem</span><span class="o">;</span>               <span class="c">/* 32px */</span>
<span class="nt">--spacing-10</span><span class="o">:</span> <span class="err">2</span><span class="o">.</span><span class="err">5</span><span class="nt">rem</span><span class="o">;</span>            <span class="c">/* 40px */</span>
<span class="nt">--spacing-12</span><span class="o">:</span> <span class="err">3</span><span class="nt">rem</span><span class="o">;</span>              <span class="c">/* 48px */</span>
<span class="nt">--spacing-16</span><span class="o">:</span> <span class="err">4</span><span class="nt">rem</span><span class="o">;</span>              <span class="c">/* 64px */</span>
<span class="nt">--spacing-20</span><span class="o">:</span> <span class="err">5</span><span class="nt">rem</span><span class="o">;</span>              <span class="c">/* 80px */</span>
<span class="nt">--spacing-24</span><span class="o">:</span> <span class="err">6</span><span class="nt">rem</span><span class="o">;</span>              <span class="c">/* 96px */</span>
<span class="nt">--spacing-32</span><span class="o">:</span> <span class="err">8</span><span class="nt">rem</span><span class="o">;</span>              <span class="c">/* 128px */</span>
</code></pre></div></div>

<h2 id="layout-variables">Layout Variables</h2>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* Container width */</span>
<span class="nt">--container-width</span><span class="o">:</span> <span class="err">1200</span><span class="nt">px</span><span class="o">;</span>
<span class="nt">--container-narrow-width</span><span class="o">:</span> <span class="err">800</span><span class="nt">px</span><span class="o">;</span>
<span class="nt">--container-wide-width</span><span class="o">:</span> <span class="err">1400</span><span class="nt">px</span><span class="o">;</span>

<span class="c">/* Breakpoints */</span>
<span class="nt">--breakpoint-sm</span><span class="o">:</span> <span class="err">576</span><span class="nt">px</span><span class="o">;</span>
<span class="nt">--breakpoint-md</span><span class="o">:</span> <span class="err">768</span><span class="nt">px</span><span class="o">;</span>
<span class="nt">--breakpoint-lg</span><span class="o">:</span> <span class="err">992</span><span class="nt">px</span><span class="o">;</span>
<span class="nt">--breakpoint-xl</span><span class="o">:</span> <span class="err">1200</span><span class="nt">px</span><span class="o">;</span>

<span class="c">/* Z-index layers */</span>
<span class="nt">--z-index-dropdown</span><span class="o">:</span> <span class="err">1000</span><span class="o">;</span>
<span class="nt">--z-index-sticky</span><span class="o">:</span> <span class="err">1020</span><span class="o">;</span>
<span class="nt">--z-index-fixed</span><span class="o">:</span> <span class="err">1030</span><span class="o">;</span>
<span class="nt">--z-index-modal-backdrop</span><span class="o">:</span> <span class="err">1040</span><span class="o">;</span>
<span class="nt">--z-index-modal</span><span class="o">:</span> <span class="err">1050</span><span class="o">;</span>
<span class="nt">--z-index-popover</span><span class="o">:</span> <span class="err">1060</span><span class="o">;</span>
<span class="nt">--z-index-tooltip</span><span class="o">:</span> <span class="err">1070</span><span class="o">;</span>
</code></pre></div></div>

<h2 id="border-and-shadow-variables">Border and Shadow Variables</h2>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* Borders */</span>
<span class="nt">--border-width</span><span class="o">:</span> <span class="err">1</span><span class="nt">px</span><span class="o">;</span>
<span class="nt">--border-width-md</span><span class="o">:</span> <span class="err">2</span><span class="nt">px</span><span class="o">;</span>
<span class="nt">--border-width-lg</span><span class="o">:</span> <span class="err">4</span><span class="nt">px</span><span class="o">;</span>
<span class="nt">--border-style</span><span class="o">:</span> <span class="nt">solid</span><span class="o">;</span>
<span class="nt">--border-color</span><span class="o">:</span> <span class="nf">#e2e8f0</span><span class="o">;</span>
<span class="nt">--border-radius-sm</span><span class="o">:</span> <span class="err">0</span><span class="o">.</span><span class="err">125</span><span class="nt">rem</span><span class="o">;</span>     <span class="c">/* 2px */</span>
<span class="nt">--border-radius</span><span class="o">:</span> <span class="err">0</span><span class="o">.</span><span class="err">25</span><span class="nt">rem</span><span class="o">;</span>         <span class="c">/* 4px */</span>
<span class="nt">--border-radius-md</span><span class="o">:</span> <span class="err">0</span><span class="o">.</span><span class="err">375</span><span class="nt">rem</span><span class="o">;</span>     <span class="c">/* 6px */</span>
<span class="nt">--border-radius-lg</span><span class="o">:</span> <span class="err">0</span><span class="o">.</span><span class="err">5</span><span class="nt">rem</span><span class="o">;</span>       <span class="c">/* 8px */</span>
<span class="nt">--border-radius-xl</span><span class="o">:</span> <span class="err">1</span><span class="nt">rem</span><span class="o">;</span>         <span class="c">/* 16px */</span>
<span class="nt">--border-radius-full</span><span class="o">:</span> <span class="err">9999</span><span class="nt">px</span><span class="o">;</span>

<span class="c">/* Shadows */</span>
<span class="nt">--shadow-sm</span><span class="o">:</span> <span class="err">0</span> <span class="err">1</span><span class="nt">px</span> <span class="err">2</span><span class="nt">px</span> <span class="err">0</span> <span class="nt">rgba</span><span class="o">(</span><span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">.</span><span class="err">05</span><span class="o">);</span>
<span class="nt">--shadow</span><span class="o">:</span> <span class="err">0</span> <span class="err">1</span><span class="nt">px</span> <span class="err">3</span><span class="nt">px</span> <span class="err">0</span> <span class="nt">rgba</span><span class="o">(</span><span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">.</span><span class="err">1</span><span class="o">),</span> <span class="err">0</span> <span class="err">1</span><span class="nt">px</span> <span class="err">2</span><span class="nt">px</span> <span class="err">0</span> <span class="nt">rgba</span><span class="o">(</span><span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">.</span><span class="err">06</span><span class="o">);</span>
<span class="nt">--shadow-md</span><span class="o">:</span> <span class="err">0</span> <span class="err">4</span><span class="nt">px</span> <span class="err">6</span><span class="nt">px</span> <span class="nt">-1px</span> <span class="nt">rgba</span><span class="o">(</span><span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">.</span><span class="err">1</span><span class="o">),</span> <span class="err">0</span> <span class="err">2</span><span class="nt">px</span> <span class="err">4</span><span class="nt">px</span> <span class="nt">-1px</span> <span class="nt">rgba</span><span class="o">(</span><span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">.</span><span class="err">06</span><span class="o">);</span>
<span class="nt">--shadow-lg</span><span class="o">:</span> <span class="err">0</span> <span class="err">10</span><span class="nt">px</span> <span class="err">15</span><span class="nt">px</span> <span class="nt">-3px</span> <span class="nt">rgba</span><span class="o">(</span><span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">.</span><span class="err">1</span><span class="o">),</span> <span class="err">0</span> <span class="err">4</span><span class="nt">px</span> <span class="err">6</span><span class="nt">px</span> <span class="nt">-2px</span> <span class="nt">rgba</span><span class="o">(</span><span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">.</span><span class="err">05</span><span class="o">);</span>
<span class="nt">--shadow-xl</span><span class="o">:</span> <span class="err">0</span> <span class="err">20</span><span class="nt">px</span> <span class="err">25</span><span class="nt">px</span> <span class="nt">-5px</span> <span class="nt">rgba</span><span class="o">(</span><span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">.</span><span class="err">1</span><span class="o">),</span> <span class="err">0</span> <span class="err">10</span><span class="nt">px</span> <span class="err">10</span><span class="nt">px</span> <span class="nt">-5px</span> <span class="nt">rgba</span><span class="o">(</span><span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">.</span><span class="err">04</span><span class="o">);</span>
<span class="nt">--shadow-2xl</span><span class="o">:</span> <span class="err">0</span> <span class="err">25</span><span class="nt">px</span> <span class="err">50</span><span class="nt">px</span> <span class="nt">-12px</span> <span class="nt">rgba</span><span class="o">(</span><span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">.</span><span class="err">25</span><span class="o">);</span>
<span class="nt">--shadow-inner</span><span class="o">:</span> <span class="nt">inset</span> <span class="err">0</span> <span class="err">2</span><span class="nt">px</span> <span class="err">4</span><span class="nt">px</span> <span class="err">0</span> <span class="nt">rgba</span><span class="o">(</span><span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">.</span><span class="err">06</span><span class="o">);</span>
<span class="nt">--shadow-outline</span><span class="o">:</span> <span class="err">0</span> <span class="err">0</span> <span class="err">0</span> <span class="err">3</span><span class="nt">px</span> <span class="nt">rgba</span><span class="o">(</span><span class="err">66</span><span class="o">,</span> <span class="err">153</span><span class="o">,</span> <span class="err">225</span><span class="o">,</span> <span class="err">0</span><span class="o">.</span><span class="err">5</span><span class="o">);</span>
<span class="nt">--shadow-none</span><span class="o">:</span> <span class="nt">none</span><span class="o">;</span>
</code></pre></div></div>

<h2 id="transition-variables">Transition Variables</h2>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* Transitions */</span>
<span class="nt">--transition-fastest</span><span class="o">:</span> <span class="err">0</span><span class="o">.</span><span class="err">05</span><span class="nt">s</span><span class="o">;</span>
<span class="nt">--transition-fast</span><span class="o">:</span> <span class="err">0</span><span class="o">.</span><span class="err">1</span><span class="nt">s</span><span class="o">;</span>
<span class="nt">--transition-normal</span><span class="o">:</span> <span class="err">0</span><span class="o">.</span><span class="err">2</span><span class="nt">s</span><span class="o">;</span>
<span class="nt">--transition-slow</span><span class="o">:</span> <span class="err">0</span><span class="o">.</span><span class="err">3</span><span class="nt">s</span><span class="o">;</span>
<span class="nt">--transition-slowest</span><span class="o">:</span> <span class="err">0</span><span class="o">.</span><span class="err">5</span><span class="nt">s</span><span class="o">;</span>

<span class="c">/* Easing functions */</span>
<span class="nt">--ease-in-out</span><span class="o">:</span> <span class="nt">cubic-bezier</span><span class="o">(</span><span class="err">0</span><span class="o">.</span><span class="err">4</span><span class="o">,</span> <span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">.</span><span class="err">2</span><span class="o">,</span> <span class="err">1</span><span class="o">);</span>
<span class="nt">--ease-in</span><span class="o">:</span> <span class="nt">cubic-bezier</span><span class="o">(</span><span class="err">0</span><span class="o">.</span><span class="err">4</span><span class="o">,</span> <span class="err">0</span><span class="o">,</span> <span class="err">1</span><span class="o">,</span> <span class="err">1</span><span class="o">);</span>
<span class="nt">--ease-out</span><span class="o">:</span> <span class="nt">cubic-bezier</span><span class="o">(</span><span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">,</span> <span class="err">0</span><span class="o">.</span><span class="err">2</span><span class="o">,</span> <span class="err">1</span><span class="o">);</span>
<span class="nt">--ease-linear</span><span class="o">:</span> <span class="nt">linear</span><span class="o">;</span>
</code></pre></div></div>

<h2 id="component-specific-variables">Component-specific Variables</h2>

<h3 id="header-variables">Header Variables</h3>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">--header-height</span><span class="o">:</span> <span class="err">4</span><span class="nt">rem</span><span class="o">;</span>
<span class="nt">--header-background</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--background-color</span><span class="o">);</span>
<span class="nt">--header-border-color</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--border-color</span><span class="o">);</span>
<span class="nt">--header-shadow</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--shadow</span><span class="o">);</span>
</code></pre></div></div>

<h3 id="footer-variables">Footer Variables</h3>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">--footer-background</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--light-bg-color</span><span class="o">);</span>
<span class="nt">--footer-text-color</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--light-text-color</span><span class="o">);</span>
<span class="nt">--footer-border-color</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--border-color</span><span class="o">);</span>
<span class="nt">--footer-spacing</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--spacing-8</span><span class="o">);</span>
</code></pre></div></div>

<h3 id="button-variables">Button Variables</h3>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">--button-padding-x</span><span class="o">:</span> <span class="err">1</span><span class="nt">rem</span><span class="o">;</span>
<span class="nt">--button-padding-y</span><span class="o">:</span> <span class="err">0</span><span class="o">.</span><span class="err">5</span><span class="nt">rem</span><span class="o">;</span>
<span class="nt">--button-border-radius</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--border-radius</span><span class="o">);</span>
<span class="nt">--button-font-weight</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--font-weight-medium</span><span class="o">);</span>
<span class="nt">--button-transition</span><span class="o">:</span> <span class="nt">all</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--transition-normal</span><span class="o">)</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--ease-in-out</span><span class="o">);</span>

<span class="nt">--button-primary-bg</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--primary-color</span><span class="o">);</span>
<span class="nt">--button-primary-text</span><span class="o">:</span> <span class="nt">white</span><span class="o">;</span>
<span class="nt">--button-primary-border</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--primary-color</span><span class="o">);</span>
<span class="nt">--button-primary-hover-bg</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--primary-color-dark</span><span class="o">);</span>
<span class="nt">--button-primary-hover-text</span><span class="o">:</span> <span class="nt">white</span><span class="o">;</span>
<span class="nt">--button-primary-hover-border</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--primary-color-dark</span><span class="o">);</span>

<span class="nt">--button-secondary-bg</span><span class="o">:</span> <span class="nt">transparent</span><span class="o">;</span>
<span class="nt">--button-secondary-text</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--primary-color</span><span class="o">);</span>
<span class="nt">--button-secondary-border</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--primary-color</span><span class="o">);</span>
<span class="nt">--button-secondary-hover-bg</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--primary-color</span><span class="o">);</span>
<span class="nt">--button-secondary-hover-text</span><span class="o">:</span> <span class="nt">white</span><span class="o">;</span>
<span class="nt">--button-secondary-hover-border</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--primary-color</span><span class="o">);</span>

<span class="nt">--button-disabled-opacity</span><span class="o">:</span> <span class="err">0</span><span class="o">.</span><span class="err">65</span><span class="o">;</span>
</code></pre></div></div>

<h3 id="form-variables">Form Variables</h3>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">--input-padding-x</span><span class="o">:</span> <span class="err">0</span><span class="o">.</span><span class="err">75</span><span class="nt">rem</span><span class="o">;</span>
<span class="nt">--input-padding-y</span><span class="o">:</span> <span class="err">0</span><span class="o">.</span><span class="err">5</span><span class="nt">rem</span><span class="o">;</span>
<span class="nt">--input-border-radius</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--border-radius</span><span class="o">);</span>
<span class="nt">--input-border-color</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--border-color</span><span class="o">);</span>
<span class="nt">--input-background</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--background-color</span><span class="o">);</span>
<span class="nt">--input-focus-border-color</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--primary-color-light</span><span class="o">);</span>
<span class="nt">--input-focus-ring</span><span class="o">:</span> <span class="err">0</span> <span class="err">0</span> <span class="err">0</span> <span class="err">3</span><span class="nt">px</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--focus-ring-color</span><span class="o">);</span>
<span class="nt">--input-placeholder-color</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--light-text-color</span><span class="o">);</span>
<span class="nt">--input-disabled-bg</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--light-bg-color</span><span class="o">);</span>
</code></pre></div></div>

<h3 id="card-variables">Card Variables</h3>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">--card-background</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--background-color</span><span class="o">);</span>
<span class="nt">--card-border-radius</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--border-radius-lg</span><span class="o">);</span>
<span class="nt">--card-border-color</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--border-color</span><span class="o">);</span>
<span class="nt">--card-shadow</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--shadow</span><span class="o">);</span>
<span class="nt">--card-padding</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--spacing-6</span><span class="o">);</span>
<span class="nt">--card-hover-shadow</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--shadow-md</span><span class="o">);</span>
</code></pre></div></div>

<h3 id="table-variables">Table Variables</h3>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">--table-border-color</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--border-color</span><span class="o">);</span>
<span class="nt">--table-stripe-background</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--light-bg-color</span><span class="o">);</span>
<span class="nt">--table-heading-background</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--light-bg-color</span><span class="o">);</span>
<span class="nt">--table-cell-padding</span><span class="o">:</span> <span class="err">0</span><span class="o">.</span><span class="err">75</span><span class="nt">rem</span><span class="o">;</span>
</code></pre></div></div>

<h2 id="using-css-variables-in-custom-code">Using CSS Variables in Custom Code</h2>

<h3 id="basic-usage-in-css">Basic Usage in CSS</h3>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.my-custom-element</span> <span class="p">{</span>
  <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--primary-color</span><span class="p">);</span>
  <span class="nl">font-family</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--heading-font-family</span><span class="p">);</span>
  <span class="nl">padding</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-4</span><span class="p">);</span>
  <span class="nl">border-radius</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--border-radius</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>

<h3 id="using-with-fallbacks">Using with Fallbacks</h3>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.my-custom-element</span> <span class="p">{</span>
  <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--custom-color</span><span class="p">,</span> <span class="n">var</span><span class="p">(</span><span class="n">--primary-color</span><span class="p">));</span>
  <span class="nl">padding</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--custom-spacing</span><span class="p">,</span> <span class="m">1rem</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>

<h3 id="combining-variables">Combining Variables</h3>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.my-custom-element</span> <span class="p">{</span>
  <span class="c">/* Using spacing variables to create consistent margin */</span>
  <span class="nl">margin</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-2</span><span class="p">)</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-4</span><span class="p">);</span>
  
  <span class="c">/* Using multiple variables for box shadow */</span>
  <span class="nl">box-shadow</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--shadow</span><span class="p">),</span> <span class="m">0</span> <span class="m">0</span> <span class="m">0</span> <span class="n">var</span><span class="p">(</span><span class="n">--border-width</span><span class="p">)</span> <span class="n">var</span><span class="p">(</span><span class="n">--primary-color-light</span><span class="p">);</span>
  
  <span class="c">/* Creating derived values */</span>
  <span class="nl">padding</span><span class="p">:</span> <span class="n">calc</span><span class="p">(</span><span class="n">var</span><span class="p">(</span><span class="n">--spacing-2</span><span class="p">)</span> <span class="err">+</span> <span class="n">var</span><span class="p">(</span><span class="n">--spacing-1</span><span class="p">));</span>
<span class="p">}</span>
</code></pre></div></div>

<h3 id="using-in-media-queries">Using in Media Queries</h3>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--breakpoint-md</span><span class="p">))</span> <span class="p">{</span>
  <span class="nc">.my-responsive-element</span> <span class="p">{</span>
    <span class="nl">font-size</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-size-lg</span><span class="p">);</span>
  <span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>

<h2 id="best-practices">Best Practices</h2>

<ol>
  <li><strong>Use variables for consistent values</strong>: Always use variables for colors, spacing, etc. instead of hardcoding values</li>
  <li><strong>Modify sparingly</strong>: Focus on changing key variables like primary colors</li>
  <li><strong>Keep a CSS Specificity</strong>: Override variables at the :root level when possible</li>
  <li><strong>Test both themes</strong>: Always test your changes in both light and dark mode</li>
  <li><strong>Keep overrides organized</strong>: Maintain a structured list of overrides in your custom CSS</li>
  <li><strong>Consider print styles</strong>: Create print-specific variable overrides when needed</li>
  <li><strong>Be careful with derivatives</strong>: Remember that changing base variables affects all components that use them</li>
</ol>

<h2 id="related-resources">Related Resources</h2>

<ul>
  <li><a href="/docs/customization/">Customizing Your Arsxy Theme</a></li>
  <li><a href="/docs/typography/">Typography</a></li>
  <li><a href="/docs/dark-mode/">Dark Mode</a></li>
</ul>

      </div>
    </article>
  </div>
  
  <aside class="docs-sidebar">
    <div class="docs-nav">
      <h2 class="docs-nav-title">Documentation</h2>
      
      <nav class="docs-nav-menu">
        <ul class="docs-nav-list">
          <li><a href="/arsxy-theme/docs/" >Introduction</a></li>
          
          <li class="docs-section">
            <span class="docs-section-title">Getting Started</span>
            <ul class="docs-section-items">
              <li><a href="/arsxy-theme/docs/installation/" >Installation Guide</a></li>
              <li><a href="/arsxy-theme/docs/quick-start/" >Quick Start</a></li>
              <li><a href="/arsxy-theme/docs/configuration/" >Configuration</a></li>
            </ul>
          </li>
          
          <li class="docs-section">
            <span class="docs-section-title">Core Features</span>
            <ul class="docs-section-items">
              <li><a href="/arsxy-theme/docs/layouts/" >Layout Options</a></li>
              <li><a href="/arsxy-theme/docs/dark-mode/" >Dark Mode</a></li>
              <li><a href="/arsxy-theme/docs/seo/" >SEO Optimization</a></li>
              <li><a href="/arsxy-theme/docs/responsive-design/" >Responsive Design</a></li>
              <li><a href="/arsxy-theme/docs/typography/" >Typography</a></li>
            </ul>
          </li>
          
          <li class="docs-section">
            <span class="docs-section-title">Components</span>
            <ul class="docs-section-items">
              <li><a href="/arsxy-theme/docs/components/navigation/" >Navigation</a></li>
              <li><a href="/arsxy-theme/docs/components/toc/" >Table of Contents</a></li>
              <li><a href="/arsxy-theme/docs/components/code-highlighting/" >Code Highlighting</a></li>
              <li><a href="/arsxy-theme/docs/components/featured-images/" >Featured Images</a></li>
              <li><a href="/arsxy-theme/docs/components/social-sharing/" >Social Sharing</a></li>
              <li><a href="/arsxy-theme/docs/components/search/" >Search</a></li>
              <li><a href="/arsxy-theme/docs/comments/" >Comments</a></li>
              <li><a href="/arsxy-theme/docs/taxonomy/" >Category & Tags (Taxonomy)</a></li>
            </ul>
          </li>
          
          <li class="docs-section">
            <span class="docs-section-title">Customization</span>
            <ul class="docs-section-items">
              <li><a href="/arsxy-theme/docs/customization/" >Theme Customization</a></li>
              <li><a href="/arsxy-theme/docs/css-variables/" class="active">CSS Variables</a></li>
              <li><a href="/arsxy-theme/docs/custom-layouts/" >Custom Layouts</a></li>
            </ul>
          </li>
          
          <li class="docs-section">
            <span class="docs-section-title">Advanced</span>
            <ul class="docs-section-items">
              <li><a href="/arsxy-theme/docs/performance/" >Performance</a></li>
              <li><a href="/arsxy-theme/docs/contributing/" >Contributing</a></li>
              <li><a href="/arsxy-theme/docs/troubleshooting/" >Troubleshooting</a></li>
            </ul>
          </li>
          
          <li class="docs-section">
            <span class="docs-section-title">Release</span>
            <ul class="docs-section-items">
              <li><a href="/arsxy-theme/docs/version-history/" >Version History</a></li>
              <li><a href="/arsxy-theme/docs/roadmap/" >Roadmap</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </aside>
</div>
  </div>
  
  <aside class="custom-sidebar">
    <!-- Sidebar content -->
  </aside>
</div>

Using Includes for Modular Layouts

For more flexibility, use Jekyll’s include system to create modular components:


---
layout: default
---

<div class="custom-container">
  {% include custom-header.html %}
  
  <div class="main-content">
    {{ content }}
  </div>
  
  {% if page.sidebar %}
    {% include custom-sidebar.html %}
  {% endif %}
</div>

Then create the corresponding include files in the _includes directory.

Styling Your Custom Layout

Add custom styles for your layout in a dedicated SCSS file:

  1. Create a new file in _sass/components/_custom-layout.scss
  2. Add your styles:
.custom-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  
  .custom-header {
    grid-column: 1 / -1;
  }
  
  .custom-content {
    // Content styles
  }
  
  .custom-sidebar {
    // Sidebar styles
  }
}

// Responsive adjustments
@media (max-width: $breakpoint-md) {
  .custom-container {
    grid-template-columns: 1fr;
  }
}
  1. Import your new SCSS file in the main stylesheet.

Using Your Custom Layout

To use your custom layout in a page or post, specify it in the front matter:

---
layout: my-custom-layout
title: Page with Custom Layout
subtitle: An example of using a custom layout
sidebar: true
---

Your page content goes here.

Extending Existing Layouts

Instead of creating a layout from scratch, you can extend an existing one:

  1. Create a layout that uses another layout as its base
  2. Add your custom elements
  3. Use conditional logic to control what appears

For example, a specialized post layout:


---
layout: post
---

{% if page.featured %}
  <div class="featured-banner">
    <span>Featured Post</span>
  </div>
{% endif %}

{{ content }}

{% if page.resources %}
  <div class="resources-section">
    <h3>Additional Resources</h3>
    <ul>
      {% for resource in page.resources %}
        <li><a href="{{ resource.url }}">{{ resource.title }}</a></li>
      {% endfor %}
    </ul>
  </div>
{% endif %}

Best Practices

  1. Keep layouts DRY: Use includes and conditionals to avoid code duplication
  2. Consider mobile first: Design your layouts to work well on all device sizes
  3. Use semantic HTML: Ensure your layout structure is accessible and SEO-friendly
  4. Document front matter variables: If your layout requires specific variables, document them for future reference
  5. Test thoroughly: Check how your layout renders with various content types and lengths