Javier Rodriguez

Menu

FRM 01 Helpers GSS and Flex

Home  / CSS ** Framework Libraries  / FRM 01 Helpers GSS and Flex

FRAMEWORK 2024-08-24

Automatic Even Grid

.gssauto
.gssauto-child

Auto Fit Grids

Auto 1fr

.gss--auto-1
.gsschild--auto-1

Auto Size

Rest

1fr Auto

.gss--1-auto
.gsschild--1-auto

Rest

Auto Size

Repeat Grids

1fr Repeat 2

.gss--r-2
.gsschild--r-2

1fr Repeat 3

.gss--r-3
.gsschild--r-3

1fr Repeat 4

.gss--r-4
.gsschild--r-4

1fr Repeat 5

.gss--r-5
.gsschild--r-4

1fr Repeat 6

.gss--r-6
.gsschild--r-6

Set Grids

Thirds

.gss--1-2
.gsschild--1-2
.gss--2-1
.gss--2-1-child

Fourths

.gss--1-3
.gss--1-3-child 
.gss--3-1
.gss--3-1-child 
.gss--2-1-1
.gss--2-1-1-child 
.gss--1-2-1
.gss--1-2-1-child 
.gss--1-1-2
.gss--1-1-2-child

Fifths

.gss--1-4
.gss--1-4-child 
.gss--4-1
.gss--4-1-child 
.gss--2-3
.gss--2-3-child 
.gss--3-2
.gss--3-2-child 
.gss--1-2-2
.gss--1-2-2-child 
.gss--2-1-2
.gss--2-1-2-child 
.gss--2-2-1
.gss--2-2-1-child 
.gss--3-1-1
.gss--3-1-1-child 
.gss--1-3-1
.gss--1-3-1-child 
.gss--1-1-3
.gss--1-1-3-child

Sixths

.gss--1-5
.gss--1-5-child 
.gss--5-1
.gss--5-1-child

CSS Grid Helpers

/****************************************************************************
*****************************************************************************
FRM 01 Helpers GSS and Flex
*****************************************************************************
****************************************************************************/

/*---------------------------------------------------------------------------
CSS Grid Helpers - GRID 1fr @ 759px FRAMEWORK 2024-07-26
---------------------------------------------------------------------------*/

/* Rplacing Gutenberg Columns Flex to grid & GSS Auto Grid */
.wp-block-columns, .gssauto, .gssauto-child > * { display: grid !important; grid-auto-columns: 1fr; grid-auto-flow: row;  margin-bottom: 0; }
.wp-block-column:not(:first-child) { margin-left: 0em; }

    @media screen and (min-width: 760px) {
        .wp-block-columns, .gssauto, .gssauto-child > * { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column;  margin-bottom: 0; }
    }

