yagni.css/src/_spacing.css

yagni.css - collection of atomic css declarations to be embedded to your project using postcss

.mt-zero          { margin-top: var(--spacing-none); }
.mt-tiny          { margin-top: var(--spacing-tiny); }
.mt-tiny-xl       { margin-top: var(--spacing-tiny-xl); }
.mt-tiny-xxl      { margin-top: var(--spacing-tiny-xxl); }
.mt-small         { margin-top: var(--spacing-small); }
.mt-small-xl      { margin-top: var(--spacing-small-xl); }
.mt-small-xxl     { margin-top: var(--spacing-small-xxl); }
.mt-small-xxxl    { margin-top: var(--spacing-small-xxxl); }
.mt-normal        { margin-top: var(--spacing-normal); }
.mt-normal-xl     { margin-top: var(--spacing-normal-xl); }
.mt-normal-xxl    { margin-top: var(--spacing-normal-xxl); }
.mt-normal-xxxl   { margin-top: var(--spacing-normal-xxxl); }
.mt-medium        { margin-top: var(--spacing-medium); }
.mt-medium-xl     { margin-top: var(--spacing-medium-xl); }
.mt-medium-xxl    { margin-top: var(--spacing-medium-xxl); }
.mt-medium-xxxl   { margin-top: var(--spacing-medium-xxxl); }
.mt-large         { margin-top: var(--spacing-large); }
.mt-large-xl      { margin-top: var(--spacing-large-xl); }
.mt-large-xxl     { margin-top: var(--spacing-large-xxl); }
.mt-large-xxxl    { margin-top: var(--spacing-large-xxxl); }
.mt-huge          { margin-top: var(--spacing-large); }
.mt-huge-xl       { margin-top: var(--spacing-huge-xl); }
.mt-huge-xxl      { margin-top: var(--spacing-huge-xxl); }
.mt-huge-xxxl     { margin-top: var(--spacing-huge-xxxl); }

.mb-zero          { margin-bottom: var(--spacing-none); }
.mb-tiny          { margin-bottom: var(--spacing-tiny); }
.mb-tiny-xl       { margin-bottom: var(--spacing-tiny-xl); }
.mb-tiny-xxl      { margin-bottom: var(--spacing-tiny-xxl); }
.mb-small         { margin-bottom: var(--spacing-small); }
.mb-small-xl      { margin-bottom: var(--spacing-small-xl); }
.mb-small-xxl     { margin-bottom: var(--spacing-small-xxl); }
.mb-small-xxxl    { margin-bottom: var(--spacing-small-xxxl); }
.mb-normal        { margin-bottom: var(--spacing-normal); }
.mb-normal-xl     { margin-bottom: var(--spacing-normal-xl); }
.mb-normal-xxl    { margin-bottom: var(--spacing-normal-xxl); }
.mb-normal-xxxl   { margin-bottom: var(--spacing-normal-xxxl); }
.mb-medium        { margin-bottom: var(--spacing-medium); }
.mb-medium-xl     { margin-bottom: var(--spacing-medium-xl); }
.mb-medium-xxl    { margin-bottom: var(--spacing-medium-xxl); }
.mb-medium-xxxl   { margin-bottom: var(--spacing-medium-xxxl); }
.mb-large         { margin-bottom: var(--spacing-large); }
.mb-large-xl      { margin-bottom: var(--spacing-large-xl); }
.mb-large-xxl     { margin-bottom: var(--spacing-large-xxl); }
.mb-large-xxxl    { margin-bottom: var(--spacing-large-xxxl); }
.mb-huge          { margin-bottom: var(--spacing-large); }
.mb-huge-xl       { margin-bottom: var(--spacing-huge-xl); }
.mb-huge-xxl      { margin-bottom: var(--spacing-huge-xxl); }
.mb-huge-xxxl     { margin-bottom: var(--spacing-huge-xxxl); }

