@coffeekraken/sugar NPM

Sugar

Coffeekraken Sugar

npm npm npm

Sugar gives you a lot of cool stuff to enhance your codebase. It basically does nothing by default but let you grab what you want from it. It can be the colors management feature, as well as the spaces management, helper classes, etc...

We like to think about this toolkit as

A little (but powerful) sugar in your codebase

Goals

The primary goal of this toolkit is to cover these needs:

Give you a way to organize your codebase (colors, fonts, etc...)
- Sugar does not tells you how your folders need to be layed out
- Help you to stay organized inside your code - Colors - Fonts - Etc...
- Help a lot when you need to work in team
Give you access to a large number of useful mixins like:
- font : Apply font property quickly
- clearfix : Apply any clearfix (standard, overflow, float, etc...) type quickly
- placeholder : Apply the input placeholder styling
- list-bullet : Create fully customized list bullets (icons, images, decimal, etc...)
- vertical-rhythme : Set your vertical rhythme rules
- truncate-text : Truncate a text when to wide
- And many many more...
Give you access to some cool effects that you can tweak like:
- depth : Material design depth shadows
- bubble : Customizable speach bubbles
- side-lined : Simple side lines to apply on titles or whatever
- long-shadow : Create a nice long shadow effect
- Fully customizable one div loaders
- And many more...
Provide some useful daily use javascript functions like:
- closest : Equivalent of the jQuery closest functions
- whenInViewport : Let you know when an element enter the viewport the first time
- whenAttribute : Let you know when an element has a specifiy attribute (or that an attribute is a string, etc...)
- scrollTo : Animate the scroll to a certain element in the page
- domReady : Equivalent to the jQuery ready function
- getAnimationProperties : Return an object with the css animations properties
- And many, many, many more...
Provide some powerful javascript classes like:
- SWebComponent : Base class to create webcomponent based on react methods naming (componentWillMount, componentMount, etc...)
- SBinder : Allows you to bind object properties to another object
- SWatcher : Allows you to monitor object properties
- STimer : Nice little class to handle timers (start, stop, pause, onTick, etc...)
- And many more...
Plenty web components based on the SWebComponent class
- These web components are separated into outside packages
- Official sugar web components are published on the Coffeekraken NPM organisation
- Well tested components

Install

npm install @coffeekraken/sugar --save

Release the kraken !!! 🦑

Quick start

Here's how to get started quickly:

SASS (scss)

// import sugar
@use "node_modules/@coffeekraken/sugar/index" as sugar;

// configure your sugar
@include sugar.setup((// configuration here...));

// init (required to be just after sugar.setup calls)
@include sugar.init();

// generate the classes if you want
@include sugar.classes();

JS

In javascript, you just need to import what you want from the toolkit like so:

import STimer from "@coffeekraken/sugar/js/class/STimer";
// etc...

Sass features

Here's a list of features that the toolkit will offer you. Don't worry, it seems like a lot, but you don't need to use all of them to start. Just pick what you need and let the rest aside...

Colors : Manage, organize and use colors easily - Named colors - Easy modifiers - Helper classes (optional) - And more...
Fonts : Keep your fonts really organized - Names fonts - Helper mixins - Helper classes (optional) - And more...
Typography : Full stack typography management - Helper mixins - Helper classes (optional) (lowercase, uppercase, aligns, etc...) - And more...
Sizes : Manage sizes ratios to keep consistent margins, etc... - Named sizes (smaller, small, default, etc...) - Fully customizable - Ratio based - And more...
Spaces : Full stack spaces management - Named spaces (share sizes names) - Helper classes (optional) - .m-b-small : Margin bottom small - .m-t-big : Margin top big - .p-l : Padding left (default) - Etc... - Helper mixins - And more...
Look and feel : Handle how your components (atoms) looks across your site - em unit based - Helper mixins - Ensure a consistent feel across your website - And more...
Filters : Manage and keep your filters organized - Named filters - Helper mixins - Helper classes (optional) - And more...
Transitions : Manage and keep your transitions organized - Named transitions - Helper mixins - Helper classes (optional) - And more...
And many more cool stuffs like: - A bunch of cool mixins to discover - Utils functions like : - convert : Convert from a unit to another - is : Easily advanced variables type checking - And more... - We let you discover the rest by yourself...

JS features

Sugar provide a lot of cool functions and classes that you can use inside your project. The main goal sugar try to achieve is to give you some cool tools that you can or not use. It's your choice and sugar will never force you in any way.

All the javascript capabilities of sugar are well structured and splited inside the repository so you will be able to grab only what you want from it. Here's some examples of functions and classes you might load in your project:

import whenAttribute from "@coffeekraken/sugar/js/dom/whenAttribute";
import closest from "@coffeekraken/sugar/js/dom/closest";
import whenInViewport from "@coffeekraken/sugar/js/dom/whenInViewport";
import whenAttribute from "@coffeekraken/sugar/js/dom/whenAttribute";
import closestNotVisible from "@coffeekraken/sugar/js/dom/closestNotVisible";
import SColor from "@coffeekraken/sugar/js/class/SColor";
import STimer from "@coffeekraken/sugar/js/class/STimer";
import SWebComponent from "@coffeekraken/sugar/js/core/SWebComponent";
// etc...

Classes : Set of useful classes like: - STimer : Handle times with nice control like start, stop, pause, etc... - SColor : Manipulate colors and access your sass registered colors - And more...
DOM Helpers : Set of useful DOM related functions like: - closest : Equivalent of the jQuery closest functions - whenInViewport : Let you know when an element enter the viewport the first time - whenAttribute : Let you know when an element has a specifiy attribute (or that an attribute is a string, etc...) - scrollTo : Animate the scroll to a certain element in the page - And more
Easings : Set of easings functions
Filters : Cool js filters like: - SGooeySvgFilter : Make a gooey effect like in this demo - SGradientSvgFilter : Apply an SVG gradient filter on top of any HTMLElement - SMotionblurSvgFilter : Monitor an HTMLElement movement and apply a nice motion blur accordingly
Features : Additional auto-applied DOM behaviors
Utils : Utils function for strings, colors, objects, etc... like: - throttle : Throttle a function call - isColor : Check if is a valid color - isEmail : Check if is a valid email - whenProperty : Be notified when a property exist or match a certain check function - And more...

What Sugar does not

Sugar has some goals it try to achieve, and have also some things that it does intentionally not like:

Vendor prefixing your CSS
- They are plenty of tools to make that like autoprefixer
Implement polyfills like webcomponent.js, etc...
- You will need to integrate them yourself when you need to...
Force you to use his features
- Grab what you want from the toolkit, keep the rest aside...

Coffeekraken

We are a young collective of front-end creative developers with one goal in mind. Build tools to make every team working day life better. This is our first and only concern. All our tools are build around that purpose. All what we provide are some cool tools that you can use the way you want. These tools features cover a large scope of the front-end workflow (styleguide generation, colors/fonts management, etc...). You can use only the parts that you need and let the rest aside...