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.

• [x] REAL DESIGN SENSE anyone can harness with easy to learn SCSS tools and plenty of extra goodies when you need 'em!

• [x] STOP THE MADNESS of @include soup.

• [x] RICH AND READABLE input formatting options.

• [x] UNMATCHED COLOR PALETTE with over 600 colors, hue mixing, gradients, masking, and more.

• [x] NO PREFIXES NEEDED on input because of autoprefixer goodness.

• [x] 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.

• [x] 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.

• [x] NEAT RESPONSIVE CSS because during processing media queries will be organized and moved to the end of the css file for you!

• [x] SITE-WIDE UNIT HANDLER that converts values to default or specified units globally. Local conversions available.

• [x] 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?

• [x] Never worry about prefixes again.

• [x] Less compatibility issues.

• [x] Increased production times.

• [x] 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.

check map for item/s

map-check( )

Returns a boolean value determined by whether or not all key/s were found in a map.

pull a specific value from a map

map-pull( )

Returns the value from the specified key in a map (including nested).

change a specific map value

map-push( )

Returns a map with a specific value replaced based off specified key.

nest get value

nest-get( )

Returns the value of specified key inside nest.

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.

calculate exponents (powers)

power( )

Find the power of a number.

strip the units from a number

strip( )

Description

XXXXXXXXXXXXXXXX

xxxxx( )

Description

XXXXXXXXXXXXXXXX

xxxxx( )

Description

Built-in Sass (Cheatsheet)

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