kwaledesign

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

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

kwaledesign

<h1>Colorkit</h1>
<p>Color pallet is automaticly generated by providing the color-scheme-pallet mixin a single color. Adjust the entire pallet by setting the $key-color variable to any color value or css color keyword.</p>

<h2>Monochromatic Color Scheme</h2>
<div class="monochromatic color-pallet">
 
  <div class="base color-block">
 
    <div class="pure-color-swatch"></div>
    

kwaledesign

anglar.module('myApp',['ui']).config(["$provide", function($provide) {
    return $provide.decorator("$http", ["$delegate", function($delegate) {
        var get = $delegate.get;
        $delegate.get = function(url, config) {
            // Check is to avoid breaking AngularUI ui-bootstrap-tpls.js: "template/accordion/accordion-group.html"
            if (url.indexOf('template/')) {
                // Append ?v=[cacheBustVersion] to url
                url += (url.indexOf("?") === -1 ? "?" : "&");
                url += "v=" + cacheBustVersion;
            }

kwaledesign

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----

// Implementation of Sass 3.3 maps to build mixins with built in 
// plugable api to override output without touching mixin or duplicating output
// ------------------------
// this allows for the component to be package managed with a tool like bower
// without being tied to its predefined styles/settings

kwaledesign

# Frontend Ops

## Test Driven Stylesheets

Multiple layers of Sass/CSS testing

### Syntax checking
  * Sass/Compass

### Sass Linting - coding standard compliance

kwaledesign

<h2>Monochromatic Color Scheme</h2>
<div class="monochromatic color-pallet">
 
  <div class="base color-block">
 
    <div class="pure-color-swatch"></div>
    
    <div class="color-swatch">
 
      <div class="tint-stack">

kwaledesign

#!/bin/sh

echo "Updating Archetype Docs..."

cd ../templates/        && \
cp -rf project ../docs/ && \
cd ../docs/

echo "Successfully updated Archetype Docs"

kwaledesign

[09:34am] kwaleDesign: i'm working on a compass extension…specifically i'm making changes to that extension so i really want to be working in the output of that extension so that i have a compass watch set up and the directory structure of the output (not of the extension's directory). If i work directly in the extension, I can't easily run compass watch and process sass files, so if a mistake is made it isn't caught until i re build the gem, re install the gem, and run compass create…

[09:36am] kwaleDesign: so, my question is: what is the best workflow for working on a compass extension?

[09:51am] Snugug: kwaleDesign: Take a look at Breakpoint
[09:51am] Snugug: https://github.com/team-sass/breakpoint
[09:52am] Snugug: We've got a folder called "test" where we use 'add import path" to allow us to use our compass extensions as we develop
[09:52am] scottkellum: kwaleDesign: more specifically just add an import path to your extension instead of including the extension itself https://github.com/Team-Sass/break

kwaledesign

/* button Skin Variables: */

/**
 * Default Button and States
 */
$btn__default--color1:                                #B3B3B3;
$btn__default--color2:                                darken($btn__default--color1, 10%);
$btn__default--text-color:                            $white;
$btn__default--text-shadow:                           darken($btn__default--color1, 20%) 0 -1px 0;
$btn__default--border:                                1px solid darken($btn__default--color1, 5%);

kwaledesign

/**
 * hiDPI Mixin
 *
 * http://css-tricks.com/snippets/css/retina-display-media-query/
 *
 * $resolution: 1.25, 1.3, 1.5, 2;
 */

@mixin img-rez($resolution) {
  @if $resolution == 1.25 {