.ml-auto          { margin-left: auto; }
.ml-zero          { margin-left: var(--spacing-none); }
.ml-tiny          { margin-left: var(--spacing-tiny); }
.ml-tiny-xl       { margin-left: var(--spacing-tiny-xl); }
.ml-tiny-xxl      { margin-left: var(--spacing-tiny-xxl); }
.ml-small         { margin-left: var(--spacing-small); }
.ml-small-xl      { margin-left: var(--spacing-small-xl); }
.ml-small-xxl     { margin-left: var(--spacing-small-xxl); }
.ml-small-xxxl    { margin-left: var(--spacing-small-xxxl); }
.ml-normal        { margin-left: var(--spacing-normal); }
.ml-normal-xl     { margin-left: var(--spacing-normal-xl); }
.ml-normal-xxl    { margin-left: var(--spacing-normal-xxl); }
.ml-normal-xxxl   { margin-left: var(--spacing-normal-xxxl); }
.ml-medium        { margin-left: var(--spacing-medium); }
.ml-medium-xl     { margin-left: var(--spacing-medium-xl); }
.ml-medium-xxl    { margin-left: var(--spacing-medium-xxl); }
.ml-medium-xxxl   { margin-left: var(--spacing-medium-xxxl); }
.ml-large         { margin-left: var(--spacing-large); }
.ml-large-xl      { margin-left: var(--spacing-large-xl); }
.ml-large-xxl     { margin-left: var(--spacing-large-xxl); }
.ml-large-xxxl    { margin-left: var(--spacing-large-xxxl); }
.ml-huge          { margin-left: var(--spacing-large); }
.ml-huge-xl       { margin-left: var(--spacing-huge-xl); }
.ml-huge-xxl      { margin-left: var(--spacing-huge-xxl); }
.ml-huge-xxxl     { margin-left: var(--spacing-huge-xxxl); }

.mr-auto          { margin-right: auto; }
.mr-zero          { margin-right: var(--spacing-none); }
.mr-tiny          { margin-right: var(--spacing-tiny); }
.mr-tiny-xl       { margin-right: var(--spacing-tiny-xl); }
.mr-tiny-xxl      { margin-right: var(--spacing-tiny-xxl); }
.mr-small         { margin-right: var(--spacing-small); }
.mr-small-xl      { margin-right: var(--spacing-small-xl); }
.mr-small-xxl     { margin-right: var(--spacing-small-xxl); }
.mr-small-xxxl    { margin-right: var(--spacing-small-xxxl); }
.mr-normal        { margin-right: var(--spacing-normal); }
.mr-normal-xl     { margin-right: var(--spacing-normal-xl); }
.mr-normal-xxl    { margin-right: var(--spacing-normal-xxl); }
.mr-normal-xxxl   { margin-right: var(--spacing-normal-xxxl); }
.mr-medium        { margin-right: var(--spacing-medium); }
.mr-medium-xl     { margin-right: var(--spacing-medium-xl); }
.mr-medium-xxl    { margin-right: var(--spacing-medium-xxl); }
.mr-medium-xxxl   { margin-right: var(--spacing-medium-xxxl); }
.mr-large         { margin-right: var(--spacing-large); }
.mr-large-xl      { margin-right: var(--spacing-large-xl); }
.mr-large-xxl     { margin-right: var(--spacing-large-xxl); }
.mr-large-xxxl    { margin-right: var(--spacing-large-xxxl); }
.mr-huge          { margin-right: var(--spacing-large); }
.mr-huge-xl       { margin-right: var(--spacing-huge-xl); }
.mr-huge-xxl      { margin-right: var(--spacing-huge-xxl); }
.mr-huge-xxxl     { margin-right: var(--spacing-huge-xxxl); }

.m-auto           { margin-left: auto; margin-right: auto; }

.m-zero           { margin: var(--spacing-none); }
.m-tiny           { margin: var(--spacing-tiny); }
.m-tiny-xl        { margin: var(--spacing-tiny-xl); }
.m-tiny-xxl       { margin: var(--spacing-tiny-xxl); }
.m-small          { margin: var(--spacing-small); }
.m-small-xl       { margin: var(--spacing-small-xl); }
.m-small-xxl      { margin: var(--spacing-small-xxl); }
.m-small-xxxl     { margin: var(--spacing-small-xxxl); }
.m-normal         { margin: var(--spacing-normal); }
.m-normal-xl      { margin: var(--spacing-normal-xl); }
.m-normal-xxl     { margin: var(--spacing-normal-xxl); }
.m-normal-xxxl    { margin: var(--spacing-normal-xxxl); }
.m-medium         { margin: var(--spacing-medium); }
.m-medium-xl      { margin: var(--spacing-medium-xl); }
.m-medium-xxl     { margin: var(--spacing-medium-xxl); }
.m-medium-xxxl    { margin: var(--spacing-medium-xxxl); }
.m-large          { margin: var(--spacing-large); }
.m-large-xl       { margin: var(--spacing-large-xl); }
.m-large-xxl      { margin: var(--spacing-large-xxl); }
.m-large-xxxl     { margin: var(--spacing-large-xxxl); }
.m-huge           { margin: var(--spacing-large); }
.m-huge-xl        { margin: var(--spacing-huge-xl); }
.m-huge-xxl       { margin: var(--spacing-huge-xxl); }
.m-huge-xxxl      { margin: var(--spacing-huge-xxxl); }

