Sizing

Sizing utilities can be used to size elements. There are four types of sizing scales to offer the most versatility to your designs. You can size elements by pixels, by percentages, by screen size, or use Athena sizing indexes.

Size by pixel

Sizing by pixel can be done by using the {w|h}-{$pixel-size}. These are restricted to only small sizes for when you need pixel perfect leverage. For larger elements it is better to use Athena’s sizing indexes to avoid toiling over every single pixel of your design.

        
<div class="w-16px h-16px bg-indigo-400"> </div>
<div class="w-32px h-32px bg-indigo-400"> </div>
<div class="w-64px h-64px bg-indigo-400"> </div>
<div class="w-128px h-128px bg-indigo-400"> </div>
        
    

Size by percentage

If you need to size elements relative to their parent’s size then you can use the {w|h}-{$proportion} percentage sizing classes.

        
<div class="w-quarter h-10 bg-indigo-400"></div>
        
    

Size by screen size

If you need to size elements relative to Athena screen sizes then you can use the {w|h}-{$size} sizing classes.

        
<div class="lg:w-sm h-10 bg-indigo-400"></div>
        
    

Size using sizing indexes

You can use Athena’s sizing index utility to size elements, {w|h}-{$sizing-index}.

        
<div class="w-1 h-1 bg-indigo-400"> </div>
<div class="w-2 h-2 bg-indigo-400"> </div>
<div class="w-3 h-3 bg-indigo-400"> </div>
<div class="w-4 h-4 bg-indigo-400"> </div>
<div class="w-12 h-12 bg-indigo-400"> </div>
        
    

// 11. Sizing
// ==========================================================================

$sizes: (
  "0px": 0px,
  "1px": 1px,
  "12px": 12px,
  "16px": 16px,
  "32px": 32px,
  "48px": 48px,
  "64px": 64px,
  "128px": 128px,
  "192px": 192px,
  "auto": auto,
  "quarter": 25%,
  "third": 33.3333%,
  "half": 50%,
  "two-thirds": 66.6666%,
  "three-quarters": 75%,
  "full": 100%,
  "sm": 600px,
  "md": 968px,
  "lg": 1200px,
);

$sizer: 1;
$sizer-number: 60;