Cacher is the code snippet organizer for pro developers

// Alignment
.text-center{
    text-align: center;
}
 
.align-vertical{
    position: absolute;
    transform: translatey(-50%);
    top: 50%;
}
 
.align-horizontal{
    position: absolute;
    transform: translatex(-50%);
    left: 50%;
}
 
.align-center{
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}
 

.flex {
    -webkit-display: flex;
    display: flex;
 
//PARENT classes
    //.flex__desktop
    &-desktop{
        @media @breakpoint-sm{
            -webkit-display: flex;
            display: flex;
        }
    }
 
    &-mobile {
        @media @breakpoint-sm-down{
            display: flex;
        }
    }
    //.flex-1
    &-1{
        //display: -webkit-flex;
        //display: flex;
 
        > *{
            flex: 1;
            min-width: 1px;
        }
    }
 
    //.flex-children > *
    &-children > *{
        -webkit-display: flex;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
 
    //.flex-grow > *
    &-grow > *{
        flex-grow: 1;
    }
 
    //.flex-wrap
    &-wrap{
        flex-wrap: wrap;
    }
 
    //.flex-column
    &-column{
        flex-direction: column;
    }
 
    //.flex-column-tablet
    &-column-tablet{
        @media @breakpoint-md-down {
            flex-direction: column;
        }
    }
 
    //.flex-center
    &-center{
        justify-content: center;
    }
 
    //.flex-supercenter
    &-supercenter{
        justify-content: center;
        align-items: center;
 
    }
 
    //.flex-space-between
    &-space-between{
        justify-content: space-between;
    }
 
    //.flex-space-around
    &-space-around{
        justify-content: space-between;
    }
 
    //.flex-end
    &-end{
        justify-content: flex-end;
    }
 
    //.flex-v-start
    &-v-start{
        align-items: flex-start;
    }
 
    //.flex-v-end
    &-v-end{
        align-items: flex-end;
    }
 
    //.flex-center
    &-v-center{
        align-items: center;
    }
 
    //.flex-v-stretch
    &-v-stretch{
        align-items: stretch;
    }
 
    //.flex-v-baseline
    &-v-baseline{
        align-items: baseline;
    }
 
    //CHILD classes
 
    //.flex-c-grow
    &-c-grow{
        flex-grow: 1;
    }
 
    //.flex-c-center
    &-c-center{
        align-self: center;
    }
 
    //.flex-c-start
    &-c-start{
        align-self: flex-start;
    }
 
    //.flex-c-end
    &-c-end{
        align-self: flex-end;
    }
 
    //.flex-c-stretch
    &-c-stretch{
        align-self: stretch;
    }
 
    //.flex-c-baseline
    &-c-baseline{
        align-self: baseline; //who knows
    }
 
    //.flex-c-children
    &-c-children{
        align-items: center;
        justify-content: center;
        text-align: center;
    }
  
 
    &-row {
        flex-flow: row wrap;
    }
}

.Transition( @property: all, @time:.5s ) {
    transition: @property @time;
    -webkit-transition: @property @time;
    -moz-transition: @property @time;
    -ms-transition: @property @time;
}
 
.TransitionEase( @property, @time ) {
    transition: @property @time ease;
    -webkit-transition: @property @time ease;
    -moz-transition: @property @time ease;
    -ms-transition: @property @time ease;
}
 
.TransformScale( @variable) {
    transform: scale( @variable );
    -ms-transform: scale( @variable );
    -webkit-transform: scale( @variable );
}
 
.TransformRotate( @variable) {
    transform: rotate( @variable );
    -ms-transform: rotate( @variable );
    -webkit-transform: rotate( @variable );
}
 
.ColorTransition(@color-1, @color-2){
    .TransitionEase(all, 0.5s);
    color: @color-2;
 
 
    &:hover{
        color: @color-1;
    }
}

.flex-quarters__child {
    flex: 1 1 24%;
    max-width: 24%;
    margin: 0 0.3% 1.5rem;
}

.flex-thirds__child {
    flex: 1 1 32%;
    max-width: 32%;
    margin: 0 0.3% 1.5rem;
}

.flex-halves__child {
    flex: 1 1 49%;
    max-width: 49%;
    margin: 0 0.3% 1.5rem;
}

.flex-none-full-width {
    width: 100%;
    flex: none;
    max-width: 100%;
}

.flex-thirds {
    .flex;
    flex-wrap: wrap;

    li,
    article {
        .flex-thirds__child;

        @media @breakpoint-sm-down {
            .flex-none-full-width;
        }
    }
}

.flex-thirds-and-quarters {
    .flex;
    flex-wrap: wrap;

    li,
    article {
        @media @breakpoint-sm-down {
            .flex-none-full-width;
        }

        @media @breakpoint-sm {
            .flex-thirds__child;
        }

        @media @breakpoint-md {
            .flex-quarters__child;
        }
    }
}

.flex-quarters {
    .flex;
    flex-wrap: wrap;

    li,
    article {
        .flex-quarters__child;

        @media @breakpoint-sm-down {
            .flex-none-full-width;
        }
    }
}
.flex-halves {
    .flex;
    flex-wrap: wrap;

    li,
    article {
        .flex-halves__child;

        @media @breakpoint-sm-down {
            .flex-none-full-width;
        }
    }
}