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

Aspect Ratio 

<p>Classes are named using the format:</p>
<ul>
    <li><code class="code-inline-preview">-ar-{ratio}</code> as default</li>
    <li>
        <code class="code-inline-preview">-ar-{breakpoint}-{ratio}</code> apply to breakpoints greater than
        <code class="code-inline-preview">small</code>
    </li>
</ul>
<pre class="code-preview">&lt;div class&#x3D;&quot;-ar-14x5 -ar-medium-11x5 -ar-large-2x1&quot;&gt;
  ...
&lt;/div&gt;</pre>

<div class="example-box -bg-gray -ar-14x5 -ar-medium-11x5 -ar-large-2x1"></div>
<table class="example-table">
    <thead>
        <tr>
            <th>Aspect Ratio</th>
            <th>Default</th>
            <th>With Breakpoint</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1x1</td>
            <td><code class="code-inline-preview">-ar-1x1</code></td>
            <td><code class="code-inline-preview">-ar-{breakpoint}-1x1</code></td>
        </tr>
        <tr>
            <td>1x2</td>
            <td><code class="code-inline-preview">-ar-1x2</code></td>
            <td><code class="code-inline-preview">-ar-{breakpoint}-1x2</code></td>
        </tr>
        <tr>
            <td>2x1</td>
            <td><code class="code-inline-preview">-ar-2x1</code></td>
            <td><code class="code-inline-preview">-ar-{breakpoint}-2x1</code></td>
        </tr>
        <tr>
            <td>5x7</td>
            <td><code class="code-inline-preview">-ar-5x7</code></td>
            <td><code class="code-inline-preview">-ar-{breakpoint}-5x7</code></td>
        </tr>
        <tr>
            <td>5x11</td>
            <td><code class="code-inline-preview">-ar-5x11</code></td>
            <td><code class="code-inline-preview">-ar-{breakpoint}-5x11</code></td>
        </tr>
        <tr>
            <td>7x5</td>
            <td><code class="code-inline-preview">-ar-7x5</code></td>
            <td><code class="code-inline-preview">-ar-{breakpoint}-7x5</code></td>
        </tr>
        <tr>
            <td>9x16</td>
            <td><code class="code-inline-preview">-ar-9x16</code></td>
            <td><code class="code-inline-preview">-ar-{breakpoint}-9x16</code></td>
        </tr>
        <tr>
            <td>7x10</td>
            <td><code class="code-inline-preview">-ar-7x10</code></td>
            <td><code class="code-inline-preview">-ar-{breakpoint}-7x10</code></td>
        </tr>
        <tr>
            <td>11x5</td>
            <td><code class="code-inline-preview">-ar-11x5</code></td>
            <td><code class="code-inline-preview">-ar-{breakpoint}-11x5</code></td>
        </tr>
        <tr>
            <td>14x5</td>
            <td><code class="code-inline-preview">-ar-14x5</code></td>
            <td><code class="code-inline-preview">-ar-{breakpoint}-14x5</code></td>
        </tr>
        <tr>
            <td>16x9</td>
            <td><code class="code-inline-preview">-ar-16x9</code></td>
            <td><code class="code-inline-preview">-ar-{breakpoint}-16x9</code></td>
        </tr>
    </tbody>
</table>
 
<p>Classes are named using the format:</p>
<ul>
  <li><code class="code-inline-preview">-ar-{ratio}</code> as default</li>
  <li>
    <code class="code-inline-preview">-ar-{breakpoint}-{ratio}</code> apply to breakpoints greater than
    <code class="code-inline-preview">small</code>
  </li>
</ul>
{{render '@helper-code-preview' _self.context}}
<div class="example-box -bg-gray -ar-14x5 -ar-medium-11x5 -ar-large-2x1"></div>
<table class="example-table">
  <thead>
    <tr>
      <th>Aspect Ratio</th>
      <th>Default</th>
      <th>With Breakpoint</th>
    </tr>
  </thead>
  <tbody>
    {{#each ratios}}
      <tr>
        <td>{{this}}</td>
        <td><code class="code-inline-preview">-ar-{{this}}</code></td>
        <td><code class="code-inline-preview">-ar-{breakpoint}-{{this}}</code></td>
      </tr>
    {{/each}}
  </tbody>
</table>
 
{
  "ratios": [
    "1x1",
    "1x2",
    "2x1",
    "5x7",
    "5x11",
    "7x5",
    "9x16",
    "7x10",
    "11x5",
    "14x5",
    "16x9"
  ],
  "snippet": "<div class=\"-ar-14x5 -ar-medium-11x5 -ar-large-2x1\">\n  ...\n</div>"
}
  • Content: 
    /* Aspect Ration */

@each $size in $breakpoint-classes {
  @include breakpoint($size) {
    $infix: breakpoint-infix($size);

    @each $name, $aspect-ratio in $aspect-ratios {
      &.-ar#{$infix}-#{$name} {
        @include aspect-ratio($aspect-ratio);
      }


      &.-ar-min#{$infix}-#{$name} {
        @include aspect-ratio($aspect-ratio);

        &::before {
          float: left;
        }

        &::after {
          content: '';
          display: block;
          clear: both;
        }
      }
    }
  }

  @include breakpoint(#{$size} down) {
    $infix: breakpoint-infix($size);

    @each $name, $aspect-ratio in $aspect-ratios {
      &.-ar#{$infix}-down-#{$name} {
        @include aspect-ratio($aspect-ratio);
      }
    }
  }
}
  • URL: /components/raw/aspect-ratio/_aspect-ratio.scss
  • Filesystem Path: src/components/03-css-utilities/02-helpers/aspect-ratio/_aspect-ratio.scss
  • Size: 755 Bytes

There are no notes for this item.