/* GSS Grid 1fr @ 759px
-----------------------------------------------*/
*[class*="gss--"], *[class*="gsschild--"] > *  {  display: grid !important; grid-auto-columns: 1fr; grid-auto-flow: row;}

    @media screen and (min-width: 760px) {

        /* Auto Fit Grids */
        .gss--1-auto, .gsschild----1-auto > * { display: grid !important;grid-template-columns: 1fr auto; }
        .gss--auto-1, .gsschild--auto-1 > * { grid-template-columns: auto 1fr; }

        /* repeat grids */
        .gss--r-2,      .gsschild--r-2 > * { grid-template-columns: repeat(2, 1fr) ; }
        .gss--r-3,      .gsschild--r-3 > * { grid-template-columns: repeat(3, 1fr) ; }
        .gss--r-4,      .gsschild--r-4 > * { grid-template-columns: repeat(4, 1fr) ; }
        .gss--r-5,      .gsschild--r-5 > * { grid-template-columns: repeat(5, 1fr) ; }
        .gss--r-6,      .gsschild--r-6 > * { grid-template-columns: repeat(6, 1fr) ; }
        .gss--r-12,     .gsschild--r-12 > * { grid-template-columns: repeat(12, 1fr) ; }

        /* Set grid - Thirds */
        .gss--1-2,      .gsschild--1-2 > *     { grid-template-columns: 1fr 2fr ; }
        .gss--2-1,      .gsschild--2-1 > *     { grid-template-columns: 2fr 1fr ; }

        /* Set grid - Fourths */
        .gss--1-3,      .gsschild--1-3 > *    { grid-template-columns: 1fr 3fr ; }
        .gss--3-1,      .gsschild--3-1 > *    { grid-template-columns: 3fr 1fr ; }

        .gss--2-1-1,    .gsschild--2-1-1 > *  { grid-template-columns: 2fr 1fr 1fr ; }
        .gss--1-2-1,    .gsschild--1-2-1 > *  { grid-template-columns: 1fr 2fr 1fr ; }
        .gss--1-1-2,    .gsschild--1-1-2 > *  { grid-template-columns: 1fr 1fr 2fr ; }

        /* Set grid - Fifths */
        .gss--1-4,      .gsschild--1-4 > *  { grid-template-columns: 1fr 4fr ; }
        .gss--4-1,      .gsschild--4-1 > *  { grid-template-columns: 4fr 1fr ; }

        .gss--2-3,      .gsschild--2-3 > *  { grid-template-columns: 2fr 3fr ; }
        .gss--3-2,      .gsschild--3-2 > *  { grid-template-columns: 3fr 2fr ; }

        .gss--1-2-2,    .gsschild--1-2-2 > *  { grid-template-columns: 1fr 2fr 2fr ; }
        .gss--2-1-2,    .gsschild--2-1-2 > *  { grid-template-columns: 2fr 1fr 2fr ; }
        .gss--2-2-1,    .gsschild--2-2-1 > *  { grid-template-columns: 2fr 2fr 1fr ; }

        .gss--3-1-1,    .gsschild--3-1-1 > *  { grid-template-columns: 3fr 1fr 1fr ; }
        .gss--1-3-1,    .gsschild--1-3-1 > *  { grid-template-columns: 1fr 3fr 1fr ; }
        .gss--1-1-3,    .gsschild--1-1-3 > *  { grid-template-columns: 1fr 1fr 3fr ; }

        /* Set grid - Sixths */
        .gss--1-5,      .gsschild--1-5 > *     { grid-template-columns: 1fr 5fr ; }
        .gss--5-1,      .gsschild--5-1 > *     { grid-template-columns: 5fr 1fr ; }

        /* Grid Column Order i.e. Source Ordering */
        .gsc--order-0 { order: 0; }
        .gsc--order-1 { order: 1; }
        .gsc--order-2 { order: 2; }
        .gsc--order-3 { order: 3; }

        /* Grid Column Over i.e. Overlap/Pull */
        .gsc--over-r { position: relative; z-index: 10; margin-right:   calc(-1 * var(--sp-base)) !important; }
        .gsc--over-l { position: relative; z-index: 10; margin-left:    calc(-1 * var(--sp-base)) !important; }
        .gsc--over-h { position: relative; z-index: 10; margin-left:    calc(-1 * var(--sp-base)) !important; margin-right: calc(-1 * var(--sp-base)) !important; }
        .gsc--over-t { position: relative; z-index: 10; margin-top:     calc(-1 * var(--sp-base)) !important; }
        .gsc--over-b { position: relative; z-index: 10; margin-bottom:  calc(-1 * var(--sp-base)) !important; }
        .gsc--over-v { position: relative; z-index: 10; margin-top:     calc(-1 * var(--sp-base)) !important; margin-bottom: calc(-1 * var(--sp-base)) !important; }


        /* Grid Column Push */
        .gsc--push-r { margin-right: calc(1 * var(--sp-base)); }
        .gsc--push-l  { margin-left: calc(1 * var(--sp-base)); }

        /* Grid Column Span */
        .gsc--span-0 { grid-column: 1 / -1; }
        .gsc--span-2 { grid-column: auto / span 2; }
        .gsc--span-3 { grid-column: auto / span 3; }
        .gsc--span-4 { grid-column: auto / span 4; }
        .gsc--span-5 { grid-column: auto / span 5; }
        .gsc--span-6 { grid-column: auto / span 6; }
        .gsc--span-7 { grid-column: auto / span 7; }
        .gsc--span-8 { grid-column: auto / span 8; }
        .gsc--span-9 { grid-column: auto / span 9; }
        .gsc--span-10 { grid-column: auto / span 10; }
        .gsc--span-11 { grid-column: auto / span 11; }
    }

/* GSS Grid All
-----------------------------------------------*/

/* Auto Fit Grids */
.gss--1-auto-all, .gsschild--1-auto-all > * { grid-template-columns: 1fr auto; }
.gss--auto-1-all, .gsschild--auto-1-all > * { grid-template-columns: auto 1fr; }

