Skip to content

Latest commit

 

History

History
385 lines (274 loc) · 9.8 KB

README.md

File metadata and controls

385 lines (274 loc) · 9.8 KB
Raw

Maple

This is alpha version, yet.

Features

Features

Installation

NPM

Requires Node.js

$ npm install -g grunt-cli
$ npm install -g grunt-init

Getting Started

Project Scaffolding

Create a basic maple project with grunt-init.

Installation

$ git clone https://github.com/t32k/grunt-init-maple.git ~/.grunt-init/maple --recursive

Usage

$ grunt-init maple

Components List

$ cd /path/to/maple_project/src/tools
$ npm install
$ grunt develop

and, open URL.

http://localhost:8080/components/

Grunt Tasks

grunt-contrib-connect / grunt-contrib-watch

Start a connect web server. Run predefined tasks whenever watched file patterns are added, changed or deleted.

livereload: true

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

$ grunt develop

grunt-sass

Grunt task to compile Sass SCSS to CSS

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

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

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-csscomb

The grunt plugin for sorting CSS properties in specific order.

$ grunt csscomb

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
$ brew install https://raw.github.com/sapegin/grunt-webfont/master/Formula/sfnt2woff.rb

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

$ grunt typeset

grunt-imageoptim

Make ImageOptim, ImageAlpha and JPEGmini part of your automated build process.

Requires Apps

$ grunt build

grunt-spritesmith

Grunt task for creating spritesheets and their coordinates

$ grunt sprite

grunt-kss

KSS styleguide generator for grunt.

Require

$ npm install -g kss

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

http://localhost:8080/docs/

$ grunt publish

and, open URL.

http://localhost:8080/docs/

CSS

Module Prefix

Prefix Module name
head-* headline
list-* listview
btn-* button
box-* box/section
icon-* icon
bar-* bar
sprt-* sprite

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

├── css
│   ├── maple.css
│   └── sass
│       ├── maple.scss
│       ├── _core.scss
│       ├── _modules.scss
│       ├── core
│       │   ├── _base.scss
│       │   ├── _helper.scss
│       │   ├── _layout.scss
│       │   ├── _reset.scss
│       │   └── _settings.scss
│       ├── modules
│       │   ├── _bars.scss
│       │   ├── _boxes.scss
│       │   ├── _buttons.scss
│       │   ├── _forms.scss
│       │   ├── _headlines.scss
│       │   ├── _listviews.scss
│       │   └── _misc.scss
│       └── libs
│           ├── _myfont.scss
│           └── _sprites.scss

Mixins

CSS Sprite for Retina

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

Resources

Framework

Tips

License MIT

© 2013 Koji Ishimoto

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.