Juice

Mixins for Life

Simplify your life. Juice is a collection of Sass mixins/functions that are used to minimize the work needed to apply styling/properties to elements. Juice is not just a collection to help with cross browser support, so it is best paired with autoprefixer, for the best possible browser compatibility. You can enable prefixing for the mixin if you would like by setting the $browser-prefixes variable to true.

Overview

Mixins

Breakpoints

An extensive mixin for easily changing styles for specific media queries. You can set the default breakpoints using the breakpoint variables.

Available preset values: xxlarge, xlarge-only, xlarge-up, xlarge, large-only, large-up, large, medium-only, medium-up, medium, small-only, small-up, small, xsmall-only, xsmall-up, xsmall, xxsmall, iphone3, iphone3-landscape, iphone3-portrait, iphone4, iphone4-landscape, iphone4-portrait, iphone5, iphone5-landscape, iphone5-portrait, iphone6, iphone6-landscape, iphone6-portrait, iphone6-plus, iphone6-plus-landscape, iphone6-plus-portrait, ipad, ipad-landscape, ipad-portrait, ipad-retina, ipad-retina-landscape, ipad-retina-portrait, hdpi.

Use preset values: @include bp(preset)
Set a max-width: @include bp(max,500px)
Set a min-width: @include bp(min,250px)
Set a min & max width: @include bp(500px,1000px)

Example:

.element {
  @include bp(480px,1024px) {
    color: black;
  }
}

CSS Output:

@media screen and (min-width: 480px) and (max-width: 1024px) {
  .element {
    color: black;
  }
}

Show/Hide Element

Set certain points at which you want to show or hide a block element.

Show Arguments: $breakpoint, $display

Hide Argument: $breakpoint

Available options to show/hide: Breakpoint preset values.

Example:

.element {
  @include show(small-only, inline-block);
}

CSS Output:

.element {
  display: none;
}
@media only screen and (min-width: 30.0625em) and (max-width: 40em) {
  .element {
    display: inline-block;
  }
}

Single Side Border Radius

Apply border radius to a single side of an element.

Argument: $border-radius

Example:

.element {
  @include border-top-radius(5px);
}

CSS Output:

