bbuttons 0.0.1

data/README.mkdn

@@ -0,0 +1,4 @@
+bbuttons
+========
+
+Small, palpable button mixin.

data/lib/bbuttons.rb

@@ -0,0 +1 @@
+Compass::Frameworks.register("bbuttons", :path => "#{File.dirname(__FILE__)}/..")

data/stylesheets/_bbuttons.scss

@@ -0,0 +1,214 @@
+// Bbuttons - A palpable lightweight button mixin
+// Taylor Stackpole
+// July 6, 2013
+
+@mixin linear-gradient($start, $end) {
+  background-color: $end;
+  background-image: -webkit-gradient(linear, left top, left bottom, from($start), to($end));
+  background-image: -webkit-linear-gradient(top, $start, $end);
+  background-image: -moz-linear-gradient(top, $start, $end);
+  background-image: -ms-linear-gradient(top, $start, $end);
+  background-image: -o-linear-gradient(top, $start, $end);
+  background-image: linear-gradient(top, $start, $end);
+  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='$start', EndColorStr='$end');
+}
+@mixin radial-gradient($start, $end){
+  background: linear-gradient(#000, #FFF);
+}
+
+@mixin left($color: rgba(0,0,0,0.3)) {
+  border: {
+    right: 1px solid $color;
+    top-right-radius: 0;
+    bottom-right-radius: 0;
+  }
+}
+@mixin mid($color: rgba(255, 255, 255, 0.4)) {
+  border: {
+    left: 1px solid lighten($color, 25%);
+    right: 1px solid rgba(0,0,0,0.3);
+    radius: 0;
+  }
+}
+@mixin right($color: rgba(255, 255, 255, 0.4)) {
+  border: {
+    left: 1px solid lighten($color, 25%);
+    bottom-left-radius: 0;
+    top-left-radius: 0;
+  }
+}
+
+@mixin bsimple(
+  $color: #ccc,
+  $font: #333,
+  $shadow: #FFF
+  ) {
+  background: $color;
+  background-repeat: repeat-x;
+  border: none;
+  border-radius: 3px;
+  // border: 1px solid rgba(0,0,0,0.1);
+  color: $font;
+  font: {
+    size: 24px;
+    family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  }
+  padding: 8px 14px;
+  text-shadow: 0 0 1px $shadow;
+  @include linear-gradient($color, darken($color, 25%));
+  &:active {
+    text-shadow: 0 0 1px shadow;
+    @include linear-gradient(darken($color, 5%), $color);
+  }
+}
+@mixin bsuper(
+  $color: #999,
+  $font: #333,
+  $shadow: 0 0 3px white
+  ) {
+  background: $color;
+  border: none;
+  border-radius: 2px;
+  color: $font;
+  font: {
+    weight: normal;
+  }
+  padding: 3px 8px;
+  text-shadow: $shadow;
+}
+
+$blue-bbutton: #545FDD;
+// $yellow-bbutton: #FFAF05;
+$yellow-bbutton: #e5d400;
+// $green-bbutton: #27D505;
+$green-bbutton: #91df97;
+$teal-bbutton: #0FE5D4;
+// $red-bbutton: #FF4242;
+$red-bbutton: #ee6868;
+
+#bbuttons {
+}
+button.bsimple {
+  @include bsimple();
+  &.blue {
+    background: $blue-bbutton;
+    color: white;
+    text-shadow: 0 0 2px darken($blue-bbutton, 15%);
+    @include linear-gradient($blue-bbutton, darken($blue-bbutton, 30%));
+    &:active {
+      @include linear-gradient(darken($blue-bbutton, 5%), darken($blue-bbutton, 20%));
+    }
+  }
+  &.green {
+    background: $green-bbutton;
+    color: white;
+    text-shadow: 0 0 2px darken($green-bbutton, 15%);
+    @include linear-gradient($green-bbutton, darken($green-bbutton, 25%));
+    &:active {
+      @include linear-gradient(darken($green-bbutton, 5%), darken($green-bbutton, 10%));
+    }
+  }
+  &.yellow {
+    background: $yellow-bbutton;
+    color: white;
+    text-shadow: 0 0 2px darken($yellow-bbutton, 15%);
+    @include linear-gradient($yellow-bbutton, darken($yellow-bbutton, 10%));
+    &:active {
+      @include linear-gradient(darken($yellow-bbutton, 5%), $yellow-bbutton);
+    }
+  }
+  &.teal {
+    background: $teal-bbutton;
+    color: white;
+    text-shadow: 0 0 2px darken($teal-bbutton, 15%);
+    @include linear-gradient($teal-bbutton, darken($teal-bbutton, 15%));
+    &:active {
+      @include linear-gradient(darken($teal-bbutton, 5%), $teal-bbutton);
+    }
+  }
+  &.red {
+    background: $red-bbutton;
+    color: white;
+    text-shadow: 0 0 2px darken($red-bbutton, 15%);
+    @include linear-gradient($red-bbutton, darken($red-bbutton, 20%));
+    &:active {
+      @include linear-gradient(darken($red-bbutton, 20%), $red-bbutton);
+    }
+  }
+  &.small {
+    border-radius: 2px;
+    font: {
+      size: 16px;
+      weight: normal;
+    }
+    padding: 2px 10px;
+  }
+  &.large {
+    border-radius: 4px;
+    font-size: 32px;
+    padding: 12px 19px;
+    + ul {
+      width: 200px;
+    }
+  }
+  &.left {
+    @include left();
+    float: left;
+  }
+  &.right {
+    @include right();
+    float: left;
+  }
+  &.mid {
+    @include mid();
+    float: left;
+  }
+}
+
+// set of buttons
+.button-set {
+  width: auto;
+  display: inline-block;
+  height: auto;
+}
+// Button dropdown
+.button-drop {
+  display: inline-block;
+  ul {
+    position: fixed;
+    display: none;
+    background: rgb(240, 240, 240);
+    border-radius: 5px;
+    box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4);
+    list-style: none;
+    margin-left: 0;
+    margin-top: 3px;
+    width: 150px;
+    li {
+      padding: 5px 10px 5px 10px;
+      font-size: 16px;
+      line-height: 19px;
+      a {
+        text-decoration: none;
+      }
+      &.heads-up {
+        background: rgba(0,0,0,0) !important;
+        // border-bottom: 1px solid rgba(0,0,0,0.2);
+        padding: {
+          top: 7px;
+          bottom: 7px;
+        }
+        box-shadow: 0 0px 3px 0px rgba(0,0,0,0.4);
+      }
+      &:hover {
+        background: rgba(0,0,0,0.15);
+      }
+      &:first-child {
+        border-radius: 5px 5px 0 0;
+      }
+      &:last-child {
+        border-radius: 0 0 5px 5px;
+      }
+    }
+  }
+}

