kwaledesign

React Resources:

Fundamental React Concepts

(Stateless) Functional Component aka Pure Component

React Component

Higher Order Components

kwaledesign

// Original
//
// Markup:
//
// <button class="button">Button</button>
// <button class="button button-primary">Button</button>
// <button class="button button-danger">Button</button>
//
// Total selectors:    6
// Total declarations: 19

kwaledesign

/* Solarized Dark 

For use with Jekyll and Pygments

http://ethanschoonover.com/solarized

SOLARIZED HEX      ROLE
--------- -------- ------------------------------------------
base03    #002b36  background
base01    #586e75  comments / secondary content

kwaledesign

// ----
// Sass (v3.4.0.rc.1)
// Compass (v1.0.0.alpha.20)
// ----

$zindex: (
  one: 9,
  two: 10,
);

kwaledesign

# Load resources
config = require( "./gulpconfig.json" )
pkg = require( "./package.json" )

# Load all plugins from pkg.json
gulp = require( "gulp" )
$ = require( "gulp-load-plugins" )(  )

# Clean public dir
gulp.task( "clean", ->

kwaledesign

{
  "name": "abaqis3.0",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-cli": "0.1.9",
    "grunt-contrib-uglify": "~0.3.1",
    "grunt-contrib-coffee": "~0.8.2",
    "grunt-contrib-compass": "~0.7.2",
    "grunt-contrib-concat": "~0.3.0",

kwaledesign

/*** @export "button-structure" css */

// enable/disable button structures
$btnSmall: true;
$btnMedium: true;
$btnLarge: true;
$btnTouch: true;
// enable/disable button skins
$btnDefault: true;
$btnPositive: true;

kwaledesign

/**
 * Component Constructor
 *
 * Used to provide a means for overriding default styles without redundant output
 * Allows for the component to be package managed with a tool like bower
 * without being tied to its predefined styles/settings for unit testing
 *
 * Sass v3.3.2 (Maptastic Maple)
 * Compass (v1.0.0.alpha.19)
 *

kwaledesign

/*** @export "button-component" css */
/**
 * Button Component
 *
 * 1. import the button-object dependency.
 */
@import 'path/to/bower_components/_o-button.scss';     /* 1 */

@import '_button-component.scss';

kwaledesign

/**
 * Component Constructor
 *
 * Used to provide a means for overriding default styles without redundant output
 * Allows for the component to be package managed with a tool like bower
 * without being tied to its predefined styles/settings for unit testing
 *
 * Sass v3.3.2 (Maptastic Maple)
 * Compass (v1.0.0.alpha.19)
 *