.element {
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

Single Transform

Small shortcut mixins to apply a single transform property.

Available mixins: rotate, rotateX, rotateY, rotateZ, rotate3d, scale, scaleX, scaleY, scaleZ, scale3d, skew, skewX, skewY, translate, translateX, translateY, translateZ, translate3d.

Example:

.element {
  @include rotate(45deg);
}

CSS Output:

.element {
  transform: rotate(45deg);
}

Box Emboss

Apply an emboss effect to an element.

Arguments (decimal): $opacity, $opacity2

Example:

.element {
  @include box-emboss(0.4,0.6);
}

CSS Output:

.element {
  box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(0, 0, 0, 0.8) 0 1px 0;
}

Letterpress

Apply a letterpress effect to an element's text.

Argument (decimal): $opacity

Example:

.element {
  @include letterpress(0.75);
}

CSS Output:

.element {
  text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
}

Placeholder Color

Set the color of an element's placeholder text.

Optional Argument: $color

Example:

input {
  @include placeholder-color(#222222);
}

CSS Output:

input::placeholder {
  color: #222222;
}

Sizing

Set an element's width and height. Also able to pass a single value for a square.

Set width and height: @include size(50px, 25px)
Create a square (Option 1): @include size(25px)

Example:

.element {
  @include size(25px,100px);
  &:after {
    @include size(10px);
  }
}

CSS Output:

.element {
  width: 25px;
  height: 100px;
}
.element:after {
  width: 10px;
  height: 10px;
}

Hoverer

Set the value of a property for it's normal and hover states.

Arguments: $property, $normal, $hovered

Example:

.element {
  @include hoverer(color, #555555, #222222);
}

CSS Output:

.element {
  color: #555555;
}
.element:hover {
  color: #222222;
}

Responsive

Set the values for a specific property at 3 different breakpoints.

Arguments: $property, $base, $medium (optional), $small (optional)

Example:

.element {
  @include responsive(background-color, #FFFFFF, #DDDDDD, #BBBBBB);
}

CSS Output:

.element {
  background-color: #FFFFFF;
}
@media only screen and (max-width: 64rem) {
  .element {
    background-color: #DDDDDD;
  }
}
@media only screen and (max-width: 40rem) {
  .element {
    background-color: #BBBBBB;
  }
}

Triangle

Create a psuedo element triangle.

Optional Arguments: $direction, $size, $color, $center, $element

Available directions: up, up-right, right, down-right, down, down-left, left, up-left

Example:

.element {
  @include triangle(up-right, 50px, grey, true, before) {
    background-color: red;
  }
}

CSS Output:

.element:before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 50px 0;
  border-color: transparent grey transparent transparent;
  position: absolute;
  top: 0;
  right: 0;
  background-color: red;
}

Circle

Create a circle, with an optional border.

Optional Arguments: $size, $color, $border-width, $border-color, $display

Example:

.element {
  @include circle(40px, red, 5px);
}

CSS Output:

.element {
  display: inline-block;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background-color: red;
  border: 5px solid #222222;
}

Square

Create a psuedo element square, with an optional border.

Optional Arguments: $size, $color, $border-width, $border-color, $element

Example:

.element {
  @include square(25px, blue, 2px, teal);
}

CSS Output:

.element:after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  background: blue;
  border: 2px solid teal;
}

Position

Easily set an element's position and "trbl" values.

Arguments: $type, $top, $right, $bottom, $left

The long way: @include position(relative, 5px, 5px, 10px, 15px)
Set absolute: @include absolute(10px, 25px, null, 50px)
Set relative: @include relative(10px, 35px)
Set fixed: @include fixed(null, null, 20px, 20px)

Note: Pass null as the value if you don't want a "trbl" property to be set.

Example:

.element {
  @include position(absolute,null,null,10px,15px);
}
.absolute-element {
  @include absolute(null,25px,25px);
}
.relative-element {
  @include relative(15px);
}
.fixed-element {
  @include fixed(10px,50px);
}

CSS Output:

.element {
  position: absolute;
  bottom: 10px;
  left: 15px;
}
.absolute-element {
  position: absolute;
  right: 25px;
  bottom: 25px;
}
.relative-element {
  position: relative;
  top: 15px;
}
.fixed-element {
  position: fixed;
  top: 10px;
  right: 50px;
}

TRBL

Easily set an element's "trbl" values.

Arguments: $top, $right, $bottom, $left

Extra Mixins: top-left, top-right, bottom-left, bottom-right

Note: Pass null as the value if you don't want a property to be set.

Example:

.element {
  @include trbl(55px,null,null,15px);
}

CSS Output:

.element {
  top: 55px;
  left: 15px;
}

Image Preload

Preload images by setting them to a background-image on the html:after element.

Arguments: Path to image(s)

Note: Call "@include image-preload;" after all images in your stylesheet to load images, any calls after this will be ignored.

Example:

.element1:hover {
  $image1: 'http://placeimg.com/500/350/tech/grayscale';
  background-image: url($image1);
  @include image-preload($image1);
}
.element2:hover {
  $image2: 'http://placeimg.com/500/350/tech';
  background-image: url($image2);
  @include image-preload($image2);
}

@include image-preload;

CSS Output:

.element1:hover {
  background-image: url("http://placeimg.com/500/350/tech");
}
.element2:hover {
  background-image: url("http://placeimg.com/500/350/tech/grayscale");
}

html:after {
  content: '';
  display: none;
  background-image: url(http://placeimg.com/500/350/tech),
          url(http://placeimg.com/500/350/tech/grayscale);
}

Juice Prefixer

Mixin used to add vendor prefixes for cross browser compatibility.

Arguments: $property, $value, $prefixes

Example:

.element {
  @include juice-prefixer(transform, scale(1.5), webkit moz ms o spec);
}

CSS Output:

.element {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
}

Helpers

Clearfix

Just an awesome clearfix.

Example:

.element {
  @include clearfix;
}

CSS Output:

.element {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    line-height: 0;
  }
    &:after {
    clear: both;
  }
}

Hide Text

Hide the text in an element.

Example:

.element {
  @include hide-text;
}

CSS Output:

.element {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
}

Centerer

Center an element vertically and horizontally.

Example:

.element {
  @include centerer;
}

CSS Output:

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

Vertical Centerer

Center an element vertically.

Example:

.element {
  @include vert-centerer;
}

CSS Output:

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Coverer

Force an element to fill the screen or parent element.

Example:

.element {
  @include coverer;
}

CSS Output:

.element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Center Block

Turn an element into a block and center it with margins.

Example:

.element {
  @include center-block;
}

CSS Output:

.element {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Clean

Remove the margin and padding from an element.

Example:

.element {
  @include clean;
}

CSS Output:

.element {
  margin: 0;
  padding: 0;
}

Functions

Tint

Mix a percentage of white with a color.

Arguments: $color, $mix-percent

Example:

.element {
  color: tint(#0000ff,15%);
}

CSS Output:

.element {
  color: #2626ff;
}

Shade

Mix a percentage of black with a color.

Arguments: $color, $mix-percent

Example:

.element {
  color: shade(#0000ff,15%);
}

CSS Output:

.element {
  color: #0000d8;
}

Strip Units

Remove any units from a number.

Example:

.element {
  font-size: strip-units(5px);
}

CSS Output:

.element {
  font-size: 5;
}

Rem Calc

Calculate rems from a px value.

Example:

.element {
  font-size: rem-calc(15px);
}

CSS Output:

.element {
  font-size: 0.9375rem;
}

Em Calc

Calculate ems from a px value.

Example:

.element {
  font-size: em-calc(10px);
}

CSS Output:

.element {
  font-size: 0.625em;
}

Random Color

Generate a random hex or rgb color from rgb values.

Optional Arguments: $min(0-255), $max(0-255), $alpha(0-1)

Example:

.element {
  background-color: random-color(50,150,0.75);
}

CSS Output:

.element {
  background-color: rgba(143, 56, 61, 0.75);
}

Reverse String

Reverse a string.

Example:

.element {
  background-color: reverse(eulb);
}

CSS Output:

.element {
  background-color: blue;
}

Setup

Installation

You can use either bower or just clone the github repo directly.

Bower

$ bower install juice

Clone/Fork

$ git clone git@github.com:kjbrum/juice.git

View on Github Download Repo

Using the file

Just import the "_juice.scss" file into your main scss file.

// In the SCSS file

// Enabling browser prefixing
$browser-prefixes: true !default;

// Import the dist file
@import "juice";

Settings

You can override these variables at the top of your main scss file to change the default values.

// Base px
$base-px-default: 16px !default;
$browser-prefixes: false !default;
// Breakpoints
$hdpi-ratio-default: 1.3 !default;
$breakpoint-xlarge-default: em-calc(1920) !default;
$breakpoint-large-default: em-calc(1440) !default;
$breakpoint-medium-default: em-calc(1024) !default;
$breakpoint-small-default: em-calc(640) !default;
$breakpoint-xsmall-default: em-calc(480) !default;
$breakpoint-xxsmall-default: em-calc(320) !default;
// Show/Hide
$show-display-default: block !default;
/// Border Radius
$border-radius-default: 5px !default;
// Placeholder Color
$placeholder-color-default: #555555 !default;
// Triangle
$triangle-direction-default: right !default;
$triangle-size-default: $base-px-default !default;
$triangle-color-default: #222222 !default;
$triangle-element-default: after !default;
// Circle
$circle-size-default: $base-px-default !default;
$circle-color-default: inherit !default;
$circle-border-width-default: null !default;
$circle-border-color-default: #222222 !default;
$circle-display-default: inline-block !default;
// Square
$square-size-default: $base-px-default !default;
$square-color-default: black !default;
$square-border-width-default: null !default;
$square-border-color-default: grey !default;
$square-element-default: after !default;
// Position
$position-default: null !default;
// Tint/Shade
$mix-percent-default: 15% !default;