shibui 0.0.1.alpha

data/Readme.md

@@ -0,0 +1,52 @@
+Shibui for Compass
+==================
+
+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
+------------------
+
+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:
+
+- Use `compass watch` to generate updated stylesheets like described above.
+- Add the project folder (`sample`) to LiveReload and uncheck the option Compile SASS.
+
+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.

data/lib/shibui.rb

@@ -0,0 +1,3 @@
+require 'compass'
+
+Compass::Frameworks.register("shibui", :path => File.join(File.dirname(__FILE__), ".."))

data/stylesheets/_shibui.sass

@@ -0,0 +1,4 @@
+@import "shibui/base"
+@import "shibui/buttons"
+@import "shibui/forms"
+@import "shibui/components"

data/stylesheets/shibui/_base.sass

@@ -0,0 +1,99 @@
+@import url("https://statics.heroku.com/fonts/fonts.css")
+
+@import "shared"
+@import "compass/reset"
+
+$base-font-size:       13px !default
+$base-line-height:     18px !default
+$relative-font-sizing: false !default
+
+@import "compass/typography/vertical_rhythm"
+@include establish-baseline
+
+body
+  background: #1b1b24
+  color: #8487af
+  @include helvetica-fontstack
+  font-size: $base-font-size
+
+p
+  @include trailer
+
+  &:first-child
+    @include leader
+
+#{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
+
+  &:first-child
+    @include leader
+
+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
+
+  &:first-child
+    @include leader
+
+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
+
+  &:first-child
+    @include leader
+
+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

@@ -0,0 +1,32 @@
+@import "shared"
+
+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

@@ -0,0 +1,10 @@
+@import "shared"
+
+.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

@@ -0,0 +1,25 @@
+@import "shared"
+
+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

@@ -0,0 +1,10 @@
+@import "compass/css3"
+
+@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

data/templates/project/index.html

@@ -0,0 +1,72 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Sample Shibui Project</title>
+
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="icon" type="image/x-icon" href="//nav.heroku.com/images/logos/favicon.ico">
+
+  <link rel="stylesheet" href="stylesheets/screen.css">
+</head>
+
+<body>
+  <div class="container">
+    <div class="hero">
+      <h1>A Hero Header</h1>
+      <h2>A Subtitle in Purple</h2>
+    </div>
+
+    <h1>A Level 1 Header</h1>
+    <h2>A Level 2 Header</h2>
+    <h3>A Level 3 Header</h3>
+    <h4>A Level 4 Header</h4>
+    <h5>A Level 5 Header</h5>
+    <h6>A Level 6 Header</h6>
+
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+
+    <ul>
+      <li>An unordered list item</li>
+      <li>Another unordered list item</li>
+      <li>The last item of an unordered list</li>
+    </ul>
+
+    <ol>
+      <li>An ordered list item</li>
+      <li>Another ordered list item</li>
+      <li>The last item of an ordered list</li>
+    </ol>
+
+    <pre><code>A block of code</code></pre>
+
+    <p>
+      Something <strong>bold</strong>, and something <em>initalics</em>.
+    </p>
+
+    <hr>
+
+    <p>
+      <a href="#" class="button">A Default Button</a>
+    </p>
+
+    <p>
+      <a href="#" class="silver button">A Silver Button</a>
+    </p>
+
+    <hr>
+
+    <p>
+      <input type="text" placeholder="Text Field">
+    </p>
+
+    <p>
+      <textarea placeholder="Text Area"></textarea>
+    </p>
+  </div>
+</body>
+</html>

data/templates/project/manifest.rb

@@ -0,0 +1,19 @@
+description 'Shibui Compass Gem'
+
+stylesheet 'sass/screen.sass', :to => 'screen.sass', :media => "screen, projector"
+
+image 'input-focus-bg.png'
+
+html 'index.html'
+
+help %Q{
+
+If you need help, email Front-end at front-end@heroku.com or visit heroku.github.com/shibui"
+
+}
+
+welcome_message %Q{
+
+w00t! You're using Heroku's Shibui, now go forth and craft teh awesome!
+
+}

data/templates/project/sass/screen.sass

@@ -0,0 +1,8 @@
+@import "shibui"
+
+.container
+  @include leader($lines: 2, $property: margin)
+  margin-left: auto
+  margin-right: auto
+  @include trailer($lines: 2, $property: margin)
+  width: 640px

metadata

@@ -0,0 +1,67 @@
+--- !ruby/object:Gem::Specification
+name: shibui
+version: !ruby/object:Gem::Version
+  version: 0.0.1.alpha
+  prerelease: 6
+platform: ruby
+authors:
+- Maximilian Schoening
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-03-08 00:00:00.000000000Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: &2202158440 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 0.11.5
+  type: :runtime
+  prerelease: false
+  version_requirements: *2202158440
+description: The Heroku styleguide harnessing the power of Compass.
+email: max@heroku.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- Readme.md
+- lib/shibui.rb
+- stylesheets/_shibui.sass
+- stylesheets/shibui/_base.sass
+- stylesheets/shibui/_buttons.sass
+- stylesheets/shibui/_components.sass
+- stylesheets/shibui/_forms.sass
+- stylesheets/shibui/_shared.sass
+- templates/project/index.html
+- templates/project/input-focus-bg.png
+- templates/project/manifest.rb
+- templates/project/sass/screen.sass
+homepage: https://github.com/heroku/shibui
+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: 1.3.1
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.10
+signing_key: 
+specification_version: 3
+summary: The Heroku styleguide harnessing the power of Compass.
+test_files: []