README
Sass
A collections of sass functions, mixins and placeholders.
Install
$ npm install --save-dev @chipchap/sass
Usage
Add the top of your main sass file.
@import "@chipchap/sass";
Contents
|Mixins|Functions| |-|-| |1. Breakpoints |1. Map | |2. Media Queries|2. List | |3. Grid |3. String| |4. Font face || |5. Animation ||
Breakpoints
@include breakpoints((
sm: 18rem,
md: 64rem,
lg: 80rem,
xlg: 90rem
));
Media Queries
Mobile first approach - first code for the smallest sizes and the next for the largest sizes.
.demo{
background: blue;
// Use breakpoints keys
@include media(sm) {
background: red;
}
// Use custom value
@include media(20rem) {
background: green;
}
}
Grid
This Mixin is an adaptation from the original Flexbox Grid created by @kristoferjoseph.
@include grid((
prefix: grid-,
columns: 12,
gutter-width: 1rem,
outer-margin: 2rem,
max-width: 1200px
));
Font face
@include font-face('MyFont', 'fonts/MyFont', 500, normal);
Animation
.demo {
animation: .8s cubic-bezier(0.65, 0.05, 0.36, 1) forwards;
@include animation(open) {
from { transform: translateY(0) }
to { transform: translateY(-100%) }
}
}
Animate.css
animate.css
is a bunch of cool, fun, and cross-browser animations by Dan Eden
Usage
Include the entire entrances animations family
@include animations(fading-entrances);
or include just the single animation
@include animations(fading-entrances/fadeInRight);
Animation families
attention-seekers
bouncing-entrances
bouncing-exits
fading-entrances
fading-exits
flippers
lightspeed
rotating-entrances
rotating-exits
sliders
specials
Single animation
attention-seekers
attention-seekers/bounce
attention-seekers/flash
attention-seekers/pulse
attention-seekers/shake
attention-seekers/swing
attention-seekers/tada
attention-seekers/wobble
bouncing-entrances
bouncing-entrances/bounceIn
bouncing-entrances/bounceInDown
bouncing-entrances/bounceInLeft
bouncing-entrances/bounceInRight
bouncing-entrances/bounceInUp
bouncing-exits
bouncing-exits/bounceOut
bouncing-exits/bounceOutDown
bouncing-exits/bounceOutLeft
bouncing-exits/bounceOutRight
bouncing-exits/bounceOutUp
fading-entrances
fading-entrances/fadeIn
fading-entrances/fadeInDown
fading-entrances/fadeInDownBig
fading-entrances/fadeInLeft
fading-entrances/fadeInLeftBig
fading-entrances/fadeInRight
fading-entrances/fadeInRightBig
fading-entrances/fadeInUp
fading-entrances/fadeInUpBig
fading-exits
fading-exits/fadeOut
fading-exits/fadeOutDown
fading-exits/fadeOutDownBig
fading-exits/fadeOutLeft
fading-exits/fadeOutLeftBig
fading-exits/fadeOutRight
fading-exits/fadeOutRightBig
fading-exits/fadeOutUp
fading-exits/fadeOutUpBig
flippers
flippers/flip
flippers/flipInX
flippers/flipInY
flippers/flipOutX
flippers/flipOutY
lightspeed
lightspeed/lightSpeedIn
lightspeed/lightSpeedOut
rotating-entrances
rotating-entrances/rotateIn
rotating-entrances/rotateInDownLeft
rotating-entrances/rotateInDownRight
rotating-entrances/rotateInUpLeft
rotating-entrances/rotateInUpRight
rotating-exits
rotating-exits/rotateOut
rotating-exits/rotateOutDownLeft
rotating-exits/rotateOutDownRight
rotating-exits/rotateOutUpLeft
rotating-exits/rotateOutUpRight
sliders
sliders/slideInDown
sliders/slideInLeft
sliders/slideInRight
sliders/slideOutUp
sliders/slideOutLeft
sliders/slideOutRight
specials
specials/hinge
specials/rollIn
specials/rollOut
Map
A powerful collection providing you all the functions you need to manipulate your Sass strings.
What's in there?
map-deep-get($map, $keys...)
: fetch nested keys
map-deep-set($map, $keys..., $value )
: update a key deeply nested
map-depth($map)
: compute the maximum depth of a map
map-has-keys($map, $keys)
: test if map got all $keys
at first level
map-has-nested-keys($map, $keys)
: test if map got all $keys
nested with each others
map-zip($keys, $values)
: an equivalent of zip
function but for maps
map-extend($map, $maps..., $deep)
: extend maps
List
A powerful collection providing you all the functions you need to manipulate your Sass lists.
What's in there?
sl-chunk()
: returns whether list contains $value
sl-comma-list()
: initializes an empty comma-separated list
sl-contain()
: returns whether the list contains the value
sl-count-values()
: counts the number of occurrences of each value of list
sl-debug()
: returns list as a string
sl-every()
: returns whether all items from list pass test from given function
sl-explode()
: explodes a string into a list using a string as a delimiter
sl-first()
: returns first value in list
sl-flatten()
: turns multidimensional list into a one-level list
sl-has-values()
: checks if list is not empty
sl-has-multiple-values()
: checks if list has more than one value
sl-insert-nth()
: inserts value at index
sl-intersection()
: returns a list of shared values across all given lists
sl-is-empty()
: checks if list is empty
sl-is-single()
: checks if list has a single value
sl-is-symmetrical()
: checks if list is symmetrical
sl-last()
: returns last value in list
sl-last-index()
: returns last index of value in list
sl-loop()
: shifts indexes in list
sl-prepend()
: prepends value to list
sl-purge()
: removes all false
and null
values from list
sl-random-value()
: returns random value from list
sl-range()
: returns a list of values between 1 and given value
sl-remove()
: removes value in list
sl-remove-duplicates()
: removes duplicate values from list
sl-remove-nth()
: removes value at index
sl-replace()
: replaces value in list
sl-replace-nth()
: replaces value at index
sl-reverse()
: reverses list
sl-shuffle()
: shuffles list
sl-slice()
: slices list
sl-sort()
: sorts list
sl-some()
: returns whether some values from list pass test from given function
sl-sum()
: sums all unitless values in list
sl-tail()
: returns anything but the first element in list
sl-to-list()
: casts value as list
sl-to-map()
: casts list as map using indexes as keys
sl-to-string()
: casts list as string (JS .join()
)
sl-union()
: returns a list of values from given lists minus duplicates
sl-walk()
: applies a function to every value of list
String
A powerful collection providing you all the functions you need to manipulate your Sass strings.
What's in there?
char-at($string, $index)
: returns the character from $string
at index $index
levenshtein($a, $b)
: returns the Levenshtein distance between $a
and $b
str-count($string, $needle)
: counts number of occurrences of $needle
in $string
str-ends-with($string, $needle)
: returns whether $string
ends with $needle
str-explode($string, $separator)
: explodes $string
on $separator
occurrences
str-implode($list)
: implodes $list
into a string
str-last-index($string, $needle)
: returns last index of $needle
in $string
str-lcfirst($string)
: turns first letter of $string
into lower case
str-pad($string, $length, $pad: " ", $direction: left)
: pads $string
with $pad
to match $length
starting from $direction
str-printf($string, $elements...)
: replaces occurrences of %s
in $string
by elements from $elements
str-repeat($string, $times)
: repeats $string
$times
times
str-replace($string, $old, $new: "")
: replaces $old
by $new
in $string
respecting $case-sensitive
str-reverse($string)
: reverses string
str-rot($string, $rot: 13)
: rotates letters in $string
of $rot
position in alphabet
str-shuffle($string)
: shuffles letters in string
str-split($string)
: splits $string
into a list of characters
str-starts-with($string, $needle)
: returns whether $string
starts with $needle
str-trim($string)
: removes white spaces before and after $string
str-ucfirst($string)
: turns first letter of $string
into upper case
str-word-count($string)
: counts number of words in $string
stringify($literal)
: casts to stringify
As well as default Sass core functions:
str-index
str-slice
str-length
str-insert
to-lower-case
to-upper-case
License
The MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.