data/templates/project/_bbuttons.scss

@@ -0,0 +1,4 @@
+// _bbuttons.scss - Taylor Stackpole
+// Import -------------------------------------------
+
+@import "bbuttons";

data/templates/project/bbuttons.html

@@ -0,0 +1,230 @@
+<!-- The structure of a dropdown should start with a div -->
+<!-- The div needs a class 'button-drop' -->
+
+<!-- Large bsimple button-drop example -->
+<div class="button-drop">
+<!-- You MUST give the button an id-->
+  <button id="one" class="bsimple large">
+    Dropdown
+  </button>
+<!-- From here, we have a simple ul tag-->
+  <ul class="drop">
+<!-- The built-in 'heads-up' class on an li tag -->
+<!-- will make the li more pronounced. -->
+    <li class="heads-up">
+      Sub-header
+    </li>
+    <li>
+      <a href="#">
+        Important
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        Not as important
+      </a>
+    </li>
+    <li class="heads-up">
+      Info about these
+    </li>
+    <li>
+      <a href="#">
+        These one
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        These two
+
+      </a>
+    </li>
+  </ul>
+</div>
+
+<!-- A button dropdown with a normal button -->
+<div class="button-drop">
+<!-- You MUST give the button in the button drop an id-->
+  <button id="two" class="bsimple">
+    Dropdown
+  </button>
+  <ul class="drop">
+    <li class="heads-up">
+      Drop-menu
+    </li>
+    <li>
+      <a href="#">
+        thing2
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        thing
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        thing2
+
+      </a>
+    </li>
+  </ul>
+</div>
+
+<!-- Small button-drop example -->
+<div class="button-drop">
+<!-- You MUST give the button in the button drop an id-->
+  <button id="three" class="bsimple small blue">
+    Small drop
+  </button>
+  <ul class="drop">
+    <li>
+      <a href="#">
+        Small thing
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        Another small thing
+
+      </a>
+    </li>
+  </ul>
+</div>
+<div class="clear">
+.button-drop
+
+<!-- Button sets! -->
+
+<!-- Each button set is stored inside a div with -->
+<!-- class button-set -->
+</div>
+<div class="button-set">
+<!-- Give a button class left to make it the left-side -->
+  <button class="bsimple small left">
+    Left
+  </button>
+<!-- Class mid will make the button a middle button -->
+  <button class="bsimple small mid">
+    Mid
+  </button>
+<!-- You can see where this is going -->
+  <button class="bsimple small mid">
+    Mid 2
+  </button>
+<!-- Finally class right will end the button set -->
+  <button class="bsimple small right">
+    Right
+  </button>
+</div>
+<div class="clear">
+.button-set.small
+
+<!-- An example with a normal sized button-set -->
+</div>
+<div class="button-set">
+  <button class="bsimple teal left">
+    Left
+  </button>
+  <button class="bsimple yellow mid">
+    Mid
+  </button>
+  <button class="bsimple red right">
+    Right
+  </button>
+</div>
+<div class="clear">
+.button-set
+
+<!-- Here is an example with the large button set -->
+</div>
+<div class="button-set">
+  <button class="bsimple large green left">
+    Left
+  </button>
+  <button class="bsimple large green mid">
+    Mid
+  </button>
+  <button class="bsimple large green right">
+    Right
+  </button>
+</div>
+<div class="clear">
+.button-set.large
+
+<!-- Creating a button with bbuttons is as simple as -->
+<!-- giving the button the class 'bsimple'. -->
+
+<!-- If you feel really froggy, you can even use the bsimple -->
+<!-- mixin inside your css file. -->
+<!-- If you don't like my pre-defined colors, (No one blames you) -->
+<!-- then pass the bsimple mixin any color you like! -->
+<!-- Refer to the scss file for the mixin. -->
+
+<!-- Make your button small by adding the class 'small' -->
+</div>
+<button class="bsimple small">
+  Content
+</button>
+<button class="bsimple blue small">
+  Content
+</button>
+<button class="bsimple teal small">
+  Content
+</button>
+<button class="bsimple green small">
+  Content
+</button>
+<button class="bsimple yellow small">
+  Content
+</button>
+<button class="bsimple red small">
+  Content
+</button>
+<div class="clear">
+button.bsimple.small
+
+</div>
+<button class="bsimple">
+  Content
+</button>
+<button class="bsimple blue">
+  Content
+</button>
+<button class="bsimple teal">
+  Content
+</button>
+<button class="bsimple green">
+  Content
+</button>
+<button class="bsimple yellow">
+  Content
+</button>
+<button class="bsimple red">
+  Content
+</button>
+<div class="clear">
+button.bsimple
+
+<!-- Or, you can make large buttons by adding the class 'large' -->
+</div>
+<button class="bsimple large">
+  Content
+</button>
+<button class="bsimple blue large">
+  Content
+</button>
+<button class="bsimple teal large">
+  Content
+</button>
+<button class="bsimple green large">
+  Content
+</button>
+<button class="bsimple yellow large">
+  Content
+</button>
+<button class="bsimple red large">
+  Content
+</button>
+<div class="clear">
+button.bsimple.large
+</div>