/* repeat grids */
.gss--r-2-all,      .gsschild--r-2-all > * { grid-template-columns: repeat(2, 1fr) ; }
.gss--r-3-all,      .gsschild--r-3-all > * { grid-template-columns: repeat(3, 1fr) ; }
.gss--r-4-all,      .gsschild--r-4-all > * { grid-template-columns: repeat(4, 1fr) ; }
.gss--r-5-all,      .gsschild--r-5-all > * { grid-template-columns: repeat(5, 1fr) ; }
.gss--r-6-all,      .gsschild--r-6-all > * { grid-template-columns: repeat(6, 1fr) ; }
.gss--r-12-all,     .gsschild--r-12-all > * { grid-template-columns: repeat(12, 1fr) ; }

/* Set grid - Thirds */
.gss--1-2-all,      .gsschild--1-2-all > *     { grid-template-columns: 1fr 2fr ; }
.gss--2-1-all,      .gsschild--2-1-all > *     { grid-template-columns: 2fr 1fr ; }

/* Set grid - Fourths */
.gss--1-3-all,      .gsschild--1-3-all > *    { grid-template-columns: 1fr 3fr ; }
.gss--3-1-all,      .gsschild--3-1-all > *    { grid-template-columns: 3fr 1fr ; }

.gss--2-1-1-all,    .gsschild--2-1-1-all > *  { grid-template-columns: 2fr 1fr 1fr ; }
.gss--1-2-1-all,    .gsschild--1-2-1-all > *  { grid-template-columns: 1fr 2fr 1fr ; }
.gss--1-1-2-all,    .gsschild--1-1-2-all > *  { grid-template-columns: 1fr 1fr 2fr ; }

/* Set grid - Fifths */
.gss--1-4-all,      .gsschild--1-4-all > *  { grid-template-columns: 1fr 4fr ; }
.gss--4-1-all,      .gsschild--4-1-all > *  { grid-template-columns: 4fr 1fr ; }

.gss--2-3-all,      .gsschild--2-3-all > *  { grid-template-columns: 2fr 3fr ; }
.gss--3-2-all,      .gsschild--3-2-all > *  { grid-template-columns: 3fr 2fr ; }

.gss--1-2-2-all,    .gsschild--1-2-2-all > *  { grid-template-columns: 1fr 2fr 2fr ; }
.gss--2-1-2-all,    .gsschild--2-1-2-all > *  { grid-template-columns: 2fr 1fr 2fr ; }
.gss--2-2-1-all,    .gsschild--2-2-1-all > *  { grid-template-columns: 2fr 2fr 1fr ; }

.gss--3-1-1-all,    .gsschild--3-1-1-all > *  { grid-template-columns: 3fr 1fr 1fr ; }
.gss--1-3-1-all,    .gsschild--1-3-1-all > *  { grid-template-columns: 1fr 3fr 1fr ; }
.gss--1-1-3-all,    .gsschild--1-1-3-all > *  { grid-template-columns: 1fr 1fr 3fr ; }

/* Set grid - Sixths */
.gss--1-5-all,      .gsschild--1-5-all > *     { grid-template-columns: 1fr 5fr ; }
.gss--5-1-all,      .gsschild--5-1-all > *     { grid-template-columns: 5fr 1fr ; }


