Hello World

Cras quis ultrices tellus, a dapibus arcu. Duis sed tellus eros. Etiam dignissim sapien non felis facilisis, id scelerisque tellus auctor. Sed efficitur feugiat quam in lobortis. Nunc ligula arcu.

Close the drawer

Hello World

Cras quis ultrices tellus, a dapibus arcu. Duis sed tellus eros. Etiam dignissim sapien non felis facilisis, id scelerisque tellus auctor. Sed efficitur feugiat quam in lobortis. Nunc ligula arcu.

Close the drawer

Sugar

A little sugar in your codebase

Kraken

Colors

Sugar provide a nice way map your colors to names in order to use them inside your codebase with ease.

Text
Title
Default
Primary
Secondary
Success
Error
Warning
Info

Modifiers

Sugar provide a way to add modifiers to a color. For example, you can have a color named "gray" that has a modifier named "dark". Here's how to register these kind of colors:

@include s-setup((
  colors: (
    'gray': (
      color: #777777,
      modifiers: (
        dark: #333333
      )
    )
  )
));

Color classes

Sugar provide some classes to apply color inside your html:

  • .bkg-{color}: Apply the color to the background-color
  • .bkg-{color}--{modifier}: Apply the modified color to the background-color
  • .c-{color}: Apply the color to the color property
  • .c-{color}--{modifier}: Apply the modified color to the color property

Filters

Sugar allows you to easily manage and organize your filters by giving them a name.

Register a filter

@include s-setup((
  filters: (
    my-cool-filter: grayscale(100%)
  )
));

Using your filter

To use your filter, you have two options. The first is by calling it inside your css, the second one is by applying your filter using a helper class

In your css
.my-cool-element {
  @include s-filter(my-cool-filter);
}
Using a class

Sugar provide you some classes to apply your filter. These classes are formed like:

  • .fi-{filter-name}

Fonts

Sugar allows you to easily manage and organize your fonts by giving them a name.

@include s-setup((
  fonts: (
    // font face
        default : (
            src : '../fonts/my-cool-font.eot',
            extensions : woff woff2 eot,
            font-weight : bold,
            font-style : normal
        ),
        // bind linked font (google fonts, etc...)
        roboto : (
            font-family : Roboto
        )
  )
));

Helper classes

Sugar provide a nice way to define and grab helper classes that you want.

Available classes out of the box

