First make sure you understand binstubs.
Follow this excellent tutorial on rubies and bundles.
For reasons explained there, you could:
bundle install --binstubs=.bundle/bin
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="http://cmx.io/v/0.1/cmx.css"/> | |
| <script src="http://cmx.io/v/0.1/cmx.js"></script> | |
| <body> | |
| <scene id="scene1"> | |
| <label t="translate(0,346)"> | |
| <tspan x="0" y="0em">One lazy morning</tspan> | |
| </label> | |
| <drawing t="translate(0,31)"> |
| <article class="report"> | |
| <header> | |
| <h3> | |
| <span class="source-url"><a href="http://www.facebook.com/photo.php?fbid=515039308564048&set=a.217603604974288.576..." title="http://www.facebook.com/photo.php?fbid=515039308564048&set=a.217603604974288.576...">facebook.com/photo.php...</a></span> أضيف من قبل <a href="http://www.facebook.com/217514361649879">Occupy Wall St.</a> | |
| </h3> | |
| <div id="report-actions"> | |
| <ul class="content-actions"> | |
| <li class="share-on dropdown"> | |
| <a href="#" class="dropdown-toggle" data-toggle="dropdown">شارك</a> | |
| <ul class="dropdown-menu"> |
First make sure you understand binstubs.
Follow this excellent tutorial on rubies and bundles.
For reasons explained there, you could:
bundle install --binstubs=.bundle/bin
| // Baseline styles which should apply to all decent form markup | |
| // Assume well-marked up forms | |
| form input[type="submit"] { | |
| // ... submit button styles | |
| } | |
| // Twitter bootstrap style buttons | |
| // uses the placeholer % to avoid a needless render of the button class | |
| // ... we do want to put btn classes on things! |
| <nav role="navigation"> | |
| <ul id="main-menu" class="nav"> | |
| <li style="list-style: none; display: inline"> | |
| <h2 class="element-invisible"> | |
| Main menu | |
| </h2> | |
| </li> | |
| <li class="menu-477 first active home"> | |
| <a href="/"></a> | |
| </li> |
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
| 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/" |
| // 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); |
| @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 { |
| @mixin ie6 { * html & { @content } } | |
| #logo { | |
| background-image: url("/images/logo.png"); | |
| @include ie6 { background-image: url("/images/logo.gif"); } | |
| } |