PEM--/cssc: Stylesheets in CoffeeScript · GitHub

This Meteor package provides an easy way to create your stylesheets in CoffeeScript: CSSC

Find some additional information on my blog:

• Create your CSS styles in CoffeeScript
• CSS color manipulation and normalize in CoffeeScript

meteor add pierreeric:cssc

The following example creates a new stylesheet with 3 rules: one on the HTML file and a second on a CSS class .bubble and a third for multiple CSSRules:

mainCss = new CSSC

mainCss
  .add 'html',
    backgroundColor: 'red'
  .add '.bubble',
    backgroundColor: '#FFDC00'
    borderRadius: CSSC.em 0.75
  .add ['h1', 'h2'],
    backgroundColor: 'blue'

CSS properties are declared as a dictionary of keys and values respecting the DOM and CCOM API when called in Javascript.

They allow working with numerical value instead of strings.

• Pixels CSSC.px {Number}:
  

CSSC.px 12
# Returns: '12px'

• Percentages CSSC.pc {Number}:
  

CSSC.pc 50
# Returns: '50%'

• EM CSSC.em {Number}:
  

CSSC.em 1.2
# Returns: '1.2em'

You can add additional plugins to this package enhancing its capabilities.

Available options are:

• Colors: meteor add pierreeric:cssc-colors: It imports colors and provides some nice API for color manipulations:

CSSC.red
# Returns: '#FF4136'

# Create a color from an hex String and add alpha blending
c = new CSSC.Clr ['#FF4136', 0.3]
# Add 20% luminance
c.set 'l', (Math.round 1.2 * c.get 'l')
# Get an RGBA string
c.rgba()

• Famo.us: meteor add pierreeric:cssc-famous: It imports as CSSC file, all required CSS styles for Famo.us. It removes unnecessary calls to CSS files and the necessity to put the following in your project:

require('famous.core.famous');

• Normalize: meteor add pierreeric:cssc-normalize: It imports as CSSC file all normalized styles just like normalize.css.

• Meteor's coffeescript

• The Meteor team, this could not be achieved without them.
• The Famo.us's team for their incredible framework.
• Maxime Quandalle, for his help demystifying Meteor's package, his PR on Meteor and his package Jade's package.
• Morten N.O. Nørgaard Henriksen, for his PR on Famo.us and on Meteor, his Famono package which helps importing Famo.us but also act as a bower and git importer.
• Gadi Cohen, for his codes and his Famous's view package from which I've learned a lot.
• Adam Morse, for his incredible set of colors. It eases the eyes 😉.