User:Junjie shen/sandbox

Scaffy

Developer(s)	Railsware
Initial release	2012 (2012)
Written in	JavaScript
Operating system	Cross-platform
Available in	English
Type	OOCSS-based UI frameworks
Website	scaffy.railsware.com

Scaffy

Usage and Examples

Objects

As Scaffy employs the OOCSS paradigm, the definition of elements should be separated from their visual features. For example let's see the definition of a button and a box. In CSS, we might have the code as below:

#button {
	width: 200px;
	height: 100px;
	padding: 10px;
	border: solid 1px #ccc;
	background: linear-gradient(#ccc, #222);
	box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

#box {
	width: 200px;
	overflow: hidden;
	border: solid 1px #ccc;
	background: linear-gradient(#ccc, #222);
	box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

In the code above, the button element and the box element contain the same visual features (i.e. "skins"). This scenario is very pervasive in the front-end design since the common styles might exist for consistency of design or branding purposes. In this case it would be better to separate the invisible features (i.e. "structure") from the skins for the purpose of future reuse and simplicity. A more elegant way might looks like this:

.button {
	width: 200px;
	height: 100px;
}

.box {
	width: 200px;
	overflow: hidden;
}

.is-brandFeature {
	border: solid 1px #ccc;
	background: linear-gradient(#ccc, #222);
	box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

In this case, we define the skin features (i.e., ".is-brandFeature") in a separate class as a modifier. The names of modifiers should start with a prefix ".is-". The modifiers describe the visual features of an object or a module. To describe a button with this visual feature, we simply concatenate the object with the modifier:

.button.is-brandFeature /* Defines a button with the brandFeature */

Grids

Scaffy uses the Nicole Sullivan grid system. By default, Scaffy pre-defined 6 sizes of grids to break the horizontal space into fractions. The grids can be nested or stacked to build complex layouts.

Grids include properties such as line, unit, sizeXofY and lastUnit. A unit can contain another line or it can contain other objects directly. The sum of all subsets of a line should be equal to one.

Property	Description
line	Groups units on a horizontal line. For small-screen devices, such as mobile phones, layout units may be stacked to avoid horizontal scrolling.
unit	Divides a line into sections.
sizeXofY	Extends unit. Specifies the width of the unit in fraction. E.g. size1of5 will occupy 25% of the horizontal space.
lastUnit	Extends unit. Specifies the last subset of each line defined.

Structure and Function

Framework

base.sass -- linker for all framework stylesheets.

config.sass -- all shared variables store here. Also, links mixing at the end.

mixins.sass -- all SASS mixins go here. No need to use monster tools with thousands of mixins, just create mixins for your needs and use them across the project.

reset.sass -- resets everything to zero margin, padding + some black magic hacks to fix browsers inconsistencies.

spaces.sass -- use to modify the default spacing between objects.

type.sass -- stores all typography related style definitions.

Layouts

*.sass -- place for general layout styling. Store body, wrapper, content and other layout specific blocks here. Add a link to a config.sass to use shared mixins with variables. You can store all kinds of layouts here like: application.sass, homepage.sass, admin.sass

Library

*.sass -- place for groups like buttons, text-inputs, selects, radios, checkboxes and other elements, which you can combine. Add a link to a config.sass to use shared mixins with variables. To specify multiple libraries for different layouts move groups to separate folders inside the library: /library/application/ /library/admin/

Modules

*.sass -- use to create modules such as login-block.sass, modal.sass, votebar.sass, dropdown.sass, lightbox.sass and so on. Add a link to a config.sass to use shared mixins with variables.