/* GSS Grid Small
-----------------------------------------------*/
@media screen and (max-width: 759px) {

    /* Auto Fit Grids */
    .gss--1-auto-small, .gsschild--1-auto-small > * { grid-template-columns: 1fr auto; }
    .gss--auto-1-small, .gsschild--auto-1-small > * { grid-template-columns: auto 1fr; }

    /* repeat grids */
    .gss--r-2-small,      .gsschild--r-2-small > * { grid-template-columns: repeat(2, 1fr) ; }
    .gss--r-3-small,      .gsschild--r-3-small > * { grid-template-columns: repeat(3, 1fr) ; }
    .gss--r-4-small,      .gsschild--r-4-small > * { grid-template-columns: repeat(4, 1fr) ; }
    .gss--r-5-small,      .gsschild--r-5-small > * { grid-template-columns: repeat(5, 1fr) ; }
    .gss--r-6-small,      .gsschild--r-6-small > * { grid-template-columns: repeat(6, 1fr) ; }
    .gss--r-12-small,     .gsschild--r-12-small > * { grid-template-columns: repeat(12, 1fr) ; }

    /* Set grid - Thirds */
    .gss--1-2-small,      .gsschild--1-2-small > *     { grid-template-columns: 1fr 2fr ; }
    .gss--2-1-small,      .gsschild--2-1-small > *     { grid-template-columns: 2fr 1fr ; }

    /* Set grid - Fourths */
    .gss--1-3-small,      .gsschild--1-3-small > *    { grid-template-columns: 1fr 3fr ; }
    .gss--3-1-small,      .gsschild--3-1-small > *    { grid-template-columns: 3fr 1fr ; }

    .gss--2-1-1-small,    .gsschild--2-1-1-small > *  { grid-template-columns: 2fr 1fr 1fr ; }
    .gss--1-2-1-small,    .gsschild--1-2-1-small > *  { grid-template-columns: 1fr 2fr 1fr ; }
    .gss--1-1-2-small,    .gsschild--1-1-2-small > *  { grid-template-columns: 1fr 1fr 2fr ; }

    /* Set grid - Fifths */
    .gss--1-4-small,      .gsschild--1-4-small > *  { grid-template-columns: 1fr 4fr ; }
    .gss--4-1-small,      .gsschild--4-1-small > *  { grid-template-columns: 4fr 1fr ; }

    .gss--2-3-small,      .gsschild--2-3-small > *  { grid-template-columns: 2fr 3fr ; }
    .gss--3-2-small,      .gsschild--3-2-small > *  { grid-template-columns: 3fr 2fr ; }

    .gss--1-2-2-small,    .gsschild--1-2-2-small > *  { grid-template-columns: 1fr 2fr 2fr ; }
    .gss--2-1-2-small,    .gsschild--2-1-2-small > *  { grid-template-columns: 2fr 1fr 2fr ; }
    .gss--2-2-1-small,    .gsschild--2-2-1-small > *  { grid-template-columns: 2fr 2fr 1fr ; }

    .gss--3-1-1-small,    .gsschild--3-1-1-small > *  { grid-template-columns: 3fr 1fr 1fr ; }
    .gss--1-3-1-small,    .gsschild--1-3-1-small > *  { grid-template-columns: 1fr 3fr 1fr ; }
    .gss--1-1-3-small,    .gsschild--1-1-3-small > *  { grid-template-columns: 1fr 1fr 3fr ; }

    /* Set grid - Sixths */
    .gss--1-5-small,      .gsschild--1-5-small > *     { grid-template-columns: 1fr 5fr ; }
    .gss--5-1-small,      .gsschild--5-1-small > *     { grid-template-columns: 5fr 1fr ; }

}

CSS Flexbox Columns Helpers

/*---------------------------------------------------------------------------
CSS Flexbox Columns Helpers - 100% Width @ 759px FRAMEWORK 2024-07-27
---------------------------------------------------------------------------*/

.fcls--6, .fcls--6-child > *, .fcls--6-rim, .fcls--6-rim-child > *, .fcls--6-base, .fcls--6-base-child  > *,
.fcls--5, .fcls--5-child > *, .fcls--5-rim, .fcls--5-rim-child > *, .fcls--5-base, .fcls--5-base-child  > *,
.fcls--4, .fcls--4-child > *, .fcls--4-rim, .fcls--4-rim-child > *, .fcls--4-base, .fcls--4-base-child  > *,
.fcls--3, .fcls--3-child > *, .fcls--3-rim, .fcls--3-rim-child > *, .fcls--3-base, .fcls--3-base-child  > *,
.fcls--2, .fcls--2-child > *, .fcls--2-rim, .fcls--2-rim-child > *, .fcls--2-base, .fcls--2-base-child  > *
{ display: flex !important; flex-wrap: wrap !important;  justify-content: center; flex: 0 0 100% !important; }   

.fcls--6, .fcls--6-child > *,
.fcls--5, .fcls--5-child > *,
.fcls--4, .fcls--4-child > *,
.fcls--3, .fcls--3-child > *,
.fcls--2, .fcls--2-child > *
{ margin: 0 !important; gap: 0; }

.fcls--6-rim, .fcls--6-rim-child > *,
.fcls--5-rim, .fcls--5-rim-child > *,
.fcls--4-rim, .fcls--4-rim-child > *,
.fcls--3-rim, .fcls--3-rim-child > *,
.fcls--2-rim, .fcls--2-rim-child > *
{ margin: 0 calc( var(--sp-rim) * -0.5 ) !important; gap: var(--sp-rim); }

