Flexbox Placeholders

SASS placeholders are an efficient and powerful way to group shared styles. Unlike mixins, no code is repeated in your compiled CSS file, which is good for performance. Among the combinations frequently used in projects, positioning with Flexbox is very often at the top of the list. Here is a series of placeholders available by default with Sailor CSS.

SASS placeholders are not compiled into your final CSS if they are not used.

How to use it

In your partial, use placeholders with @extend. Note that Sailor CSS must first be included in your file with @use. You do not need to add the namespace before including the placeholders.

_partial.scss


@use "sailorcss" as s;

.element {
   @extend %row-left-bottom;
   // other properties
}

Placeholders list

Note that only the most frequent combinations are available. The goal of Sailor is to give you work tools, but to remain minimalist in its approach.

@extend %row-left-top

output.css


         display: flex;
         flex-direction: row;
         justify-content: flex-start;
         align-items: flex-start;

@extend %row-left-center

output.css


         display: flex;
         flex-direction: row;
         justify-content: flex-start;
         align-items: center;

@extend %row-left-bottom

output.css


         display: flex;
         flex-direction: row;
         justify-content: flex-start;
         align-items: flex-end;

@extend %row-center-top

output.css


         display: flex;
         flex-direction: row;
         justify-content: center;
         align-items: flex-start;

@extend %row-center-center

output.css


         display: flex;
         flex-direction: row;
         justify-content: center;
         align-items: center;

@extend %row-center-bottom

output.css


         display: flex;
         flex-direction: row;
         justify-content: center;
         align-items: flex-end;

@extend %row-right-top

output.css


         display: flex;
         flex-direction: row;
         justify-content: flex-end;
         align-items: flex-start;

@extend %row-right-center

output.css


         display: flex;
         flex-direction: row;
         justify-content: flex-end;
         align-items: center;

@extend %row-right-bottom

output.css


         display: flex;
         flex-direction: row;
         justify-content: flex-end;
         align-items: flex-end;

@extend %row-space-top

output.css


         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: flex-start;

@extend %row-space-center

output.css


         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: center;

@extend %row-space-bottom

output.css


         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: flex-end;

@extend %column-left-top

output.css


         display: flex;
         flex-direction: column;
         justify-content: flex-start;
         align-items: flex-start;

@extend %column-left-center

output.css


         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: flex-start;

@extend %column-left-bottom

output.css


         display: flex;
         flex-direction: column;
         justify-content: flex-end;
         align-items: flex-start;

@extend %column-right-top

output.css


         display: flex;
         flex-direction: column;
         justify-content: flex-start;
         align-items: flex-end;

@extend %column-right-center

output.css


         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: flex-end;

@extend %column-right-bottom

output.css


         display: flex;
         flex-direction: column;
         justify-content: flex-end;
         align-items: flex-end;

@extend %column-center-top

output.css


         display: flex;
         flex-direction: column;
         justify-content: flex-start;
         align-items: center;

@extend %column-center-center

output.css


         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;

@extend %column-center-bottom

output.css


         display: flex;
         flex-direction: column;
         justify-content: flex-end;
         align-items: center;