Maple

Photo by Karen Hutton

This is alpha version, yet.

Features

Installation

NPM

Requires Node.js

$ npm install yo -g

Getting Started

Project Scaffolding

t32k/generator-maple

Create a basic maple project with Yeoman.

Installation

$ npm install generator-maple -g 

Usage

$ mkdir your_proj && cd $_
$ yo maple
$ grunt

Grunt Tasks

grunt-autoprefixer

Parse CSS and add vendor-prefixed CSS properties using the Can I Use database. Based on Autoprefixer.

grunt-csscomb

The grunt plugin for sorting CSS properties in specific order.

• The Greatest tool for sorting CSS properties in specific order

$ grunt csscomb

grunt-csso

Minify CSS files with CSSO

CSSO (CSS Optimizer) is a CSS minimizer unlike others. In addition to usual minification techniques it can perform structural optimization of CSS files, resulting in smaller file size compared to other minifiers.

• css/csso

$ grunt build

grunt-contrib-connect

Start a connect web server.

$ grunt develop

grunt-contrib-csslint

Lint CSS files.

CSSLint is a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency.

• Rules · stubbornella/csslint Wiki

Lint turn off in Maple project

• Bulletproof font face (Compatibility)
• Disallow adjoining classes (Compatibility)
• Require compatible vendor prefixes (Compatibility)
• Disallow !important (Maintainability & Duplication)
• Disallow selectors that look like regular expressions (Performance)
• Disallow unqualified attribute selectors (Performance)
• Disallow units for zero values (Performance)

$ grunt build

grunt-contrib-watch

Run tasks whenever watched files change.

livereload: true

A happy land where browsers don't need a Refresh button.

• Chrome Extensions

grunt-image

Optimize PNG, JPEG, GIF images with grunt task.

Require

Mac OS X

$ brew install libjpeg libjpeg-turbo

$ grunt image

grunt-kss

KSS styleguide generator for grunt.

A NodeJS Implementation of KSS: a methodology for documenting CSS and generating styleguides

http://localhost:8081/

$ grunt publish

grunt-sass

Grunt task to compile Sass SCSS to CSS

$ grunt develop

grunt-spritesmith

Grunt task for creating spritesheets and their coordinates

Requires Phantomjs(or canvas or gm)

If Homebrew is not installed...

$ ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"

$ brew install phantomjs

$ grunt sprite

grunt-webfont

SVG to webfont converter for Grunt

Generate custom icon webfonts from SVG/EPS files via Grunt to reduce HTTP requests.

• cognitom/symbols
• iconmonstr - Free simple icons for your next project

Requires fontforge, ttfautohint

$ brew install fontforge ttfautohint

You can create glyph SVG from this glyph.ai, and put it into /public/files/font/svg folder.

$ grunt typeset

CSS

Module Prefix

Prefix	Module name
u-*	utility
l-*	layout
c-*	component
is-*	state
js-*	JavaScript Specific

Serial Number Suffix

Suffix	Serial Number
*-a	alpha
*-b	beta
*-c	gamma
*-d	delta
*-e	epsilon
*-f	zeta
*-g	eta
*-h	theta
*-i	iota
*-j	kappa

EX.

.btn-a { color: green }
.btn-b { color: red }
.btn-c { color: black }
.btn-d { color: white }

Helper Classes

Symbol	Property
a	-
b	font-weight: bold
c(s)	text-align: center, color: $color-{serial number}
d(v)	display: {value}
e	-
f(n)	font-size: {number}
g	-
h	-
i	-
j	-
k	-
l	text-align: left
m(d)(s)	margin-{direction}: {size}
n	font-weight: normal
o	-
p(d)(s)	padding-{direction}: {size}
q	-
r	text-align: right
s	-
t	-
u	text-decoration: underline
v(n)	vertical-align: {size}
w	-
x	-
y	-
z	-

Class States

• is-active (is-selected)
• is-pressed (:hover.:avtive)
• is-hidden (display:none)
• is-animated
• is-disabled

Comments

//-------------------------------------//
//  First Level
//-------------------------------------//

//  Second Level
//-------------------------------------

//  Third Level

Sass

Directory structure

# stylesheets
├── maple.scss
├── _core.scss
├── _ui.scss
├── core
│   ├── _base.scss
│   ├── _utility.scss
│   ├── _layout.scss
│   ├── _reset.scss
│   └── _settings.scss
├── ui
│   ├── elements
│   │   ├── _button.scss
│   │   ├── _divider.scss
│   │   ├── _header.scss
│   │   └── _input.scss
│   ├── modules
│   │   ├── _bar.scss
│   │   └── _box.scss
│   └── views
│       ├── _list.scss
│       └── _modal.scss
└── lib
    ├── _myfont.scss
    └── _sprite.scss

Mixins

CSS Sprite for Retina(Using Spritesmith)

Previous Verison

// $list: <X> <Y> <Offset X> <Offset Y> <Width> <Height> <Total Width> <Total Height> <Image Path>
@mixin sprite($isParent, $sprite) {
  @if $isParent == "parent" {
    background-image: url( unquote( nth($sprite, 9) ) );
    background-repeat: no-repeat;
    background-size: round( nth($sprite, 7) / 2 ) round( nth($sprite, 8) / 2 );
  } @else {
    width: round( nth($sprite, 5) / 2 );
    height: round( nth($sprite, 6) / 2 );
    background-position: round( nth($sprite, 3) / 2 ) round( nth($sprite, 4) / 2 );
  }
}