Web Design Guide 2023-12-11 10:29:21 | 2.0.0

Containers 

<p>Containers are the most basic layout element. Choose from a fixed or fluid width containers.</p>

<div class="container">
    <div class="dummy"></div>
</div>
<pre class="code-preview">&lt;div class&#x3D;&quot;container&quot;&gt;
  ...
&lt;/div&gt;</pre>

<div class="container -fluid">
    <div class="dummy"></div>
</div>
<pre class="code-preview">&lt;div class&#x3D;&quot;container -fluid&quot;&gt;
  ...
&lt;/div&gt;</pre>

<div class="container -full">
    <div class="dummy"></div>
</div>
<pre class="code-preview">&lt;div class&#x3D;&quot;container -full&quot;&gt;
  ...
&lt;/div&gt;</pre>

<p>Spacing classes are named using the format:</p>
<ul>
    <li><code class="code-inline-preview">-s-{size}</code></li>
    <li><code class="code-inline-preview">-s{side}-{size}</code></li>
    <li>
        Sides:
        <ul>
            <li><code class="code-inline-preview">t</code> as top</li>
            <li><code class="code-inline-preview">b</code> as bottom</li>
        </ul>
    </li>
    <li>
        Sizes:
        <ul>
            <li><code class="code-inline-preview">small</code></li>
            <li><code class="code-inline-preview">medium</code></li>
            <li><code class="code-inline-preview">large</code></li>
        </ul>
    </li>
</ul>

<div class="container -fixed -st-small -sb-large -bg-gray-light">
    <div class="dummy"></div>
</div>
<pre class="code-preview">&lt;div class&#x3D;&quot;container -st-small -sb-large&quot;&gt;
  ...
&lt;/div&gt;</pre>
 
<p>Containers are the most basic layout element. Choose from a fixed or fluid width containers.</p>

<div class="container">{{render '@helper-dummy'}}</div>
{{render '@helper-code-preview' fixed}}

<div class="container -fluid">{{render '@helper-dummy'}}</div>
{{render '@helper-code-preview' fluid}}

<div class="container -full">{{render '@helper-dummy'}}</div>
{{render '@helper-code-preview' full}}

<p>Spacing classes are named using the format:</p>
<ul>
  <li><code class="code-inline-preview">-s-{size}</code></li>
  <li><code class="code-inline-preview">-s{side}-{size}</code></li>
  <li>
    Sides:
    <ul>
      <li><code class="code-inline-preview">t</code> as top</li>
      <li><code class="code-inline-preview">b</code> as bottom</li>
    </ul>
  </li>
  <li>
    Sizes:
    <ul>
      <li><code class="code-inline-preview">small</code></li>
      <li><code class="code-inline-preview">medium</code></li>
      <li><code class="code-inline-preview">large</code></li>
    </ul>
  </li>
</ul>

<div class="container -fixed -st-small -sb-large -bg-gray-light">{{render '@helper-dummy'}}</div>
{{render '@helper-code-preview' spacers}}
 
{
  "fixed": {
    "snippet": "<div class=\"container\">\n  ...\n</div>"
  },
  "fluid": {
    "snippet": "<div class=\"container -fluid\">\n  ...\n</div>"
  },
  "full": {
    "snippet": "<div class=\"container -full\">\n  ...\n</div>"
  },
  "spacers": {
    "snippet": "<div class=\"container -st-small -sb-large\">\n  ...\n</div>"
  }
}

There are no notes for this item.