fether
!!! IMPORTANT !!! Fether is currently undergoing a 2020 makeover. Stay tuned.
Fether is a powerful SCSS design environment focused on constructing elegant, lightweight stylesheets.
Get Started
Install NPM (Node.js)
Install Grunt (JS Tasks)
Navigate to your project
folder and copy the project
directory to the clipboard.
From your COMMAND LINE (CLI):
$ cd (paste project dir)
Install Fether:
$ npm install fether
Install Dependencies:
$ npm install
Run Fether:
$ grunt
A new way to realize your designs.
-
REAL DESIGN SENSE anyone can harness with easy to learn SCSS tools and plenty of extra goodies when you need 'em!
-
STOP THE MADNESS of @include soup.
-
RICH AND READABLE input formatting options.
-
UNMATCHED COLOR PALETTE with over 600 colors, hue mixing, gradients, masking, and more.
-
NO PREFIXES NEEDED on input because of autoprefixer goodness.
-
IMPRESSIVE MODERN STYLING that follows many material design standards for typography and colors by default. We also have implemented a lot of modern elements like flexbox, web font icons, animated buttons, and loading screen animations.
-
LOW CSS FILE SIZES due to a combination of @extend and %placeholder. By loading extendors once in each detected media query, we get past the common issues of using @extend.
-
NEAT RESPONSIVE CSS because during processing media queries will be organized and moved to the end of the css file for you!
-
SITE-WIDE UNIT HANDLER that converts values to default or specified units globally. Local conversions available.
-
SITE-WIDE COLOR FILTERS so when your boss says, "I love it, but can you just make everything a little more vibrant!?" Instead of seriously considering your choice of profession, now you can simply adjust the filter setting. You may also officially add 'Magician' to your list of job titles.
Why autoprefixer?
-
Never worry about prefixes again.
-
Less compatibility issues.
-
Increased production times.
-
Keep prefixes neat and organized.
💡 Things to know.
-
A nest is a map that contains at least one map nested inside.
-
Fether's core functions may use comma separation in place of connectors ("for", "with", "of", "and", "to", etc.)
-
Anywhere you see quotes on a single word entry like
"background"or"blue-grey"you can leave out the quotes. -
Quotes are required around strings and multi-word entries like
"I am a string"or"cerulean blue".
color assistant
cast( )
| [x] Function |
| [x] Mixin |
Returns color value based on name, weight and opacity.
cast( $name [$weight] [$opacity] )@include cast( $name [$weight] [$opacity] on $cssProperty )
- If you include multiple colors, it will return a gradient or mixture depending on the input that is detected.
- Color weights above 500 or below 500 mix with black or white respectively in order to achieve lightness and darkness settings similar to material design.
- The base filters for tinting and shading colors can be adjusted to provide site-wide color shifts.
- Theme-based colors mimicking material design (light/dark) that are black and white transparencies. This allows for text and other elements to change color depending on the background color or color behind the element i.e. instead of using a solid medium grey, you would use black at medium opacity.
Examples:
/*function*/ border-color: cast( 'canary yellow' 400 10% ); background-color: cast( 'forest green' ); $color: cast( 'canary yellow' 400 10% ); $mixture: cast( burgundy 200 with 'carmine pink' by 60%); $gradient: cast( top #fce100 to 'cerulean blue' ); $gradient: cast( center byzantium 200 to 'navajo white' 300 to #dce400 75% to beige 700 50% ); /*mixin*/ @include cast( dark on color ); @include cast( bottom daffodil 400 to 'facebook blue' on border-left-color ); @include cast( bottom daffodil 400 to 'facebook blue' on background-color on border-top-color ); @include fether( cast dark on color, cast 'forest green' 300 on border-color, cast 'lime green' 450 on background-color on border-top-color, );
check list for item/s
check( )
Check if list contains one or more items.
check( $listToCheck for $searchItems )
check( $listToCheck, $searchItems )
@if check( $someList for 'item one' 'item two' ) { /*do something*/ }
$someVariable: check( $thisList for $theseItems )
item-check( )
Check if list contains a single item, returns boolean.
item-check( $listToCheck, $someItem ) -> boolean
depth calculator
depth( )
Calculate nested value of an item.
depth( $someItem )
@if depth( $item ) == 2 { /*do something*/ }
Back to index
create material box shadows
elevate( )
| [x] Function |
| [x] Mixin |
Add material box shadows up to 24dp.
elevate( $depth )
$boxShadow: elevate(4dp); $boxShadow: elevate(4); @include elevate(4);Back to index
is-type validation
is-type ( )
Checks if an item is a certain type.
is-number( $someItem )
@if is-bool( $item ) { /*do something*/ }
@if is-color( $item ) { /*do something*/ }
@if is-list( $item ) { /*do something*/ }
@if is-map( $item ) { /*do something*/ }
@if is-null( $item ) { /*do something*/ }
@if is-number( $item ) { /*do something*/ }
@if is-string( $item ) { /*do something*/ }
@if is-angle( $item ) { /*do something*/ }
@if is-function( $item ) { /*do something*/ }
@if is-integer( $item ) { /*do something*/ }
@if is-percent( $item ) { /*do something*/ }
@if is-resolution( $item ) { /*do something*/ }
@if is-time( $item ) { /*do something*/ }
@if is-abs-length( $item ) { /*do something*/ }
@if is-rel-length( $item ) { /*do something*/ }
@if is-rel-percent( $item ) { /*do something*/ }
@if is-rel-view( $item ) { /*do something*/ }
@if is-relative( $item ) { /*do something*/ }
@if is-length( $item ) { /*do something*/ }
@if is-position( $item ) { /*do something*/ }
@if is-word( $item ) { /*do something*/ }
@if is-lib( $item ) { /*do something*/ }
Back to index
add or convert units
its( )
Add defaults units to a unitless number. If the input value has a unit, the number will be converted properly based on the incoming and outgoing units. You may also add a custom unit-type for solo unit conversions.
its( $value )
its( $value, $unitType )
.container {
max-width: its(1200);
}
Back to index
check map for item/s
map-check( )
Returns a boolean value determined by whether or not all key/s were found in a map.
map-check( $map, $keys )
@if map-check( $map, $keys ) { /*do something*/ }
Back to index
pull a specific value from a map
map-pull( )
Returns the value from the specified key in a map (including nested).
map-pull( $map, $keys )
@if map-pull( $map, $keys ) { /*do something*/ }
Back to index
change a specific map value
map-push( )
Returns a map with a specific value replaced based off specified key.
map-push( $map, $keys, $newValue )
$updatedMap: map-push($oldMap, $key, $newValue);Back to index
nest get value
nest-get( )
Returns the value of specified key inside nest.
nest-get( $keyOrKeys )
$redHueMap: nest-get(palette red); $fetherRed: nest-get(palette red 'fether red');Back to index
nest pull all keys and values
nest-pull( )
Returns a map of all keys and values (included nested) found inside of the specified key value.
nest-pull( $keyOrKeys )
nest-pull( $keyOrKeys, $customNest )
$mapAllColors: nest-pull(palette);Back to index
calculate exponents (powers)
power( )
Find the power of a number.
power( $int1, $int2 )
@if power($i, $index) == 16 { /*do something*/ }
Back to index
strip the units from a number
strip( )
Description
xxxxx( $var )
Back to index
XXXXXXXXXXXXXXXX
xxxxx( )
Description
xxxxx( $var )
Back to index
XXXXXXXXXXXXXXXX
xxxxx( )
Description
xxxxx( $var )
Back to index
Built-in Sass (Cheatsheet)
| Sass Functions | Sass Docs | ||
RGB/Opacity/Other
rgb($r,$g,$b) rgba(($r,$g,$b),$a) red($color) green($color) blue($color) mix($color1,$c2,[$wt]) alpha($color) aka opacity() opacify($color, $per) aka fade-in() transparentize($color,$per) aka fade-out() adjust-color($color,[$r,$g,$b,$h,$s,$l,$a]) scale-color($color,[$r,$g,$b,$h,$s,$l,$a]) change-color($color,[$r,$g,$b,$h,$s,$l,$a]) |
HSL
hsl($h,$s,$l) hsla(($h,$s,$l),$a) hue($color) saturation($color) lightness($color) adjust-hue($color,$deg) lighten($color,$per) darken($color,$per) saturate($color,$per) desaturate($color,$per) grayscale($color) complement($color) invert($color,[$wt]) |
|
Strings
unquote($string) quote($string) str-length($string) str-insert($string,$insert,$i) str-slice($string,$start-at,[$end-at]) to-upper-case($string) to-lower-case($string) |
Numbers
percentage($num) round($num) ceil($num) floor($num) abs($number) min($numbers...) max($numbers...) random([$limit]) |
|
Lists
length($list) nth($list,$n) set-nth($list,$n,$value) join($l1,$l2,[$sep,$brack]) append($l1,$val,[$sep]) zip($lists...) index($list,$value) list-seperator($list) is-bracketed($list) |
Maps
map-get($map,$key) map-merge($m1,$m2) map-remove($map,$keys...) map-keys($map) map-values($map) map-has-key($map,$key) keywords($args) |
|
Selectors
selector-nest($sel...)
selector-append($sel...)
selector-extend($sel,$e1,$2)
selector-replace($sel,$o,$r)
selector-unify($s1,$s2)
is-superselector($super,$sub)
simple-selectors {$sel}
selector-parse($sel)
|
Introspection
features-exists($feat) variable-exists($name) global-variable-exists($name) function-exists($name) mixin-exists($name) content-exists() inspect($val) type-of($val) unit($num) unitless($num) comparable($n1,$n2) call($func,$args...) get-function($name,$css: false) |
|
Miscellaneous
if($condition, $if-true, $if-false) unique-id() | ||
| Last Updated: October 26th, 2017 | ||
Brought to you by
Fether has been lovingly crafted by myself, Lucas Grey, a Full Stack Designer with over 23 years of experience.
Fether Framework (Coming 2018): Includes CSS Styles, Javascript Library, Javascript Components
License
Apache 2.0