.pt-zero          { padding-top: var(--spacing-none); }
.pt-tiny          { padding-top: var(--spacing-tiny); }
.pt-tiny-xl       { padding-top: var(--spacing-tiny-xl); }
.pt-tiny-xxl      { padding-top: var(--spacing-tiny-xxl); }
.pt-small         { padding-top: var(--spacing-small); }
.pt-small-xl      { padding-top: var(--spacing-small-xl); }
.pt-small-xxl     { padding-top: var(--spacing-small-xxl); }
.pt-small-xxxl    { padding-top: var(--spacing-small-xxxl); }
.pt-normal        { padding-top: var(--spacing-normal); }
.pt-normal-xl     { padding-top: var(--spacing-normal-xl); }
.pt-normal-xxl    { padding-top: var(--spacing-normal-xxl); }
.pt-normal-xxxl   { padding-top: var(--spacing-normal-xxxl); }
.pt-medium        { padding-top: var(--spacing-medium); }
.pt-medium-xl     { padding-top: var(--spacing-medium-xl); }
.pt-medium-xxl    { padding-top: var(--spacing-medium-xxl); }
.pt-medium-xxxl   { padding-top: var(--spacing-medium-xxxl); }
.pt-large         { padding-top: var(--spacing-large); }
.pt-large-xl      { padding-top: var(--spacing-large-xl); }
.pt-large-xxl     { padding-top: var(--spacing-large-xxl); }
.pt-large-xxxl    { padding-top: var(--spacing-large-xxxl); }
.pt-huge          { padding-top: var(--spacing-large); }
.pt-huge-xl       { padding-top: var(--spacing-huge-xl); }
.pt-huge-xxl      { padding-top: var(--spacing-huge-xxl); }
.pt-huge-xxxl     { padding-top: var(--spacing-huge-xxxl); }

.pb-zero          { padding-bottom: var(--spacing-none); }
.pb-tiny          { padding-bottom: var(--spacing-tiny); }
.pb-tiny-xl       { padding-bottom: var(--spacing-tiny-xl); }
.pb-tiny-xxl      { padding-bottom: var(--spacing-tiny-xxl); }
.pb-small         { padding-bottom: var(--spacing-small); }
.pb-small-xl      { padding-bottom: var(--spacing-small-xl); }
.pb-small-xxl     { padding-bottom: var(--spacing-small-xxl); }
.pb-small-xxxl    { padding-bottom: var(--spacing-small-xxxl); }
.pb-normal        { padding-bottom: var(--spacing-normal); }
.pb-normal-xl     { padding-bottom: var(--spacing-normal-xl); }
.pb-normal-xxl    { padding-bottom: var(--spacing-normal-xxl); }
.pb-normal-xxxl   { padding-bottom: var(--spacing-normal-xxxl); }
.pb-medium        { padding-bottom: var(--spacing-medium); }
.pb-medium-xl     { padding-bottom: var(--spacing-medium-xl); }
.pb-medium-xxl    { padding-bottom: var(--spacing-medium-xxl); }
.pb-medium-xxxl   { padding-bottom: var(--spacing-medium-xxxl); }
.pb-large         { padding-bottom: var(--spacing-large); }
.pb-large-xl      { padding-bottom: var(--spacing-large-xl); }
.pb-large-xxl     { padding-bottom: var(--spacing-large-xxl); }
.pb-large-xxxl    { padding-bottom: var(--spacing-large-xxxl); }
.pb-huge          { padding-bottom: var(--spacing-large); }
.pb-huge-xl       { padding-bottom: var(--spacing-huge-xl); }
.pb-huge-xxl      { padding-bottom: var(--spacing-huge-xxl); }
.pb-huge-xxxl     { padding-bottom: var(--spacing-huge-xxxl); }