data/templates/project/bbuttons.js

@@ -0,0 +1,6 @@
+$(document).ready(function() {
+  $('.button-drop').click(function(event) {
+    var id = event.target.id;
+    return this.$("button[id=" + id + "] ~ ul").toggle();
+  });
+});

data/templates/project/manifest.rb

@@ -0,0 +1,16 @@
+stylesheet '_bbuttons.scss', :media => 'screen, projection'
+html 'bbuttons.html'
+javascript 'bbuttons.js'
+
+description "Simple, palpable button mixin."
+
+help %Q{
+  Installs some html, a stylesheet partial and javascript. Requires
+  jquery for the button dropdown.
+}
+
+welcome_message %Q{
+  Please refer to the bbuttons.html file to see how the markup should be
+  structured. If you want to peek into the _bbuttons.scss file, you can get a
+  look at the mixins available to you.
+}

metadata

@@ -0,0 +1,67 @@
+--- !ruby/object:Gem::Specification
+name: bbuttons
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+  prerelease: 
+platform: ruby
+authors:
+- Taylor Stackpole
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2013-06-06 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0.11'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0.11'
+description: Easy to use buttons/button-groups/button-dropdowns
+email: tay.stack@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.mkdn
+- lib/bbuttons.rb
+- stylesheets/_bbuttons.scss
+- templates/project/_bbuttons.scss
+- templates/project/manifest.rb
+- templates/project/bbuttons.html
+- templates/project/bbuttons.js
+homepage: http://www.github.com/taystack
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.23
+signing_key: 
+specification_version: 3
+summary: Simple buttons for the simple developer.
+test_files: []