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

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}

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

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}
• and many more...

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:

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

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

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

Features

• Nice mixins to handle typography properties
  • s-font(quote italic bold underline) mixin to quickly apply text styles
  • s-vertical-rhythme() mixin To handle vertical spaces
  • and more...
• Provide helper classes like .t-left, .t-right, .t-uppercase, .t-lowercase, and many more...