shibui 0.0.1.1 → 0.0.2.alpha

data/.gitignore

@@ -4,15 +4,16 @@
 .config
 .sass-cache
 .yardoc
-Gemfile.lock
-InstalledFiles
 _yardoc
 coverage
 doc/
+Gemfile.lock
+InstalledFiles
 lib/bundler/man
 pkg
 rdoc
+shibui-deprecated
 spec/reports
 test/tmp
 test/version_tmp
-tmp
+tmp

data/Readme.md

@@ -1,52 +1,19 @@
-Shibui for Compass
-==================
+Shibui — Compass Plugin
+=======================
+
+The Heroku CSS styleguide as a Compass extension.
 
 To create your first project, you'll need to have the [Shibui](http://en.wikipedia.org/wiki/Shibui) gem installed, this will include all the necessary dependencies.
 
-To install locally
-------------------
+Install
+-------
 
 In Terminal:
 
-* `git clone git@github.com:heroku/shibui.git`
-* `cd shibui`
-* `sudo gem build shibui.gemspec`
-* `sudo gem install shibui-0.0.1.gem`
-
-To create your first project
-----------------------------
-
-* `cd path/to/where-you-want-new-project`
-* .scss syntax: `compass create <my_project> -r shibui --using shibui --force`
-* .sass syntax: `compass create <my_project> -r shibui --using shibui --syntax sass --force`
-
-Now you should have a new project folder created with the Shibui file structure, but with the awesome advantages of having all the css pre-processed with Sass.
-
-To add Shibui to an existing project
-------------------------------------
-
-* `cd path/to/your-compass-ready-project`
-* `require "shibui"`
-* `compass install shibui`
-
-To work on Shibui
------------------
-
-If you want to make changes to the Shibui plugin and see the effects locally follow these steps:
-
-* `mkdir shibui-dojo`
-* `cd shibui-dojo`
-* `git clone git@github.com:heroku/shibui.git`
-* `compass create sample-project -l shibui`
-* `cd sample-project`
-* `compass watch`
-
-Shibui development with LiveReload
-----------------------------------
-
-[LiveReload](http://livereload.com/) is a great way to have your browser automagically refresh when changes to your project are made. Unfortunately LiveReload will not recognize changes to partials within a Compass extension. As a workaround:
+* `sudo gem install shibui`
 
-- Use `compass watch` to generate updated stylesheets like described above.
-- Add the project folder (`sample`) to LiveReload and uncheck the option Compile SASS.
+Create a Shibui-based Compass Project
+-------------------------------------
 
-The Compass watcher will take care of generating new CSS files and LiveReload will recognize changes to the CSS files and trigger a browser reload.
+* .scss syntax: `compass create <project-name> -r shibui -u shibui`
+* .sass syntax: `compass create <project-name> -r shibui -u shibui --syntax sass`

data/lib/shibui/version.rb

@@ -1,3 +1,3 @@
 module Shibui
-  VERSION = "0.0.1.1"
-end
+  VERSION = "0.0.2.alpha"
+end

data/shibui.gemspec

@@ -12,5 +12,6 @@ Gem::Specification.new do |gem|
   gem.require_paths = ["lib"]
   gem.version       = Shibui::VERSION
 
+  gem.add_dependency "sass",    ">= 3.2.0.alpha"
   gem.add_dependency "compass", ">= 0.11.5"
 end

data/stylesheets/_shibui.scss

@@ -0,0 +1,7 @@
+@import "shibui/config"; // required
+
+@import "compass";
+@import "compass/reset"; // recommended
+
+@import "shibui/fonts";
+@import "shibui/typography";

data/stylesheets/shibui/_config.scss

@@ -0,0 +1,19 @@
+// Compass
+
+$default-border-radius: 3px;
+
+// Colors
+
+$shibui-base-text-color:    #8487af !default;
+// $shibui-base-text-color: #888 !default;
+$shibui-heading-text-color: #fff    !default;
+$shibui-link-text-color:    #9782ff !default;
+
+$shibui-body-background-color:    #1B1B24 !default;
+$shibui-content-background-color: #282936 !default;
+// $shibui-content-background-color: #1B1B24 !default;
+
+// Typography
+
+$base-font-size:   13px  !default;
+$base-line-height: 18px  !default;

data/stylesheets/shibui/_fonts.scss

@@ -1,64 +1,84 @@
-$heroku-font-host: "https://statics.herokuapp.com/fonts" !default;
+$heroku-font-host: "https://statics.herokuapp.com";
 
 @mixin font-face-src($filename, $svg-key) {
-  src: url("#{$heroku-font-host}/#{$filename}.eot?") format("eot"),
-       url("#{$heroku-font-host}/#{$filename}.woff") format("woff"),
-       url("#{$heroku-font-host}/#{$filename}.ttf") format("truetype"),
-       url("#{$heroku-font-host}/#{$filename}.svg##{$svg-key}") format("svg");
+  src: url("#{$heroku-font-host}/fonts/#{$filename}.eot?") format("eot"),
+       url("#{$heroku-font-host}/fonts/#{$filename}.woff") format("woff"),
+       url("#{$heroku-font-host}/fonts/#{$filename}.ttf") format("truetype"),
+       url("#{$heroku-font-host}/fonts/#{$filename}.svg##{$svg-key}") format("svg");
 }
 
 @font-face {
-  font-family: "CorbelBold";
-  font-weight: normal;
+  font-family: "corbel";
+  font-weight: 400;
   font-style: normal;
-  @include font-face-src(corbel-webfont, webfontlZZPxZYu);
+  @include font-face-src(corbel-webfont, webfontO0rfJpd7);
 }
 
 @font-face {
-  font-family: "CorbelRegular";
-  font-weight: normal;
+  font-family: "corbel";
+  font-weight: 700;
   font-style: normal;
-  @include font-face-src(corbel-webfont, webfontO0rfJpd7);
+  @include font-face-src(corbelbold-webfont, webfontlZZPxZYu);
 }
 
 @font-face {
-  font-family: "HybreaLight";
-  font-weight: normal;
+  font-family: "hybrea";
+  font-weight: 300;
   font-style: normal;
-  @include font-face-src(corbel-webfont, webfontHioEustJ);
+  @include font-face-src(hybrealight-webfont, webfontHioEustJ);
 }
 
 @font-face {
-  font-family: "HybreaRegular";
-  font-weight: normal;
+  font-family: "hybrea";
+  font-weight: 400;
   font-style: normal;
-  @include font-face-src(corbel-webfont, webfonto3DdN6lX);
+  @include font-face-src(hybrea-webfont, webfonto3DdN6lX);
 }
 
 @font-face {
-  font-family: "InconsolataMedium";
-  font-weight: normal;
+  font-family: "meslo";
+  font-weight: 400;
   font-style: normal;
-  @include font-face-src(corbel-webfont, InconsolataMedium);
+  @include font-face-src(meslolgs-dz-regular-webfont, MesloLGSDZRegular);
 }
 
 @font-face {
-  font-family: "MesloItalic";
-  font-weight: normal;
-  font-style: normal;
-  @include font-face-src(corbel-webfont, MesloLGSDZItalic);
+  font-family: "meslo";
+  font-weight: 400;
+  font-style: italic;
+  @include font-face-src(meslolgs-dz-italic-webfont, MesloLGSDZItalic);
 }
 
 @font-face {
-  font-family: "MesloRegular";
-  font-weight: normal;
+  font-family: "meslo";
+  font-weight: 700;
   font-style: normal;
-  @include font-face-src(corbel-webfont, MesloLGSDZRegular);
+  @include font-face-src(meslolgs-dz-bold-webfont, MesloLGSDZBold);
 }
 
-@font-face {
-  font-family: "MesloBold";
-  font-weight: normal;
-  font-style: normal;
-  @include font-face-src(corbel-webfont, MesloLGSDZBold);
+%helvetica-font-stack {
+  font-family: "helvetica neue", helvetica, arial, geneva, sans-serif;
+}
+
+%corbel-font-stack {
+  font-family: corbel, "helvetica neue", helvetica, arial, geneva, sans-serif;
+}
+
+%meslo-font-stack {
+  font-family: meslo, monaco, monospace;
+}
+
+@mixin shibui-font-size($size) {
+  @if $size == l {
+    @include adjust-font-size-to($base-font-size * 1.3, $lines: 2);
+  }
+  @else if $size == xl {
+    @include adjust-font-size-to($base-font-size * 1.5, $lines: 2);
+  }
+  @else if $size ==  xxl {
+    @include adjust-font-size-to($base-font-size * 2, $lines: 2);
+  }
+  @else if $size ==  xxxl {
+    @include adjust-font-size-to($base-font-size * 2.8, $lines: 3);
+  }
 }

data/stylesheets/shibui/_init.scss

@@ -0,0 +1 @@
+@include shibui-typography;

data/stylesheets/shibui/_typography.scss

@@ -0,0 +1,136 @@
+%shibui-recessed-background {
+  @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.02));
+  background: darken($shibui-content-background-color, 6%);
+  border: 1px solid darken($shibui-content-background-color, 8%);
+}
+
+%shibui-code-background {
+  @include border-radius($default-border-radius);
+  @extend %shibui-recessed-background;
+}
+
+%shibui-base-typography {
+  @extend %helvetica-font-stack;
+  color: $shibui-base-text-color;
+  font-size: $base-font-size;
+  line-height: $base-line-height;
+
+  #{headings(all)} {
+    @extend %corbel-font-stack;
+    color: $shibui-heading-text-color;
+  }
+
+  a {
+    &:link,
+    &:visited {
+      color: $shibui-link-text-color;
+      text-decoration: none;
+    }
+
+    &:hover,
+    &:active {
+      text-decoration: underline;
+    }
+  }
+
+  strong, b {
+    color: lighten($shibui-base-text-color, 10%);
+    font-weight: bold;
+  }
+
+  em, i {
+    color: lighten($shibui-base-text-color, 10%);
+    font-style: italic;
+  }
+
+  code {
+    @include adjust-font-size-to($base-font-size * 0.9);
+    @extend %meslo-font-stack;
+    @extend %shibui-code-background;
+    color: lighten($shibui-base-text-color, 10%);
+    padding: 0 0.2em;
+    white-space: nowrap;
+  }
+
+  abbr[title] {
+    border-bottom: 1px dotted $shibui-base-text-color;
+    color: lighten($shibui-base-text-color, 10%);
+    cursor: help;
+  }
+}
+
+%shibui-reading-typography {
+  h1 {
+    @include shibui-font-size(xxxl);
+  }
+
+  h2 {
+    @include shibui-font-size(xxl);
+  }
+
+  h3 {
+    @include shibui-font-size(xl);
+  }
+
+  h4 {
+    @include shibui-font-size(l);
+  }
+
+  p, ul, ol, dl, pre, hr {
+    @include trailer;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  ul, ol {
+    padding-left: 1.2em;
+  }
+
+  ul {
+    list-style: disc;
+  }
+
+  ol {
+    list-style: decimal;
+  }
+
+  dt {
+    color: lighten($shibui-base-text-color, 10%);
+    font-weight: bold;
+  }
+
+  pre {
+    @extend %shibui-code-background;
+    overflow: auto;
+    padding: $base-line-height * 0.5;
+
+    code {
+      @include border-radius(none);
+      @include box-shadow(none);
+      background: transparent;
+      border: none;
+      padding: 0;
+      white-space: pre-wrap;
+    }
+  }
+
+  hr {
+    @extend %shibui-recessed-background;
+    height: 1px;
+  }
+}
+
+@mixin shibui-typography($nested: false) {
+  @if $nested {
+    @extend %shibui-base-typography;
+    @extend %shibui-reading-typography;
+  }
+  @else {
+    body {
+      @extend %shibui-base-typography;
+      @extend %shibui-reading-typography;
+    }
+  }
+}

metadata

@@ -1,19 +1,30 @@
 --- !ruby/object:Gem::Specification
 name: shibui
 version: !ruby/object:Gem::Version
-  version: 0.0.1.1
-  prerelease: 
+  version: 0.0.2.alpha
+  prerelease: 6
 platform: ruby
 authors:
 - Maximilian Schoening
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-06-08 00:00:00.000000000Z
+date: 2012-05-23 00:00:00.000000000Z
 dependencies:
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: &70226566662800 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 3.2.0.alpha
+  type: :runtime
+  prerelease: false
+  version_requirements: *70226566662800
 - !ruby/object:Gem::Dependency
   name: compass
-  requirement: &70271185811680 !ruby/object:Gem::Requirement
+  requirement: &70226566650360 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -21,7 +32,7 @@ dependencies:
         version: 0.11.5
   type: :runtime
   prerelease: false
-  version_requirements: *70271185811680
+  version_requirements: *70226566650360
 description: The Heroku CSS styleguide.
 email:
 - max@heroku.com
@@ -37,13 +48,11 @@ files:
 - lib/shibui.rb
 - lib/shibui/version.rb
 - shibui.gemspec
-- stylesheets/_shibui.sass
-- stylesheets/shibui/_base.sass
-- stylesheets/shibui/_buttons.sass
-- stylesheets/shibui/_components.sass
+- stylesheets/_shibui.scss
+- stylesheets/shibui/_config.scss
 - stylesheets/shibui/_fonts.scss
-- stylesheets/shibui/_forms.sass
-- stylesheets/shibui/_shared.sass
+- stylesheets/shibui/_init.scss
+- stylesheets/shibui/_typography.scss
 - templates/project/index.html
 - templates/project/input-focus-bg.png
 - templates/project/manifest.rb
@@ -63,9 +72,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
-  - - ! '>='
+  - - ! '>'
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubyforge_project: 
 rubygems_version: 1.8.10

data/stylesheets/_shibui.sass

@@ -1,13 +0,0 @@
-$base-font-size:       13px  !default
-$base-line-height:     18px  !default
-$relative-font-sizing: false !default
-
-@import "compass"
-@import "compass/reset"
-
-@import "shibui/fonts"
-@import "shibui/shared"
-@import "shibui/base"
-@import "shibui/buttons"
-@import "shibui/forms"
-@import "shibui/components"

data/stylesheets/shibui/_base.sass

@@ -1,89 +0,0 @@
-@include establish-baseline
-
-body
-  background: #1b1b24
-  color: #8487af
-  @include helvetica-fontstack
-  font-size: $base-font-size
-
-p
-  @include trailer
-
-  &:last-child
-    margin-bottom: 0
-
-#{headings(all)}
-  color: #fff
-  @include corbel-fontstack
-
-h1
-  @include adjust-font-size-to($base-font-size * 2.8, $lines: 3)
-
-h2
-  @include adjust-font-size-to($base-font-size * 2, $lines: 2)
-
-h3
-  @include adjust-font-size-to($base-font-size * 1.5, $lines: 2)
-
-h4
-  @include adjust-font-size-to($base-font-size * 1.3, $lines: 2)
-
-h5
-  @include adjust-font-size-to($base-font-size * 1.1, $lines: 1)
-
-// Missing blockquotes
-
-ul, ol
-  @include trailer
-
-  &:last-child
-    margin-bottom: 0
-
-ul
-  list-style: disc
-  padding-left: 16px
-
-ol
-  list-style: decimal
-  padding-left: 19px
-
-pre
-  background: #111116
-  @include border-radius(3px)
-  @include box-shadow(0 1px 0 rgba(255, 255, 255, .02), 0 1px 1px rgba(0, 0, 0, .25) inset)
-  overflow: auto
-  padding: $base-line-height
-  @include trailer
-
-  &:last-child
-    margin-bottom: 0
-
-hr
-  background: #17171e
-  @include box-shadow(0 0 0 1px rgba(255, 255, 255, .02), 0 0 0 1px #101015 inset)
-  border: 0
-  height: 3px
-  @include trailer
-
-  &:last-child
-    margin-bottom: 0
-
-a
-  &:link,
-  &:visited
-    color: #9782ff
-    text-decoration: none
-
-  &:hover,
-  &:active
-    text-decoration: underline
-
-em
-  font-style: italic
-
-strong
-  font-weight: bold
-
-code
-  @include adjust-font-size-to($base-font-size * .9, $lines: 1)
-  @include meslo-fontstack

data/stylesheets/shibui/_buttons.sass

@@ -1,30 +0,0 @@
-button
-  @include reset-box-model
-
-a.button,
-button,
-input[type="submit"]
-  background: #7b5ae0
-  @include background-image(linear-gradient(top, #9372f7, #6443c9))
-  @include border-radius(40px)
-  @include box-shadow(0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(255, 255, 255, .2) inset)
-  color: #100f14
-  display: inline-block
-  font-family: inherit
-  font-size: $base-font-size
-  -webkit-font-smoothing: antialiased
-  font-weight: bold
-  line-height: normal
-  padding: .5em 1.5em
-  text-shadow: 0 1px 0 rgba(255, 255, 255, .10)
-
-  &:hover
-    cursor: pointer
-    text-decoration: none
-
-  &.silver
-    background: #0f0e13
-    @include background-image(linear-gradient(top, #e6e7e9, #afb0b4))
-    @include box-shadow(0 1px 1px rgba(0, 0, 0, .5), 0 1px 2px rgba(255, 255, 255, .75) inset)
-    color: #000
-    text-shadow: 0 1px 0 rgba(255, 255, 255, .3)

data/stylesheets/shibui/_components.sass

@@ -1,8 +0,0 @@
-.hero
-  text-align: center
-  @include leader($lines: 2, $property: margin)
-  text-transform: lowercase
-  @include trailer($lines: 2, $property: margin)
-
-  h2
-    color: #a292ff

data/stylesheets/shibui/_forms.sass

@@ -1,23 +0,0 @@
-input[type="text"],
-textarea
-  background: #0d0e13
-  border: 1px solid #000
-  @include border-radius(3px)
-  @include box-shadow(0 0 0 1px rgba(255, 255, 255, 0.02))
-  color: #f0f0ff
-  display: block
-  @include helvetica-fontstack
-  font-size: $base-font-size
-  padding: .76923076923077em .61538461538462em
-
-  &::-webkit-input-placeholder
-    color: #494b63
-
-  &:focus
-    @include background(image-url("input-focus-bg.png") bottom repeat-x, linear-gradient(bottom, #253e5c, #070812 50%))
-    border-color: #000
-    color: #a5d1f8
-    outline: none
-
-    &::-webkit-input-placeholder
-      color: #68829d

data/stylesheets/shibui/_shared.sass

@@ -1,8 +0,0 @@
-@mixin helvetica-fontstack()
-  font-family: "helvetica neue", helvetica, arial, geneva, sans-serif
-
-@mixin corbel-fontstack()
-  font-family: "CorbelRegular", "helvetica neue", helvetica, arial, geneva, sans-serif
-
-@mixin meslo-fontstack()
-  font-family: "MesloRegular", monaco, monospace