Photo by Karen Hutton
This is alpha version, yet.
Requires Node.js
$ npm install yo -gCreate a basic maple project with Yeoman.
Installation
$ npm install generator-maple -g Usage
$ mkdir your_proj && cd $_
$ yo maple
$ gruntParse CSS and add vendor-prefixed CSS properties using the Can I Use database. Based on Autoprefixer.
The grunt plugin for sorting CSS properties in specific order.
$ grunt csscombMinify 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 buildStart a connect web server.
$ grunt developLint 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.
- 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 buildRun tasks whenever watched files change.
livereload: true
A happy land where browsers don't need a Refresh button.
Optimize PNG, JPEG, GIF images with grunt task.
Require
Mac OS X
$ brew install libjpeg libjpeg-turbo$ grunt imageKSS styleguide generator for grunt.
A NodeJS Implementation of KSS: a methodology for documenting CSS and generating styleguides
http://localhost:8081/
$ grunt publishGrunt task to compile Sass SCSS to CSS
$ grunt developGrunt 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 spriteSVG 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 ttfautohintYou can create glyph SVG from this glyph.ai, and put it into /public/files/font/svg folder.
$ grunt typeset| Prefix | Module name |
|---|---|
| u-* | utility |
| l-* | layout |
| c-* | component |
| is-* | state |
| js-* | JavaScript Specific |
| 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 }| 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 | - |
- is-active (is-selected)
- is-pressed (:hover.:avtive)
- is-hidden (display:none)
- is-animated
- is-disabled
//-------------------------------------//
// First Level
//-------------------------------------//
// Second Level
//-------------------------------------
// Third Level# 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// $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 );
}
}