kjbrum / juice Goto Github PK

View Code? Open in Web Editor NEW

274.0 14.0 40.0 1.1 MB

Mixins for Life

Home Page: http://kylebrumm.com/juice

License: MIT License

CSS 77.59% JavaScript 12.77% HTML 9.64%

mixins css breakpoint-mixin juice sass sass-mixins scss scss-mixins sass-library scss-library

juice's Introduction

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.

Documentation

http://kylebrumm.com/juice

Requirements:

Sass Version 3.3

Features:

Mixins

Breakpoints
Show/Hide Element
Single Side Border Radius
Single Transform
Box Emboss
Letterpress
Placeholder Color
Sizing
Hoverer
Responsive
Triangle
Circle
Square
Position
TRBL
Image Preload
Juice Prefixer

Helpers

Clearfix
Hide Text
Centerer
Vertical Centerer
Coverer
Center Block
Clean

Functions

Tint
Shade
Strip Units
Rem Calc
Em Calc
Random Color
Reverse String

Installation

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

Bower

$ bower install juice

Clone/Fork

$ git clone [email protected]:kjbrum/juice.git

Using the file

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

@import "juice";

Compatibility Issues / Conflicts:

Bourbon

Position (mixin)
Single Side Border Radius (mixin)
Triangle (mixin)
Strip Units (function)

Compass

Single Side Border Radius (mixin)
Transforms (mixin)

Changelog:

1.0.1:

Fix box-emboss with prefixes issue

1.0.0:

Placeholders have been turned into argument-less mixins (helpers)
New mixins - Image Preload, show/hide, juice prefixer, clean
Global option (variable) to add cross browser prefixes
Added a few extra breakpoint presets (mostly -only options)
Fixed the breakpoint mixin so that the more complex queries actually work now

To-Do

Change the way mixins that take multiple values (trbl, size, etc..) are structured. (Make it so they don't require commas)

License

juice's People

Stargazers

Watchers

juice's Issues

Getting deprecation warnings on compile

Just a heads up.

DEPRECATION WARNING on line 81, column 10 of src/style/_juice.scss:
Unescaped multiline strings are deprecated and will be removed in a future version of Sass.
To include a newline in a string, use "\a" or "\a " as in CSS.
[18:21:07] gulp-ruby-sass stderr: DEPRECATION WARNING on line 84, column 72 of src/style/_juice.scss:
Unescaped multiline strings are deprecated and will be removed in a future version of Sass.
To include a newline in a string, use "\a" or "\a " as in CSS.
[18:21:07] gulp-ruby-sass stderr: DEPRECATION WARNING on line 85, column 71 of src/style/_juice.scss:
Unescaped multiline strings are deprecated and will be removed in a future version of Sass.
To include a newline in a string, use "\a" or "\a " as in CSS.

Anyways, by removing the new lines on line 81, it solved the warnings.

Create a Less version

Box-Emboss doesn't work

The Box-Emboss mixin doesn't work..

I've tried with the example provided on the website
The compiled CSS looks like this:

  box-shadow: rgba(white,$opacity) 0 1px 0, inset rgba(black,$opacity2) 0 1px 0;

And the SCSS like this:

  @include box-emboss(0.5, 0.75);

Option to @declude

Hi, juice is almost perfect.

Option to declude prev included mixin/function using for ex. breakpoints would be really nice.

I mean to do sth like that:

.foo {
@include size(60px);
@include bp(medium) {
@declude size()}
}

And on medium screens .foo will be without size.

Add full-bg

@mixin full-bg($size: 'cover', $position: 'center center', $repeat: 'no-repeat') {
    background-size: #{$size};
    background-repeat: #{$repeat};
    background-position: #{$position};
}

Add box-fade

@mixin box-fade($side: both, $color: #000000, $size: 100px) {
    position: relative;
    z-index: -1;

    $selector: '&:before, &:after';
    $top: 0;
    @if $side == top {
        $selector: '&:before';
    } @else if $side == bottom {
        $selector: '&:after';
        $top: 100%;
    }

    #{$selector} {
        content: '';
        position: absolute;
        top: $top;
        left: 0;
        width: 100%;
        height: 0;
        box-shadow: 0 0 $size $size*0.75 #{$color};
    }

    @if $side == both {
        &:after {
            top: 100%;
        }
    }
}

What version of Sass is required?

I'm running 3.2.19 and it's causing errors.

Invalid CSS after " "xxlarge"": expected ")", was ":(min-width: 12..."...

Cannot find module 'imagemin-gifsicle'

how can i resolve this problem ?

conflict with bootstrap sass

I have this imports in my scss file:

@import 'susy/susy';
@import 'juice/dist/juice';
@import 'breakpoint/breakpoint';
@import "bootstrap/bootstrap-sprockets";
@import "bootstrap/bootstrap";

and i get this error:

Error: Mixin size is missing argument $height.

for example:

div {
  @include coverer;
}

when i comment the last line its working fine.

Documentation http://juicynex.us/juice is 404

Invalid CSS

$ compass watch
 >>> Change detected at 23:22:25 to: responsive.custom.scss
    error sass/responsive.custom.scss (Line 149 of sass/juice/dist/_juice.scss: Invalid CSS after " "xxlarge"": expected ")", was ":    "(min-width: ...")
overwrite css/responsive.custom.css

$ compass --version
Compass 0.12.4 (Alnilam)
$ sass --version
Sass 3.4.12 (Selective Steve)

What does it mean?