Adding helpers for positioning

[notjb]

What about having helpers for positioning ? Draft.scss ⬇️

/*============================================================================*\
  Position helpers
\*============================================================================*/

/** @type {Boolean} Do we need classes? */
$has-classes: false !default;

/*============================================================================*\
  Relative
\*============================================================================*/

@if $has-classes {
  .relative {
    position: relative;
  }

  @include for-each-breakpoints using ($breakpoint) {
    .relative--#{$breakpoint} {
      position: relative;
    }
  }
}

/*============================================================================*\
  Absolute
\*============================================================================*/

@if $has-classes {
  .absolute {
    position: absolute;
  }

  @include for-each-breakpoints using ($breakpoint) {
    .absolute--#{$breakpoint} {
      position: absolute;
    }
  }
}

/*============================================================================*\
  Initial
\*============================================================================*/

@if $has-classes {
  .static {
    position: static;
  }

  @include for-each-breakpoints using ($breakpoint) {
    .static--#{$breakpoint} {
      position: static;
    }
  }
}

/*============================================================================*\
  Fixed
\*============================================================================*/

@if $has-classes {
  .fixed {
    position: fixed;
  }

  @include for-each-breakpoints using ($breakpoint) {
    .fixed--#{$breakpoint} {
      position: fixed;
    }
  }
}

/*============================================================================*\
  Fixed
\*============================================================================*/

@if $has-classes {
  .sticky {
    position: sticky;
  }

  @include for-each-breakpoints using ($breakpoint) {
    .sticky--#{$breakpoint} {
      position: sticky;
    }
  }
}

[titouanmathis]

Thanks for the proposal! 👍

Actually, we already have helpers for position generating the following classes by default :

• .position-absolute
• .position-relative
• .position-static

And you can add more by setting the $positions variable in your configuration :

$positions: (sticky, static, relative, absolute);

See src/framework/_positions.scss for more details.

There is an open issue (#28) to complete the documentation with the missing elements such as these helpers, your help is more than welcome! 😉