FrontBox Style Documentation

Layout

Settings

    Modules

      Functions

        Generators

          Shapes

            Space

            Create space between element children's.

            Mixin

            $space-horizontal: pixels

            $space-vertical-y?: pixels || $space-horizontal 

            space-x($space-horizontal);
            space-y($space-vertical);
            space($space-horizontal, $space-vertical);

            Usage

            .space {
             @include space(20px, 10px);
            }
            .space-x {
             @include space-x(20px);
            }
            .space-y {
             @include space-y(10px);
            }

            Example

            File Content (layout/space.scss)

            // Horizontal space
            @mixin space-x($space-horizontal) {
              margin-left: -#{$space-horizontal};
            

              > * {
                padding-left: $space-horizontal;
              }
            }
            

            // Vertical space
            @mixin space-y($space-vertical) {
              margin-bottom: -#{$space-vertical};
            

              > * {
                padding-bottom: $space-vertical;
              }
            }
            

            // Vertical/horizontal space
            @mixin space($space-horizontal: 0, $space-vertical: $space-horizontal) {
              @include space-x($space-horizontal);
              @include space-y($space-vertical);
            }