Skip to content

skt-t1-byungi/thejungle

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

97 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

thejungle

scss utility collection

bengi

npm npm

Why is the name thejungle?

bengi

Install

npm install thejungle
@use 'thejungle' as tj;

API

functions

strip-unit(number)

@debug tj.strip-unit(3em); // => 3

@debug tj.strip-unit(4pt); // => 4

em(value, base=16px)

@debug tj.em(12px); // => 0.75em

@debug tj.em(12px, 12px); // => 1em
Override default base
@use 'thejungle' as tj with (
    $default-base-size: 12px
)

@debug tj.em(12px); // => 1em

rem(value, base?)

@debug tj.rem(12px); // => 0.75.rem

@debug tj.rem(12px, 12px); // => 1rem
Override default base
@use 'thejungle' as tj with (
    $default-base-size: 12px
)

@debug tj.rem(12px); // => 1em

between(from-value, to-value, from-screen=320px, to-screen=1200px)

Returns a formula that satisfies values ​​at each screen.

@debug tj.between(10px, 100px, 400px, 1000px); // => calc(15vw - 50px);
Override default screen size
@use 'thejungle' as tj with (
    $default-from-screen: 400px,
    $default-to-screen: 1800px
)

@debug tj.between(10px, 100px); // => tj.between(10px, 100px, 400px, 1800px);

pos-shorthand(args, default?)

@function fn1($args...) {
    @debug tj.pos-shorthand($args);
}
@function fn2($args...) {
    @debug tj.pos-shorthand($args, (top: 10px, left: 10px));
}

// unnamed arguments
fn1(1px); // => Map(top: 1px; right: 1px; bottom: 1px; left:1px)
fn1(1px, 2px); // => Map(top: 1px; right: 2px; bottom: 1px; left:2px)
fn1(1px, 2px, 3px); // => Map(top: 1px; right: 2px; bottom: 3px; left:2px)
fn1(1px, 2px, 3px, 4px); // => Map(top: 1px; right: 2px; bottom: 3px; left:4px)

// named arguments
fn1($top: 5px); // => Map(top: 5px;)
fn2($top: 5px); // => Map(top: 5px; left:10px)

// empty arguments
fn1(); // => Map()
fn2(); // => Map(top: 10px, left: 10px;)
Override default position
@use 'thejungle' as tj with (
    $default-pos-shorthand: (top: 30px; left: 100px)
)

mixins

size(width, height=width)

@include tj.size(50px); // => width: 50px; height: 50px;

@include tj.size(50px, 100px); // => width: 50px; height: 100px;

text-hide()

source
@include tj.text-hide();
output
overflow: hidden;
text-indent: -9999px;

ellipsis(max-width)

source
@include tj.ellipsis(100px);
output
max-width: 100px;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

clearfix

source
.a {
    @include tj.clearfix;
}
output
.a::after {
    content: '';
    display: block;
    clear: both;
}

stretch(top=0, right=top, bottom=top, left=top)

source
@include tj.stretch;
output
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
Support shorthand.
@include tj.stretch(10px);
// => top: 10px; right: 10px; bottom: 10px; left: 10px;

@include tj.stretch(10px, 50px);
// => top: 10px; right: 50px; bottom: 10px; left: 50px;

@include tj.stretch(10px, 50px, 100px);
// => top: 10px; right: 50px; bottom: 100px; left: 50px;

@include tj.stretch(10px, 50px, 100px, 200px);
// => top: 10px; right: 50px; bottom: 100px; left: 200px;

triangle(direction, color, width , height=width/2)

direction
  • top
  • right
  • bottom
  • left
  • top-left
  • top-right
  • bottom-left
  • bottom-right
source
@include tj.triangle(top, #000, 30px);
output
border-style: solid;
height: 0;
width: 0;
border-color: transparent transparent #000 transparent;
border-width: 0 15px 15px 15px;

column(count, gap, fix=0)

source
.column {
    @include tj.column(4, 10px);
}
output
.column {
    width: calc(25% - 7.5px);
}
.column:not(:nth-child(4n)) {
    margin-right: 10px;
}

animate(options)

source
.a {
    @include tj.animate(1s infinite) {
        from{ width: 0 }
        to{ width: 100% }
    }
}
output
.a {
    animation: __ANIMATE__u0bd4b920 1s infinite; /* πŸ‘ˆ "__ANIMATE__u0bd4b920" is unique. */
}

@keyframes __ANIMATE__u0bd4b920 {
    from{ width: 0 }
    to{ width: 100% }
}

scoped-default(base-size?, dir-shorthand?, from-screen?, to-screen?)

Override the default values for mixin contents.

@debug tj.em(16px); // => 1em

@include tj.scoped-default($base-size: 32px) {
    @debug tj.em(16px); // => 0.5em

    @include tj.scoped-default($base-size: 8px) {
        @debug tj.em(16px); // => 2em
    }

    @debug tj.em(16px); // => 0.5em
}

License

MIT