Jiffy

Collection of SCSS mixins for efficient front end development. Requires Dart SASS.

Examples

No Margin Overflow

Sets the first child to have no top margin and the last child to have no bottom margin. Has deep (default: false) option, important option (default: true), top option (default: null) and bottom option (default: null). The top and bottom parameters can be set to false to disable overflow on that side. Additionally, a string can be passed that will be appended to the selector.

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

.child {
  margin: 20px 0;
}

.parent {
  @include jiffy-no-margin-overflow();
}

.parent-with-selector {
  @include jiffy-no-margin-overflow(false, true, ":not(.child)");
}

Aspect Ratio

Scale element at an specific aspect ratio. Has width (required), height (required), and child option (default: true). The child option will have any immediate children fill the parent div.

<div class="parent">
    <div class="child">Test</div>
</div>

.parent {
  @include jiffy-aspect-ratio(320, 200);
}

Columns

Create flexbox columns with gutters.

<div class="row">
    <div class="column">a</div>
    <div class="column">b</div>
    <div class="column">c</div>
    <div class="column">d</div>
</div>

.row {
    @include jiffy-columns(2, 10px);
}

Clear

For an element to self-clear it's children. https://css-tricks.com/snippets/css/clear-fix/

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>

.child {
  float: left;
  width: 50%;
}

.parent {
  @include jiffy-clear();
}

Fill

Fill element based on parent dimensions.

<div>
    <span></span>
</div>

span {
  @include jiffy-fill();
}

Before, After, and Pseudo

Quickly create pseudo elements. Psuedo mixin creates applies styles to before and after.

<div></div>

div {
  @include jiffy-before() {
    color: red;
  }
}

Psuedo Hover

Create hover states with psuedo elements. Has hideBefore (default: false) to hide default state when hover state is active.

<div></div>

div {
  @include jiffy-psuedo-hover() {
    width: 50px;
    height: 50px;
    position: relative;
    
    &::before {
      background-color: red;
    }
    
    &::after {
      background-color: blue;
      transition: opacity 300ms;
    }
  }
}

Border box

Sets box-sizing to border-box for page.

@include jiffy-border-box();

Font smoothing

Sets font smoothing to recommended values.

html {
  @include jiffy-font-smoothing();
}

Disable animations

Disable CSS animations and transitions based on user preferences.

html {
  @include jiffy-disable-animations();
}

Visually Hidden

Hide element from display, but allow screen readers access.

.visually-hidden {
    @include jiffy-visually-hidden();
}