.fcls--6-base, .fcls--6-base-child  > *,
.fcls--5-base, .fcls--5-base-child  > *,
.fcls--4-base, .fcls--4-base-child  > *,
.fcls--3-base, .fcls--3-base-child  > *,
.fcls--2-base, .fcls--2-base-child  > *
{ margin: 0 calc( var(--sp-base) * -0.5 ) !important; gap: var(--sp-base); }


    @media screen and (min-width: 759px) {

        .fcls--6 > *, .fcls--6-child > * > * {  flex: 0 0 16.666666% !important; }
        .fcls--5 > *, .fcls--5-child > * > * {  flex: 0 0 20% !important; }
        .fcls--4 > *, .fcls--4-child > * > * {  flex: 0 0 25% !important; }
        .fcls--3 > *, .fcls--3-child > * > * {  flex: 0 0 33.333333% !important; }
        .fcls--2 > *, .fcls--2-child > * > * {  flex: 0 0 50% !important; }

        .fcls--6-rim > *, .fcls--6-rim-child > * > * {  flex: 0 0 calc(16.666666% - var(--sp-rim) ) !important; }
        .fcls--5-rim > *, .fcls--5-rim-child > * > * {  flex: 0 0 calc(20% - var(--sp-rim) ) !important; }
        .fcls--4-rim > *, .fcls--4-rim-child > * > * {  flex: 0 0 calc(25% - var(--sp-rim) ) !important; }
        .fcls--3-rim > *, .fcls--3-rim-child > * > * {  flex: 0 0 calc(33.333333% - var(--sp-rim) ) !important; }
        .fcls--2-rim > *, .fcls--2-rim-child > * > * {  flex: 0 0 calc(50% - var(--sp-rim) ) !important; }

        .fcls--6-base > *, .fcls--6-base-child > * > * {  flex: 0 0 calc(16.666666% - var(--sp-base) ) !important; }
        .fcls--5-base > *, .fcls--5-base-child > * > * {  flex: 0 0 calc(20% - var(--sp-base) ) !important; }
        .fcls--4-base > *, .fcls--4-base-child > * > * {  flex: 0 0 calc(25% - var(--sp-base) ) !important; }
        .fcls--3-base > *, .fcls--3-base-child > * > * {  flex: 0 0 calc(33.333333% - var(--sp-base) ) !important; }
        .fcls--2-base > *, .fcls--2-base-child > * > * {  flex: 0 0 calc(50% - var(--sp-base) ) !important; }

    }

6 Columns

.fcls--6
.fcls--6-child
.fcls--6-rim
.fcls--6-rim-child
.fcls--6-base
.fcls--6-base-child

5 Columns

.fcls--5
.fcls--5-child
.fcls--5-rim
.fcls--5-rim-child
.fcls--5-base
.fcls--5-base-child

4 Columns

.fcls--4
.fcls--4-child
.fcls--4-rim
.fcls--4-rim-child
.fcls--4-base
.fcls--4-base-child

3 Columns

.fcls--3
.fcls--3-child
.fcls--3-rim
.fcls--3-rim-child
.fcls--3-base
.fcls--3-base-child

2 Columns

.fcls--2
.fcls--2-child
.fcls--2-rim
.fcls--2-rim-child
.fcls--2-base
.fcls--2-base-child

Gap Helpers for CSS Gird & CSS Flexbox

/*---------------------------------------------------------------------------
Gap Helpers for CSS Gird & CSS Flexbox FRAMEWORK 2024-07-18
---------------------------------------------------------------------------*/
.grid-gap-rim,  .grid-gap-rim-child  > *   { gap: var(--sp-rim) !important; }
.grid-gap,      .grid-gap-child      > *   { gap: var(--sp-base) !important; } 
.grid-gap-feat, .grid-gap-feat-child > *   { gap: var(--sp-feat) !important; }

.row-gap-rim,  .row-gap-rim-child  > *   { row-gap: var(--sp-rim) !important; }
.row-gap,      .row-gap-child      > *   { row-gap: var(--sp-base) !important; } 
.row-gap-feat, .row-gap-feat-child > *   { row-gap: var(--sp-feat) !important; }

.col-gap-rim,  .col-gap-rim-child  > *   { column-gap: var(--sp-rim) !important; }
.col-gap,      .col-gap-child      > *   { column-gap: var(--sp-base) !important; } 
.col-gap-feat, .col-gap-feat-child > *   { column-gap: var(--sp-feat) !important; }

Gap Base

.grid-gap
.grid-gap-child

Gap Rim

.grid-gap-rim
.grid-gap-rim-child

Gap Feat

.grid-gap-feat
.grid-gap-feat-child

Column Or Row Specific Gap

Independent styling

Row Gap

.row-gap
.row-gap-child 
.row-gap-rim
.row-gap-rim-child 
.row-gap-feat
.row-gap--feat-child

Column Gap

.col-gap
.col-gap-child 
.col-gap-rim
.col-gap-rim-child 
.col-gap-feat
.col-gap--feat-child