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 Basic SCSS Knowledge 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,

);

Back to index

---

check list for item/s

check( )

Check if list contains one or more items.

check( $listToCheck for $searchItems )
check( $listToCheck, $searchItems )

Examples:

@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

Back to index

---

depth calculator

depth( )

Calculate nested value of an item.

depth( $someItem )

Examples:

@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 )

Examples:

$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 )

Examples:

@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 )

Examples:

.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 )

Examples:

@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 )

Examples:

@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 )

Examples:

$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 )

Examples:

$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 )

Examples:

$mapAllColors: nest-pull(palette);

Back to index

---

calculate exponents (powers)

power( )

Find the power of a number.

power( $int1, $int2 )

Examples:

@if power($i, $index) == 16 { /*do something*/ }

Back to index

---

strip the units from a number

strip( )

Description

xxxxx( $var )

Examples:

Back to index

---

XXXXXXXXXXXXXXXX

xxxxx( )

Description

xxxxx( $var )

Examples:

Back to index

---

XXXXXXXXXXXXXXXX

xxxxx( )

Description

xxxxx( $var )

Examples:

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

Back to index

---

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