cbfrance

@mixin resource-layout(
  $width: $primary_width, 
  $language_dir: left,
  $type: discussion,
  $background_color: none, 
  $icon_width: 40px, 
  $padding: $default_padding) {  

  background-color: $background_color;
  border-top: 2px solid lighten($tarawera, 10%);

cbfrance

@import "colors";
@import "buttons.scss";
@import "compass/css3";

@mixin tabs {
  float: left;
  width: 100%;
  background: transparent;
  margin: 0!important;
  height: 43px;

cbfrance

1 Rumah (House)
1.1 Sangat Miskin (Very Poor)
1.2 Miskin (Poor)
1.3 Sedang (Medium)
1.4 Kaya (Rich)

1.5 Kondisi Bangunan (Building Conditions)
1.5.1 Atap (Roof)
1.5.1.1 Ilalang (Weeds)
1.5.1.2 Seng / Asbes (Zinc / Asbestos)

cbfrance

Road features
	road basics 
		bridge
		footbridge
		path
		steps
		1-lane
		2-lane
		4-lane
		residential

cbfrance

#!/usr/bin/env ruby
require 'graphviz'

class Visualizer
  def initialize
    @g = GraphViz.new( "G", :type => "graph", :rankdir => "LR", :bgcolor => "#808080", :aspect => 1 )
  end

  def prune(file)
    file.gsub(/\S+\/(\S+)\.scss/, '\\1').gsub(/@import ['"](\S+\/)?(\S+)['"];/, '\\2')

cbfrance

@mixin ie6 { * html & { @content } }

#logo {
  background-image: url("/images/logo.png");
  @include ie6 { background-image: url("/images/logo.gif"); }
}

cbfrance

@import fontawesome;
@import fancy-buttons;
@import icons;

// now look, a semantic selector! 
// you don't have to add .icon-envelope-alt to your markup
// use any of webfont-based icons at fortawesome.github.com/Font-Awesome/
// The result will be buttons like this: http://cl.ly/image/2c1t1q0W0t3P

a.request-invite {

cbfrance

// Notification banner with dynamic color size and vertical baseline
// 
// $color - used to dynamically set background, borders, font color.
// $adjustment - tweak the adjustment of the hues
// $font-size - adjust the size of the notification

@mixin notification($color: $light-gray, $adjustment: "lighten", $font-size: $medium-font-size) {
  margin: 0;
  padding-left: rhythm(1/2, $font-size);
  padding-right: rhythm(1/2, $font-size);

cbfrance

require "susy" # how to require this in bowerbird?
require "logger" # custom logger with pass/fail
require "pry"
require "rake" # for filelist
require "modular-scale" #for ratios

drupal_dir = "drupal"
themes_dir = "sites/all/themes/"
extensions_dir = "bowerbird/extensions/"
bowerbird_extension_dir = "bowerbird/"

cbfrance

Susy layouts with breakpoints

illustrating a common problem and a solution

OK, we're assuming we have this configuration:

$container-width: 6; // columns width
$break-small: 12; // larger than a smartphone, holds 12 computed columns
$break-medium: 24; // full desktop screen, holds 24 columns

Here's our pretty basic layout strategy