A collection of dynamically generated overflow utility classes.

Class names follow the Emmet abbreviation syntax, with colons (':') replaced by two dashes (--) to follow BEM naming conventions. E.g., the overflow: hidden utility class name is .u-ov--h.

Available classes

• .u-ov--v (overflow: visible)
• .u-ov--h (overflow: hidden)
• .u-ov--s (overflow: scroll)
• .u-ov--a (overflow: auto)

• .u-ovx--v (overflow-x: visible)
• .u-ovx--h (overflow-x: hidden)
• .u-ovx--s (overflow-x: scroll)
• .u-ovx--a (overflow-x: auto)

• .u-ovy--v (overflow-y: visible)
• .u-ovy--h (overflow-y: hidden)
• .u-ovy--s (overflow-y: scroll)
• .u-ovy--a (overflow-y: auto)

• .u-tov--c (text-overflow: clamp)
• .u-tov--e (text-overflow: ellipsis)

Installation

Using npm:

npm i -S jigsass-utils-overflow

Usage

Import JigSass Utils Overflow into your main scss file near its very end, together with all other utilities (utilities should always be the last to be imported).

@import 'path/to/jigsass-utils-overflow/scss/index';

Like all other JigSass Utils, JigSass Overfolow does not automatically generate any CSS when imported. You would need to explicitly indicate that each individual overflow class should actually be generated in each component or object it is used in (clarification: This will include style declarations inside .foo and .bar):

// _c.foo.scss
.foo {
  @include jigsass-util(u-ov, $modifier: h); // <-- overfolow: hidden

  ...
}

// _c.bar.scss
.bar {
  @include jigsass-util(u-ovx, $modifier: h);  // <-- overflow-x: hidden
  @include jigsass-util(u-ovx, $modifier: s, $from: large); // <-- overflow-x: scroll from large bp and on.

  ...
}

Doing so helps us a great deal with portability, as no matter where we import component or object partials, the correct utility classes will be generated. Think of it as a poor man's dependency management.

Developer communication is also assisted by including "dependencies" wherever they are required, as anyone going through a partial, can easily understand how it should be marked up with just a glance.

As far as bloat goes, just don't worry about it - the actual styles will only be generated once, at the location in the cascade where the Jigsass Overflow partial was imported into the main file.

JigSass Overflow classes are responsive-enabled, using JigSass MQ and the breakpoints defined in the $jigsass-breakpoints variable.

Based on the breakpoint arguments passed to jigsass-util when including a overflow class, responsive modifiers are generated according to the following logic:

.u-ov--<modifier>[-[-from-<breakpoint-name>][-until-<breakpoint-name>][-misc-<breakpoint-name>]]
.u-ovx--<modifier>[-[-from-<breakpoint-name>][-until-<breakpoint-name>][-misc-<breakpoint-name>]]
.u-ovy--<modifier>[-[-from-<breakpoint-name>][-until-<breakpoint-name>][-misc-<breakpoint-name>]]
.u-tov--<modifier>[-[-from-<breakpoint-name>][-until-<breakpoint-name>][-misc-<breakpoint-name>]]

So, assuming the medium, large and landscape breakpoints are defined in $jigsass-breakpoints as 600px, 1024px and (orientation: landscape) respectively,

@include jigsass-util(u-ov, $modifier: h);

will generate the .u-ov--h class, which is not limited to any media-query.

@include jigsass-util(u-ov, $modifier: h, $until: medium);

will generate the .u-ov--h--until-medium class, which will be in effect at (max-width: 37.49em) and will override styles in the default class until that point.

@include jigsass-util(u-ov, $modifier: h, $from: large, $misc: landscape);

will generate the .u-ov--h--from-large-when-landscape class, which will go into effect at (min-width: 64em) and (orientation: landscape) and will override styles in the default class under these conditions.

License: MIT

.u-ov--a

A utility class for setting an element's overflow to auto.

Include with:

@include jigsass-util(u-ov, $modifier: a [, $from, $until, $misc]);

Example

<p class='fpo   u-ov--a'>
  This element's overflow is set to auto.
  Lorem ipsum dolor sit amet, nam cu clita persius eruditi, qui ei explicari persecuti. Ut vim nominavi quaestio rationibus, sed graeci labore utroque at, agam lucilius perpetua quo et. Te vis modus volumus menandri, doctus pericula at eos, autem omittantur ius ut. Ea quo tantas graece mandamus. In nibh iriure molestie pri, te eam quot consul quaerendum, ius ea justo neglegentur
</p>

.u-ov--h

A utility class for setting an element's overflow to hidden.

Include with:

@include jigsass-util(u-ov, $modifier: h [, $from, $until, $misc]);

Example

<p class='fpo   u-ov--h'>
  This element's overflow is set to hidden.
  Lorem ipsum dolor sit amet, nam cu clita persius eruditi, qui ei explicari persecuti. Ut vim nominavi quaestio rationibus, sed graeci labore utroque at, agam lucilius perpetua quo et. Te vis modus volumus menandri, doctus pericula at eos, autem omittantur ius ut. Ea quo tantas graece mandamus. In nibh iriure molestie pri, te eam quot consul quaerendum, ius ea justo neglegentur
</p>

.u-ov--s

A utility class for setting an element's overflow to scroll.

Include with:

@include jigsass-util(u-ov, $modifier: s [, $from, $until, $misc]);

Example

<p class='fpo   u-ov--s'>
  This element's overflow is set to scroll.
  Lorem ipsum dolor sit amet, nam cu clita persius eruditi, qui ei explicari persecuti. Ut vim nominavi quaestio rationibus, sed graeci labore utroque at, agam lucilius perpetua quo et. Te vis modus volumus menandri, doctus pericula at eos, autem omittantur ius ut. Ea quo tantas graece mandamus. In nibh iriure molestie pri, te eam quot consul quaerendum, ius ea justo neglegentur
</p>

.u-ov--v

A utility class for setting an element's overflow to visible.

Include with:

@include jigsass-util(u-ov, $modifier: v [, $from, $until, $misc]);

Example

<p class='fpo   u-ov--v'>
  This element's overflow is set to visible.
  Lorem ipsum dolor sit amet, nam cu clita persius eruditi, qui ei explicari persecuti. Ut vim nominavi quaestio rationibus, sed graeci labore utroque at, agam lucilius perpetua quo et. Te vis modus volumus menandri, doctus pericula at eos, autem omittantur ius ut. Ea quo tantas graece mandamus. In nibh iriure molestie pri, te eam quot consul quaerendum, ius ea justo neglegentur
</p>

.u-ovx--a

A utility class for setting an element's overflow-x to auto.

Include with:

@include jigsass-util(u-ovx, $modifier: a [, $from, $until, $misc]);

Example

<p class='fpo  fpo--x u-ovx--a'>
  This element's overflow-x is set to auto.
  Lorem ipsum dolor sit amet, nam cu clita persius eruditi, qui ei explicari persecuti. Ut vim nominavi quaestio rationibus, sed graeci labore utroque at, agam lucilius perpetua quo et. Te vis modus volumus menandri, doctus pericula at eos, autem omittantur ius ut. Ea quo tantas graece mandamus. In nibh iriure molestie pri, te eam quot consul quaerendum, ius ea justo neglegentur
</p>

.u-ovx--h

A utility class for setting an element's overflow-x to hidden.

Include with:

@include jigsass-util(u-ovx, $modifier: h [, $from, $until, $misc]);

Example

<p class='fpo  fpo--x u-ovx--h'>
  This element's overflow-x is set to hidden.
  Lorem ipsum dolor sit amet, nam cu clita persius eruditi, qui ei explicari persecuti. Ut vim nominavi quaestio rationibus, sed graeci labore utroque at, agam lucilius perpetua quo et. Te vis modus volumus menandri, doctus pericula at eos, autem omittantur ius ut. Ea quo tantas graece mandamus. In nibh iriure molestie pri, te eam quot consul quaerendum, ius ea justo neglegentur
</p>

.u-ovx--s

A utility class for setting an element's overflow-x to scroll.

Include with:

@include jigsass-util(u-ovx, $modifier: s [, $from, $until, $misc]);

Example

<p class='fpo  fpo--x u-ovx--s'>
  This element's overflow-x is set to scroll.
  Lorem ipsum dolor sit amet, nam cu clita persius eruditi, qui ei explicari persecuti. Ut vim nominavi quaestio rationibus, sed graeci labore utroque at, agam lucilius perpetua quo et. Te vis modus volumus menandri, doctus pericula at eos, autem omittantur ius ut. Ea quo tantas graece mandamus. In nibh iriure molestie pri, te eam quot consul quaerendum, ius ea justo neglegentur
</p>

.u-ovx--v

A utility class for setting an element's overflow-x to visible.

Include with:

@include jigsass-util(u-ovx, $modifier: v [, $from, $until, $misc]);

Example

