YALL: Yet Another Layout Library

index.html

<!--
Reference
https://codepen.io/alaindet/pen/MWmxrJb
-->

<h1>YALL: Yet Another Layout Library</h1>

<p>
  This whole library weights about 5 Kb minified (less than 1 Kb gzipped) and serves the only purpose of <strong>helping you place elements on the page</strong>. YALL provides a responsive grid and a set of utility classes for spacing. That's it. No colors, no components, no typography. Just -SPACE-!
</p>

<p>
  You don't need to <em>install anything</em> and live with dependencies you cannot control for the rest of your project's life, just swap the CSS panel of this pen to <strong>View Compiled CSS</strong>, copy the output and paste it wherever you want. Be sure to minify it though, maybe <a href="https://cssminifier.com/">https://cssminifier.com/</a> can help
</p>

<p>
  For you my SASS-savvy friends, the <strong>CSS (SCSS) panel</strong> of this pen tells you the whole story and also allows you to configure YALL before building, like removing spacing utilities, changing all CSS classes prefixes, etc. Just tweak the <code>$YALL-CONFIGURATION</code> variable and you're done.
</p>

<p>
  For example, set <code>enabled: false</code> on the <code>spacing</code> section of the <code>$YALL-CONFIGURATION</code> variable to remove spacing utilities from the output. Or, change the prefix of all classes from <code>ya-</code> to <code>_</code> (or even an empty string for no prefix at all) to change <code>.ya-col-2</code> to <code>._col-2</code> and get things done faster.
</p>

<h2>Grid</h2>

<h3>Row-based</h3>

<div class="ya-rows">
  <div class="ya-row">
    <div class="ya-col">Col</div>
    <div class="ya-col">Col</div>
    <div class="ya-col">Col</div>
  </div>
  <div class="ya-row">
    <div class="ya-col-6">Col 6</div>
    <div class="ya-col-3">Col 3</div>
    <div class="ya-col-3">Col 3</div>
  </div>
  <div class="ya-row">
    <div class="ya-col-6">Col 6</div>
    <div class="ya-col-6">Col 6</div>
  </div>
  <div class="ya-row">
    <div class="ya-col-8">Col 8</div>
    <div class="ya-col-4">Col 4</div>
  </div>
</div>

<h3>Col-based</h3>

<div class="ya-cols">
  <div class="ya-col-8">Col 8</div>
  <div class="ya-col-4">Col 4</div>
  <div class="ya-col-4">Col 4</div>
  <div class="ya-col-8">Col 8</div>
</div>

<h3>Responsive</h3>

<div class="ya-rows">
  <div class="ya-row">
    <div class="ya-col-12 ya-col-s-6 ya-col-m-3">A1</div>
    <div class="ya-col-12 ya-col-s-6 ya-col-m-3">B1</div>
    <div class="ya-col-12 ya-col-s-6 ya-col-m-3">C1</div>
    <div class="ya-col-12 ya-col-s-6 ya-col-m-3">D1</div>
  </div>
  <div class="ya-row">
    <div class="ya-col-12 ya-col-s-6 ya-col-m-3">A2</div>
    <div class="ya-col-12 ya-col-s-6 ya-col-m-3">B2</div>
    <div class="ya-col-12 ya-col-s-6 ya-col-m-3">C2</div>
    <div class="ya-col-12 ya-col-s-6 ya-col-m-3">D2</div>
  </div>
</div>

<h2>Spacing</h2>

<h3>4 sides</h3>
<div class="demo-cage">
  <div class="ya-m2 ya-p3">Lorem ipsum</div>
</div>

<h4>2 sides</h4>
<div class="demo-cage">
  <div class="ya-mx2 ya-px2 demo">Lorem ipsum</div>
</div>
<div class="demo-cage">
  <div class="ya-my1 ya-mx2 ya-px4 ya-py2 demo">Lorem ipsum</div>
</div>

