If you're building your app with Coffee and Less, you might find these includes and utilities useful.

• Less imports
  • all.import.less
  • for.import.less
  • clearfix.import.less
  • reset.import.less
  • colors.import.less
  • shades.import.less
• Color preview
• Debug CSS
• Utilities
• Helpers

Because exporting assets like less files for import in other packages or apps isn't the most graceful pattern in Meteor yet, I recommend adding this package as a submodule to make it easier to include and browse the assets it exports.

First add this repo as a submodule in your packages/zhenya:boilerplate folder like this:

git submodule add https://github.com/zhenyasav/meteor-boilerplate packages/zhenya\:boilerplate

Then import all.import.less or any one of your less stylesheets like this:

@import '/packages/zhenya:boilerplate/all.import.less';

Imports all the other less imports in this package

Implements a for and foreach loop in LESS. More usage examples at less.curious.

@list: banana, apple, pear, potato, carrot, peach;

#foreach-usage {
    .for(@list); .-each(@value) {
        value: @value;
    }
}

#for-usage {
    .for(6); .-each(@i) {
        i: @i;
    }
}

Implements a basic clearfix method with a less function that applies the clearfix to any class of choice.

.clearfix(foo);

Applies clearfix to all .foo elements

Provides some browser compatible utilities like .border-radius().

Provides a basic CSS reset useful for building full screen apps.

// call this somewhere in your project less
.reset()

Provides three functions to generate common color schemes.

Gives access to the following variables:

@orange: #FF9933;
@darkblue: #0072B2;
@blue: #00A3FF;
@cyan: #47e9e9;
@red: #FF1924;
@green: #A8E30B;
@yellow: #FFEF36;
@pink: #ff6699;
@magenta: #FF00FF;
@violet: #9400D3;
@purple: #5C00EA;

Create a five color complementary color scheme with @base as the root color. Colors are accessible using @one, @two, @three, @four, and @five. @shade is used to generate secondary colors from the first two by lighten and desaturate.

Create a five color triad color scheme with @base as the root color. Colors are accessible using @one, @two, @three, @four, and @five. @shade is used to generate secondary colors from the second two by lighten and desaturate.

Provides a function to generate seven shades and tints between a specific light and a dark color. Helpful for generating a tinted set of shades.

Gives access to:

@white: @w;
@light: mix(@w, @b, 96%);
@lightgray: mix(@w, @b, 85%);
@gray: mix(@w, @b, 60%);
@darkgray: mix(@w, @b, 30%);
@dark: mix(@w, @b, 10%);
@black: @b;

To test your available colors, call the templates {{>_colors}} and {{>_shades}} anywhere to see color swatches.

Unless Meteor.settings.public.debugCss == false, pressing Ctrl+~ (Control + tilde) will show outlines on all dom elements making it easier to inspect structure and CSS problems at a glance.

Defines (or extends) a global utility Utils:

Returns a function that can be used to construct Elements with a CoffeeKup style syntax. The arguments to this function can be of any length, all but the last of which will be interpreted as attributes. The last argument will be the content if it is an array of Elements.

div = Utils.tag 'div'
span = Utils.tag 'span'
element = div id:'abc', class:'foo bar', style:'color: blue', [
		div class:'foo'
		span class:'bar'
	]

The resulting element will be:

<div id="abc" class="foo bar" style="color: blue">
	<div class="foo"></div>
	<span class="bar"></span>
</div>

A shortcut for Utils.tag 'div'

A shortcut for Utils.tag 'span'

Converts string s for use in a css class attribute, by first lowering case, then replacing spaces with dashes.

A convenience method to reverse the order of arguments in setTimeout such that it's more palatable to use in CoffeeScript. Instead of:

Meteor.setTimeout ->
	# do something
, 1000

Now use:

Utils.delay 1000, -> #do something

Capitalize the string s

Remove the trailing 's' if it exists

Add a trailing 's' if it doesn't exist

Based on the plurality of the number n, pluralize or singularize string s

Pass the arguments to console.log and return the last argument. Useful for logging values inside chained function calls.

# to look inside a chain of calls like:
array = [0..2]
_.uniq _.map array, (n) -> n**2
# use Utils.log:
_.uniq Utils.log 'mapped array', _.map array, (n) -> Utils.log 'element', n**2

Output:

element 0
element 1
element 4
mapped array [0, 1, 4]

Generates a random string of numbers of length order and prefixed with prefix

A cheap trick to replace all click handlers with touchend in case touch is supported. Useful in Template.<template>.events() calls to avoid click emulation on mobile devices.

An object with some common keycodes like space, enter and shift. Suitable for use in event handlers like keyup.

Utils.keys =
	tilde: 192
	left: 37
	right: 39
	up: 38
	down: 40
	esc: 27
	enter: 13
	space: 32
	shift: 16
	ctrl: 17
	alt: 18
	cmd: 91

Hex color codes for some common colors.

Utils.colors =
	orange: '#FF9933'
	darkblue: '#0072B2'
	blue: '#00A3FF'
	cyan: '#47e9e9'
	red: '#FF1924'
	green: '#A8E30B'
	yellow: '#FFEF36'
	pink: '#ff6699'
	magenta: '#FF00FF'
	violet: '#9400D3'
	purple: '#5C00EA'

If the number is less than 10, it is spelled in letters like "five". If not, the argument is returned.

The following template helpers are registered globally

Decomposes obj into an array with objects that each have keys key and value. Useful for decomposing objects or arrays to retrieve keys or indices.

Iron router's Router.current()

Returns Session.get("key")

Same as Utils.pluralize()

Same as Utils.singular()

Same as Utils.plural()

Same as Utils.capitalize()

Same as Utils.cssClass()

Same as Utils.spellNumber()