<p class='fpo  fpo--x u-ovx--v'>
  This element's overflow-x is set to visible.
  Lorem ipsum dolor sit amet, nam cu clita persius eruditi, qui ei explicari persecuti. Ut vim nominavi quaestio rationibus, sed graeci labore utroque at, agam lucilius perpetua quo et. Te vis modus volumus menandri, doctus pericula at eos, autem omittantur ius ut. Ea quo tantas graece mandamus. In nibh iriure molestie pri, te eam quot consul quaerendum, ius ea justo neglegentur
</p>

.u-ovy--a

A utility class for setting an element's overflow-y to auto.

Include with:

@include jigsass-util(u-ovy, $modifier: a [, $from, $until, $misc]);

Example

<p class='fpo   u-ovy--a'>
  This element's overflow-y is set to auto.
  Lorem ipsum dolor sit amet, nam cu clita persius eruditi, qui ei explicari persecuti. Ut vim nominavi quaestio rationibus, sed graeci labore utroque at, agam lucilius perpetua quo et. Te vis modus volumus menandri, doctus pericula at eos, autem omittantur ius ut. Ea quo tantas graece mandamus. In nibh iriure molestie pri, te eam quot consul quaerendum, ius ea justo neglegentur
</p>

.u-ovy--h

A utility class for setting an element's overflow-y to hidden.

Include with:

@include jigsass-util(u-ovy, $modifier: h [, $from, $until, $misc]);

Example

<p class='fpo   u-ovy--h'>
  This element's overflow-y is set to hidden.
  Lorem ipsum dolor sit amet, nam cu clita persius eruditi, qui ei explicari persecuti. Ut vim nominavi quaestio rationibus, sed graeci labore utroque at, agam lucilius perpetua quo et. Te vis modus volumus menandri, doctus pericula at eos, autem omittantur ius ut. Ea quo tantas graece mandamus. In nibh iriure molestie pri, te eam quot consul quaerendum, ius ea justo neglegentur
</p>

.u-ovy--s

A utility class for setting an element's overflow-y to scroll.

Include with:

@include jigsass-util(u-ovy, $modifier: s [, $from, $until, $misc]);

Example

<p class='fpo   u-ovy--s'>
  This element's overflow-y is set to scroll.
  Lorem ipsum dolor sit amet, nam cu clita persius eruditi, qui ei explicari persecuti. Ut vim nominavi quaestio rationibus, sed graeci labore utroque at, agam lucilius perpetua quo et. Te vis modus volumus menandri, doctus pericula at eos, autem omittantur ius ut. Ea quo tantas graece mandamus. In nibh iriure molestie pri, te eam quot consul quaerendum, ius ea justo neglegentur
</p>

.u-ovy--v

A utility class for setting an element's overflow-y to visible.

Include with:

@include jigsass-util(u-ovy, $modifier: v [, $from, $until, $misc]);

Example

<p class='fpo   u-ovy--v'>
  This element's overflow-y is set to visible.
  Lorem ipsum dolor sit amet, nam cu clita persius eruditi, qui ei explicari persecuti. Ut vim nominavi quaestio rationibus, sed graeci labore utroque at, agam lucilius perpetua quo et. Te vis modus volumus menandri, doctus pericula at eos, autem omittantur ius ut. Ea quo tantas graece mandamus. In nibh iriure molestie pri, te eam quot consul quaerendum, ius ea justo neglegentur
</p>

.u-tov--c

A utility class for setting an element's text-overflow to clip.

Include with:

@include jigsass-util(u-tov, $modifier: c [, $from, $until, $misc]);

Example

<p class='fpo u-ov--h fpo--x  u-tov--c'>
  This element's text-overflow is set to clip.
  Lorem ipsum dolor sit amet, nam cu clita persius eruditi, qui ei explicari persecuti. Ut vim nominavi quaestio rationibus, sed graeci labore utroque at, agam lucilius perpetua quo et. Te vis modus volumus menandri, doctus pericula at eos, autem omittantur ius ut. Ea quo tantas graece mandamus. In nibh iriure molestie pri, te eam quot consul quaerendum, ius ea justo neglegentur
</p>

.u-tov--e

A utility class for setting an element's text-overflow to ellipsis.

Include with:

@include jigsass-util(u-tov, $modifier: e [, $from, $until, $misc]);

Example

<p class='fpo u-ov--h fpo--x  u-tov--e'>
  This element's text-overflow is set to ellipsis.
  Lorem ipsum dolor sit amet, nam cu clita persius eruditi, qui ei explicari persecuti. Ut vim nominavi quaestio rationibus, sed graeci labore utroque at, agam lucilius perpetua quo et. Te vis modus volumus menandri, doctus pericula at eos, autem omittantur ius ut. Ea quo tantas graece mandamus. In nibh iriure molestie pri, te eam quot consul quaerendum, ius ea justo neglegentur
</p>