<h4>1 side</h4>
<div class="demo-cage">
  <div class="ya-mt1 ya-mr2 ya-mb3 ya-ml4 ya-pt1 ya-pr2 ya-pb3 ya-pl4">Lorem ipsum</div>
</div>

<h4>Full scale</h4>
<div class="demo-cage">
  <div class="ya-m1 ya-py1 ya-px2">Size 1</div>
</div>
<div class="demo-cage">
  <div class="ya-m2 ya-py1 ya-px2">Size 2</div>
</div>
<div class="demo-cage">
  <div class="ya-m3 ya-py1 ya-px2">Size 3</div>
</div>
<div class="demo-cage">
  <div class="ya-m4 ya-py1 ya-px2">Size 4</div>
</div>
<div class="demo-cage">
  <div class="ya-m5 ya-py1 ya-px2">Size 5</div>
</div>
<div class="demo-cage">
  <div class="ya-m6 ya-py1 ya-px2">Size 6</div>
</div>
<div class="demo-cage">
  <div class="ya-m7 ya-py1 ya-px2">Size 7</div>
</div>
<div class="demo-cage">
  <div class="ya-m8 ya-py1 ya-px2">Size 8</div>
</div>

style.scss

// -------------------------------------------------------
//
//    IMPORTANT STUFF AHEAD
//    Make sure to skip the demo stuff at the end
//    If you're copy-pasting this file
//
// -------------------------------------------------------

// -------------------------------------------------------
//
//    Configuration
//
// -------------------------------------------------------

$YALL-CONFIGURATION: (

  prefix: 'ya-',
  
  grid: (
    enabled: true,
    columns: 12,
    breakpoints: (
      's': 768px,
      'm': 1024px,
      'l': 1280px,
    ),
  ),
  
  spacing: (
    enabled: true,
    rules: (
      p: padding,
      m: margin
    ),
    spacer: 0.5rem,
    spacer-multipliers: (
      1: 1,
      2: 2,
      3: 3,
      4: 5,
      5: 8,
      6: 13,
      7: 21,
      8: 34,
    ),
  ),

);

// -------------------------------------------------------
//
//    Utils
//
// -------------------------------------------------------

// Based on
// https://stackoverflow.com/a/34982673
@function yall-decimal-round($number, $digits: 0)
{
  $n: 1;

  @if $digits > 0 {
    @for $i from 1 through $digits {
      $n: $n * 10;
    }
  }

  @return round($number * $n) / $n;
}

// Based on
// https://github.com/alaindet/sass-pal/blob/main/src/helpers/functions/string/_split.scss
@function yall-string-split($string, $separator: ' ')
{
  $output: ();

  // Divide the letters
  @if ($separator == '') {
    @for $i from 1 through str-length($string) {
      $char: str-slice($string, $i, $i);
      $output: append($output, $char);
    }
    @return $output;
  }

  $index: str-index($string, $separator);
  @while ($index != null) {
    $bit: str-slice($string, 1, $index - 1);
    $output: append($output, $bit);
    $string: str-slice($string, $index + 1);
    $index: str-index($string, $separator);
  }
  $output: append($output, $string);

  @return $output;
}

// Based on
// https://github.com/alaindet/sass-pal/blob/main/src/helpers/functions/map/_get.scss
@function yall-map-get($map, $query)
{
  @if (str-index($query, '.') == null) {
    @return map-get($map, $query);
  }

  $output: $map;

  @each $key in yall-string-split($query, '.') {
    $output: map-get($output, $key);
  }

  @return $output;
}

// -------------------------------------------------------
//
//    Grid
//
// -------------------------------------------------------

