Created
April 21, 2023 13:05
-
-
Save alaindet/6dcefda45595386a32ad62244a741244 to your computer and use it in GitHub Desktop.
YALL: Yet Another Layout Library
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ------------------------------------------------------- | |
// | |
// 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 | |
// | |
// ------------------------------------------------------- |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment