pocotan001/maple

Realistic Sass-based CSS framework for mobile.

This is alpha version, yet.

Features

Installation

NPM

Requires Node.js

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

Gems

Requires Ruby

$ gem update --system
$ gem install sass
$ gem install compass
$ gem install oily_png

Getting Started

Project Scaffolding

• grunt-init-maple

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-contrib-compass

Compile Compass to CSS.

Compass is an open-source CSS Authoring Framework.

• Compass

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

$ grunt build

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

The grunt plugin for sorting CSS properties in specific order.

• The Greatest tool 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.

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

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

• ImageOptim — make websites and apps load faster (Mac app)
• ImageAlpha — heavy compression for PNG images (like JPEG with alpha channel!)
• JPEGmini - Your Photos on a Diet!

$ grunt build

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/

• hughsk/kss-node

$ 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
│       └── vendors
│           └── _myfont.scss

Mixins

// - @mixin  CSS Sprite for Retina Display
// - @param  $isParent {String} the first parameter is a string(parent or child)
// - @param  $map {Glob} the second parameter is a glob
// - @param  $map-item {Glob} the second parameter is a glob
// - @param  $isSameChild {Boolean} default is false
// - @usage  @include sprite(child, $map-tabs, home)
@mixin sprite($isParent, $map, $map-item: foo, $isSameChild: false) {
	@if not $isSameChild {
		@if $isParent == "parent" {
			background-image: sprite-url($map);
			background-repeat: no-repeat;
			background-size: round(image-width(sprite-path($map)) / 2) round(image-height(sprite-path($map)) / 2);
		} @else {
			$position-x: round(nth(sprite-position($map, $map-item), 1) / 2);
			width: round(image-width(sprite-file($map, $map-item)) / 2);
			height: round(image-height(sprite-file($map, $map-item)) / 2);
			background-position: $position-x 0;
		}
	} @else {
		@if $isParent == "parent" {
			width: round(image-width(sprite-file($map, $map-item)) / 2);
			height: round(image-height(sprite-file($map, $map-item)) / 2);
			background-image: sprite-url($map);
			background-repeat: no-repeat;
			background-size: round(image-width(sprite-path($map)) / 2) round(image-height(sprite-path($map)) / 2);
		} @else {
			$position-x: round(nth(sprite-position($map, $map-item), 1) / 2);
			background-position: $position-x 0;
		}
	}
}

Resources

Framework

• Sencha Touch
• jquery/jquery-mobile
• twitter/bootstrap
• zurb/foundation
• stubbornella/oocss
• csswizardry/inuit.css
• mvcss/mvcss
• suitcss

Tips

• Scalable and Modular Architecture for CSS
• BEM: Methodology of Effective Site Development
• SOLID CSS | Miller Medeiros
• About HTML semantics and front-end architecture
• csswizardry/CSS-Guidelines
• necolas/idiomatic-css
• stubbornella/csslint

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.