Sugar provide some cool helper classes that you can take advantage of. Here's the list of them:

  • sugar.filter.{name} : .fi-{name}
  • sugar.transition.{name} : .tr-{name}
  • sugar.font.family.{name} : .f-{name}
  • sugar.margin.bottom.{size} : .m-b-{size}
  • sugar.margin.top.{size} : .m-t-{size}
  • sugar.margin.left.{size} : .m-l-{size}
  • sugar.margin.right.{size} : .m-r-{size}
  • sugar.margin.side.{size} : .m-s-{size}
  • sugar.padding.all.{size} : .p-{size}
  • sugar.padding.top.{size} : .p-t-{size}
  • sugar.padding.bottom.{size} : .p-b-{size}
  • sugar.padding.left.{size} : .p-l-{size}
  • sugar.padding.right.{size} : .p-r-{size}
  • sugar.padding.side.{size} : .p-s-{size}
  • sugar.size.{size} : .s-{size}
  • sugar.size.rel.{size} : .s-{size}-rel
  • sugar.padding.no.top : .no-p-t
  • sugar.padding.no.bottom : .no-p-b
  • sugar.padding.no.left : .no-p-l
  • sugar.padding.no.right : .no-p-r
  • sugar.padding.no.side : .no-p-s
  • sugar.margin.no.top : .no-m-t
  • sugar.margin.no.bottom : .no-m-b
  • sugar.margin.no.left : .no-m-l
  • sugar.margin.no.right : .no-m-r
  • sugar.margin.no.side : .no-m-s
  • sugar.color.{name}.color .c-{name}
  • sugar.color.{name}.bkg : .bkg-{name}
  • sugar.color.{name}.modifier.{mod-name}.color : .c-{name}--{mod-name}
  • sugar.color.{name}.modifier.{mod-name}.bkg : .bkg-{name}--{mod-name}
  • sugar.pull.left : .pull-left
  • sugar.pull.right : .pull-right
  • sugar.position.relative : .relative
  • sugar.position.absolute : .absolute
  • sugar.clear.left : .clear-left
  • sugar.clear.right : .clear-right
  • sugar.clear.both : .clear
  • sugar.pointer.events.all : .pointer-events-all
  • sugar.pointer.events.none : .pointer-events-none
  • sugar.display.show : .show
  • sugar.display.show-inline : .show-inline
  • sugar.display.hidden : .hidden
  • sugar.display.hide : .hide
  • sugar.display.visible : .visible
  • sugar.display.invisible : .invisible
  • sugar.display.visually-hidden : .visually-hidden
  • sugar.text.hidden : .t-hidden
  • sugar.text.truncate : .t-truncate
  • sugar.text.align.left : .t-left
  • sugar.text.align.right : .t-right
  • sugar.text.align.center : .t-center
  • sugar.text.align.justify : .t-justify
  • sugar.text.transform.lowercase : .t-lowercase
  • sugar.text.transform.uppercase : .t-uppercase
  • sugar.text.transform.capitalize : .t-capitalize
  • sugar.font.weight.bold : .f-bold
  • sugar.font.weight.lighter : .f-lighter
  • sugar.font.weight.bolder : .f-bolder
  • sugar.font.weight.normal : .f-normal
  • sugar.font.style.italic : .f-italic
  • sugar.font.style.oblique : .f-oblique
  • sugar.font.variant.small-caps : .f-small-caps
  • sugar.block.align.center : .block-center
  • sugar.ratio.21-9 : .ratio-21-9
  • sugar.ratio.16-9 : .ratio-16-9
  • sugar.ratio.4-3 : .ratio-4-3
  • sugar.ratio.1-1 : .ratio-1-1
  • sugar.size.abs.cover : .abs-cover
  • sugar.size.abs.contain : .abs-contain
  • sugar.size.abs.fit : .abs-fit
  • sugar.clearfix.default : .clearfix
  • sugar.clearfix.float : .clearfix-float
  • sugar.clearfix.micro : .clearfix-micro
  • sugar.clearfix.overflow : .clearfix-overflow
  • sugar.clearfix.facebook : .clearfix-facebook
  • sugar.no-transitions : .no-transitions
  • sugar.clear-transitions : .clear-transitions
  • sugar.no-animations : .no-animations
  • sugar.clear-animations : .clear-animations
  • sugar.no-transmations : .no-transmations
  • sugar.clear-transmations : .clear-transmations

Look and feel

Look and feel define how your elements (usually atoms) look like in terms of basic styling (border-radius, etc...).

Features

  • Let you setting up some look and feel properties like padding-vertical, padding-horizontal, border-radius, etc... that will be used across your components
  • em unit based that let you scale your component has you need
  • Widely used across shipped components and web components to keep a consistent look across your website
  • Use the s-setup mixin to setting up your look and feel
  • Use the s-look-and-feel or s-lnf function to set a look and feel:

Sizes

This concept can be a little tricky to understand at first but it will be a lot clearer when using the spaces, etc...

Features

  • Allows you to register some sizes that you will use across your website using names
  • Default sizes names available:
    • smaller : 0.3
    • small : 0.6
    • default : 1
    • medium : 1.4
    • big : 2
    • bigger : 3
  • Allows you to specify ratio between sizes
  • Allows you to keep consistency across your entire website

Spaces

Sugar provide a space feature that let you apply some margins, paddings, etc...

Features

  • Let you specify the spaces for your website
    • smaller : 5px
    • small : 10px
    • default : 20px
    • medium : 40px
    • big : 70px
    • bigger : 100px
  • Each spaces can be overrided
    • Use the @include s-setup() mixin to do so
  • Provide some helper classes like:
    • .m-b : Default margin bottom
    • .m-t-small : Small margin top
    • .m-l-big : Big margin left
    • .p-bigger : Bigger padding (top, right, bottom, left)
    • .p-s-small : Small padding side (left, right)
    • Etc...
  • Can be applied across your codebase with the s-space($size) function

Transitions

Sugar allows you to easily manage and organize your transitions by giving them a name.

Features

  • Allow you to register some transitions inside the settings using names
  • Apply your transitions with the @include s-transition($transitionName) mixin
  • Base transitions available:
    • slow : all .3s ease-in-out 0s
    • default : all .2s ease-in-out 0s
    • fast : all .1s ease-in-out 0s
  • Compose transitions
    • @include s-transition(fast opacity);
© Coffeekraken 2017
All our tools are published under MIT license