@mixin yall-grid()
{
  $yall-prefix: yall-map-get($YALL-CONFIGURATION, 'prefix');

  .#{$yall-prefix}rows {
    box-sizing: border-box;
  }

  .#{$yall-prefix}cols {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;

    > * {
      box-sizing: border-box;
    }
  }

  .#{$yall-prefix}row {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;

    > * {
      box-sizing: border-box;
    }
  }

  $yall-breakpoints: yall-map-get($YALL-CONFIGURATION, 'grid.breakpoints');
  $yall-cols: yall-map-get($YALL-CONFIGURATION, 'grid.columns');

  .#{$yall-prefix}col {
    flex: 1 1 0;

    @for $i from 1 through $yall-cols {
      &-#{$i} {
        flex-basis: yall-decimal-round($i * (100% / $yall-cols), 3);
      }
    }

    @each $breakpoint-key, $breakpoint-value in $yall-breakpoints {
      @media screen and (min-width: $breakpoint-value) {
        @for $i from 1 through $yall-cols {
          &-#{$breakpoint-key}-#{$i} {
            flex-basis: yall-decimal-round($i * (100% / $yall-cols), 3);
          }
        }
      }
    }
  }
}

@if yall-map-get($YALL-CONFIGURATION, 'grid.enabled') == true {
  @include yall-grid();
}

// -------------------------------------------------------
//
//    Spacing
//
// -------------------------------------------------------

@mixin yall-spacing()
{
  $yall-prefix: yall-map-get($YALL-CONFIGURATION, 'prefix');
  $yall-rules: yall-map-get($YALL-CONFIGURATION, 'spacing.rules');
  $yall-spacer: yall-map-get($YALL-CONFIGURATION, 'spacing.spacer');
  $yall-spacer-multipliers: yall-map-get($YALL-CONFIGURATION, 'spacing.spacer-multipliers');

  @each $key, $rule in $yall-rules {
      @each $index, $multiplier in $yall-spacer-multipliers {

          $value: $multiplier * $yall-spacer;

          // 4 sides
          .#{$yall-prefix}#{$key}#{$index} {
              #{$rule}: $value;
          }

          // 2 sides
          .#{$yall-prefix}#{$key}y#{$index} {
              #{$rule}-top: $value;
              #{$rule}-bottom: $value;
          }

          .#{$yall-prefix}#{$key}x#{$index} {
              #{$rule}-left: $value;
              #{$rule}-right: $value;
          }

          // 1 side
          .#{$yall-prefix}#{$key}t#{$index} {
              #{$rule}-top: $value;            
          }

          .#{$yall-prefix}#{$key}r#{$index} {
              #{$rule}-right: $value;            
          }

          .#{$yall-prefix}#{$key}b#{$index} {
              #{$rule}-bottom: $value;            
          }

          .#{$yall-prefix}#{$key}l#{$index} {
              #{$rule}-left: $value;            
          }
      }
  }
}

@if yall-map-get($YALL-CONFIGURATION, 'spacing.enabled') == true {
  @include yall-spacing();
}

// -------------------------------------------------------
//
//    END OF IMPORTANT STUFF
//
// -------------------------------------------------------


// -------------------------------------------------------
//
//    DEMO STUFF, IGNORE THIS
//
// -------------------------------------------------------
$yall-prefix: yall-map-get($YALL-CONFIGURATION, 'prefix');

body {
  font-family: monospace;
  font-size: 14px;
  line-height: 24px;
}

code {
  color: #3360dd;
  background-color: #ddeeff;
  padding: 4px;
}

.#{$yall-prefix}rows,
.#{$yall-prefix}cols {
  border: 1px solid rgba(0, 0, 0, 0.5);
  background-color: #ffa0a0;
  padding: 0.33rem;
}

.#{$yall-prefix}row {
  border: 1px solid rgba(0, 0, 0, 0.5);
  background-color: #a0a0ff;
  padding: 0.33rem;
}

.#{$yall-prefix}row > *,
.#{$yall-prefix}cols > * {
  border: 1px solid rgba(0, 0, 0, 0.5);
  background-color: #80ffa0;
  padding: 0.33rem;
}

.demo-cage {
  border: 1px solid black;
  
  > * {
    background-color: #80ffa0;
  }
}

// -------------------------------------------------------
//
//    END OF DEMO STUFF
//
// -------------------------------------------------------