4 nov. 2014

CSS color manipulation and normalize in CoffeeScript

Following my former article Create your CSS styles in CoffeeScript for Meteor, I've updated the CSSC packages to Meteor 1.0.0 and add some new features and plugins. You can now add multiple rules in one call and calls are chainable:
if Meteor.isClient
  Meteor.startup ->
  @maincss = new CSSC
  @maincss
    .add 'html',
      backgroundColor: CSSC.yellow
      fontFamily: 'Helvetica Neue, Arial, sans-serif'
    .add 'body',
      fontSize: CSSC.px 20
    .add ['h1', 'h2'],
      backgroundColor: CSSC.red
A new plugin allows to create the same rules as Normalize.css: CSSC-Normalize. Just add it classically:
meteor add pierreeric:cssc-normalize
The CSSC-Colors has been updated with color manipulation features:
# You can create basic RGB color from an hex String
c = new CSSC.Clr '#FF4136'
# From an hex string with alpha transparency
c = new CSSC.Clr ['#FF4136', .3]
# From the provided colors
c = new CSSC.Clr CSSC.yellow
# From some RGB value
c = new CSSC.Clr [255, 60, 0]
# From some RGB value with alpha transparency
c = new CSSC.Clr [255, 60, 0, .3]
# From some HSL value
c = new CSSC.Clr ['hsl', .5, 1, .5]
# From some HSL value with alpha transparency
c = new CSSC.Clr ['hsl', .5, 1, .5, .3]

# Once you have chosen your color, whatever the color schemes
#  that you use, you can modify its value.
# Lets add some 20% saturation
c.set 's', 1.2 * c.get 's'
# Lets lighten it by 30%
c.set 'l', 1.3 * c.get 'l'
# Lets make less opaque by 10%
c.set 'a', .9 * c.get 'a'

# Now that we are finished with it use as a simple string where you want.
# Through an automatic conversion
String c
# As a regular hex string
c.toString()
# As a CSS rgba value
c.rgba()  # rgba(255, 60, 0, .3)
# As a CSS hsl value
c.hsl()   # hsl(240, 100%, 50%)
# As a CSS hsla value
c.hsla()   # hsl(240, 100%, 50%, .3)