Skip to content

Latest commit

 

History

History
336 lines (235 loc) · 7.19 KB

README.md

File metadata and controls

336 lines (235 loc) · 7.19 KB
Raw

Maple

Photo by Karen Hutton

devDependency Status

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.

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

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

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.

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.

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 );
  }
}