.pl-zero          { padding-left: var(--spacing-none); }
.pl-tiny          { padding-left: var(--spacing-tiny); }
.pl-tiny-xl       { padding-left: var(--spacing-tiny-xl); }
.pl-tiny-xxl      { padding-left: var(--spacing-tiny-xxl); }
.pl-small         { padding-left: var(--spacing-small); }
.pl-small-xl      { padding-left: var(--spacing-small-xl); }
.pl-small-xxl     { padding-left: var(--spacing-small-xxl); }
.pl-small-xxxl    { padding-left: var(--spacing-small-xxxl); }
.pl-normal        { padding-left: var(--spacing-normal); }
.pl-normal-xl     { padding-left: var(--spacing-normal-xl); }
.pl-normal-xxl    { padding-left: var(--spacing-normal-xxl); }
.pl-normal-xxxl   { padding-left: var(--spacing-normal-xxxl); }
.pl-medium        { padding-left: var(--spacing-medium); }
.pl-medium-xl     { padding-left: var(--spacing-medium-xl); }
.pl-medium-xxl    { padding-left: var(--spacing-medium-xxl); }
.pl-medium-xxxl   { padding-left: var(--spacing-medium-xxxl); }
.pl-large         { padding-left: var(--spacing-large); }
.pl-large-xl      { padding-left: var(--spacing-large-xl); }
.pl-large-xxl     { padding-left: var(--spacing-large-xxl); }
.pl-large-xxxl    { padding-left: var(--spacing-large-xxxl); }
.pl-huge          { padding-left: var(--spacing-large); }
.pl-huge-xl       { padding-left: var(--spacing-huge-xl); }
.pl-huge-xxl      { padding-left: var(--spacing-huge-xxl); }
.pl-huge-xxxl     { padding-left: var(--spacing-huge-xxxl); }

.pr-zero          { padding-right: var(--spacing-none); }
.pr-tiny          { padding-right: var(--spacing-tiny); }
.pr-tiny-xl       { padding-right: var(--spacing-tiny-xl); }
.pr-tiny-xxl      { padding-right: var(--spacing-tiny-xxl); }
.pr-small         { padding-right: var(--spacing-small); }
.pr-small-xl      { padding-right: var(--spacing-small-xl); }
.pr-small-xxl     { padding-right: var(--spacing-small-xxl); }
.pr-small-xxxl    { padding-right: var(--spacing-small-xxxl); }
.pr-normal        { padding-right: var(--spacing-normal); }
.pr-normal-xl     { padding-right: var(--spacing-normal-xl); }
.pr-normal-xxl    { padding-right: var(--spacing-normal-xxl); }
.pr-normal-xxxl   { padding-right: var(--spacing-normal-xxxl); }
.pr-medium        { padding-right: var(--spacing-medium); }
.pr-medium-xl     { padding-right: var(--spacing-medium-xl); }
.pr-medium-xxl    { padding-right: var(--spacing-medium-xxl); }
.pr-medium-xxxl   { padding-right: var(--spacing-medium-xxxl); }
.pr-large         { padding-right: var(--spacing-large); }
.pr-large-xl      { padding-right: var(--spacing-large-xl); }
.pr-large-xxl     { padding-right: var(--spacing-large-xxl); }
.pr-large-xxxl    { padding-right: var(--spacing-large-xxxl); }
.pr-huge          { padding-right: var(--spacing-large); }
.pr-huge-xl       { padding-right: var(--spacing-huge-xl); }
.pr-huge-xxl      { padding-right: var(--spacing-huge-xxl); }
.pr-huge-xxxl     { padding-right: var(--spacing-huge-xxxl); }

.p-zero           { padding: var(--spacing-none); }
.p-tiny           { padding: var(--spacing-tiny); }
.p-tiny-xl        { padding: var(--spacing-tiny-xl); }
.p-tiny-xxl       { padding: var(--spacing-tiny-xxl); }
.p-small          { padding: var(--spacing-small); }
.p-small-xl       { padding: var(--spacing-small-xl); }
.p-small-xxl      { padding: var(--spacing-small-xxl); }
.p-small-xxxl     { padding: var(--spacing-small-xxxl); }
.p-normal         { padding: var(--spacing-normal); }
.p-normal-xl      { padding: var(--spacing-normal-xl); }
.p-normal-xxl     { padding: var(--spacing-normal-xxl); }
.p-normal-xxxl    { padding: var(--spacing-normal-xxxl); }
.p-medium         { padding: var(--spacing-medium); }
.p-medium-xl      { padding: var(--spacing-medium-xl); }
.p-medium-xxl     { padding: var(--spacing-medium-xxl); }
.p-medium-xxxl    { padding: var(--spacing-medium-xxxl); }
.p-large          { padding: var(--spacing-large); }
.p-large-xl       { padding: var(--spacing-large-xl); }
.p-large-xxl      { padding: var(--spacing-large-xxl); }
.p-large-xxxl     { padding: var(--spacing-large-xxxl); }
.p-huge           { padding: var(--spacing-large); }
.p-huge-xl        { padding: var(--spacing-huge-xl); }
.p-huge-xxl       { padding: var(--spacing-huge-xxl); }
.p-huge-xxxl      { padding: var(--spacing-huge-xxxl); }