Fether NPM | npm.io

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)

\$ cd (paste project dir)

\$ npm install fether

\$ npm install

\$ 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.

:bulb: 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( )

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:

Back to index

check list for item/s

check( )

Check if list contains one or more items.

item-check( )

Check if list contains a single item, returns boolean.

depth calculator

depth( )

Calculate nested value of an item.

create material box shadows

elevate( )

is-type validation

is-type ( )

Checks if an item is a certain type.

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.