Skip to content

Latest commit

 

History

History
96 lines (83 loc) · 3.26 KB

README.md

File metadata and controls

96 lines (83 loc) · 3.26 KB
Raw

Description

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

Find some additional information on my blog:

Installation

meteor add pierreeric:cssc

Usages and API

Basic usage

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.

Helper functions

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'

Plugins

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'

Colors

# 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.

Dependencies

Acknowledgments

  • 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 😉.