shibui 0.0.2.alpha → 0.0.2.alpha.2
Sign up to get free protection for your applications and to get access to all the features.
- data/Readme.md +37 -8
- data/lib/shibui/version.rb +1 -1
- data/templates/project/index.html +61 -72
- data/templates/project/manifest.rb +3 -5
- data/templates/project/sass/screen.scss +28 -0
- metadata +6 -7
- data/templates/project/input-focus-bg.png +0 -0
- data/templates/project/sass/screen.sass +0 -8
data/Readme.md
CHANGED
|
@@ -1,19 +1,48 @@
|
|
|
1
1
|
Shibui — Compass Plugin
|
|
2
2
|
=======================
|
|
3
3
|
|
|
4
|
-
The Heroku CSS styleguide as a Compass extension.
|
|
4
|
+
The Heroku web apps CSS styleguide as a Compass extension.
|
|
5
5
|
|
|
6
6
|
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.
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
Standalone Compass project
|
|
9
|
+
--------------------------
|
|
10
|
+
|
|
11
|
+
1. `(sudo) gem install shibui --pre`
|
|
12
|
+
2. `compass create <project-name> -r shibui -u shibui`
|
|
13
|
+
|
|
14
|
+
Rails 3.1 and above
|
|
15
|
+
-------------------
|
|
16
|
+
|
|
17
|
+
1. Add `gem "shibui", ">= 0.0.2.alpha"` to your Gemfile`.
|
|
18
|
+
2. `bundle install`
|
|
19
|
+
3. Require Shibui in your application stylesheet: `@import "shibui";`
|
|
20
|
+
|
|
21
|
+
Sinatra
|
|
9
22
|
-------
|
|
10
23
|
|
|
11
|
-
|
|
24
|
+
Installation instructions needed.
|
|
25
|
+
|
|
26
|
+
Documentation
|
|
27
|
+
-------------
|
|
28
|
+
|
|
29
|
+
Documentation is in the works. If you can't get it to work bug [max@heroku.com](mailto:max@heroku.com).
|
|
30
|
+
|
|
31
|
+
Local development
|
|
32
|
+
-----------------
|
|
33
|
+
|
|
34
|
+
Working on Shibui can be a little painful. Using the gem and Bundler will make you want to poke out your eyes with bycicle spokes. It is recommended to clone the Shibui repository and symlink to the stylesheets folder from within the application you are working on:
|
|
35
|
+
|
|
36
|
+
1. `git clone git@heroku.com:heroku/shibui.git`
|
|
37
|
+
2. `ln -s ~/path/to/shibui/stylesheets ~/path/to/your/app/app/assets/stylesheets/shibui-dev`
|
|
38
|
+
3. `echo "shibui" > ~/path/to/your/app/.gitignore`
|
|
12
39
|
|
|
13
|
-
|
|
40
|
+
Now you can include the Shibui development stylesheets in your application and can easily toggle between the local development version and the gem:
|
|
14
41
|
|
|
15
|
-
|
|
16
|
-
|
|
42
|
+
```
|
|
43
|
+
// When using the Shibui gem:
|
|
44
|
+
// @import "shibui";
|
|
17
45
|
|
|
18
|
-
|
|
19
|
-
|
|
46
|
+
// When working on Shibui locally:
|
|
47
|
+
@import "shibui-dev/shibui";
|
|
48
|
+
```
|
data/lib/shibui/version.rb
CHANGED
|
@@ -1,72 +1,61 @@
|
|
|
1
|
-
<!
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
</
|
|
14
|
-
|
|
15
|
-
<
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
<
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
<
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
<
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
<p>
|
|
64
|
-
<input type="text" placeholder="Text Field">
|
|
65
|
-
</p>
|
|
66
|
-
|
|
67
|
-
<p>
|
|
68
|
-
<textarea placeholder="Text Area"></textarea>
|
|
69
|
-
</p>
|
|
70
|
-
</div>
|
|
71
|
-
</body>
|
|
72
|
-
</html>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<meta charset="utf8">
|
|
3
|
+
<title>Shibui Template</title>
|
|
4
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
5
|
+
|
|
6
|
+
<link rel="stylesheet" type="text/css" href="/stylesheets/screen.css">
|
|
7
|
+
|
|
8
|
+
<div class="experimental-container">
|
|
9
|
+
<h1>Typography</h1>
|
|
10
|
+
|
|
11
|
+
<p>Shibui can pretty much style <a href="http://daringfireball.net/projects/markdown/">anything Markdown can render</a> and makes sure your page has a consistent line-height. You can learn about the markup by inspecting the elements on this page.</p>
|
|
12
|
+
|
|
13
|
+
<h2>Inline Elements</h2>
|
|
14
|
+
|
|
15
|
+
<p>You <a href="#">can link</a>, emphasize with the <strong>strong tag</strong> and the <em>em tag</em>, or wrap inline snippets of code with <code>the code tag</code>.</p>
|
|
16
|
+
|
|
17
|
+
<p>Feel free to use <code><b></code> and <code><i></code> in HTML5, but their usage has changed a bit. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
|
|
18
|
+
|
|
19
|
+
<p>Even though Markdown doesn't support <abbr title="Abbreviations">abbr</abbr>, Shibui does. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover.</p>
|
|
20
|
+
|
|
21
|
+
<h2>Block-level Elements</h2>
|
|
22
|
+
|
|
23
|
+
<p>Unlike multiple <code><br></code> tags, paragraphs are a great way to structure your copy (feel free to use a <i>single</i> <code><br></code> tag for line-breaks). You can also use other block-level tags to give meaning to your content:</p>
|
|
24
|
+
|
|
25
|
+
<h3>Lists</h3>
|
|
26
|
+
|
|
27
|
+
<ul>
|
|
28
|
+
<li>Use an unordered list for unordered information</li>
|
|
29
|
+
<li>
|
|
30
|
+
Lists may be nested
|
|
31
|
+
|
|
32
|
+
<ul>
|
|
33
|
+
<li>Child lists can be of a different type</li>
|
|
34
|
+
</ul>
|
|
35
|
+
</li>
|
|
36
|
+
</ul>
|
|
37
|
+
|
|
38
|
+
<ol>
|
|
39
|
+
<li>Use ordered lists for ordered information</li>
|
|
40
|
+
<li>Read <a href="http://daringfireball.net/projects/markdown/syntax#list">more about Markdown lists</a></li>
|
|
41
|
+
<li><a href="http://markdownr.com/">Give it a try</a></li>
|
|
42
|
+
</ol>
|
|
43
|
+
|
|
44
|
+
<dl>
|
|
45
|
+
<dt>Definition List</dt>
|
|
46
|
+
<dd>A list which consists of two parts: a term and a description.</dd>
|
|
47
|
+
</dl>
|
|
48
|
+
|
|
49
|
+
<h3>Code Blocks</h3>
|
|
50
|
+
|
|
51
|
+
<pre><code>def my_code_block
|
|
52
|
+
var = "Display code snippets with code blocks"
|
|
53
|
+
puts var
|
|
54
|
+
end</code></pre>
|
|
55
|
+
|
|
56
|
+
<p>For <code>inline code</code> see <a href="#">inline elements</a>.</p>
|
|
57
|
+
|
|
58
|
+
<hr>
|
|
59
|
+
|
|
60
|
+
<p>Horizontal rules help separate blocks of content.</p>
|
|
61
|
+
</div>
|
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
description 'Shibui Compass Gem'
|
|
2
2
|
|
|
3
|
-
stylesheet 'sass/screen.
|
|
4
|
-
|
|
5
|
-
image 'input-focus-bg.png'
|
|
3
|
+
stylesheet 'sass/screen.scss', :to => 'screen.scss', :media => "screen, projector"
|
|
6
4
|
|
|
7
5
|
html 'index.html'
|
|
8
6
|
|
|
9
7
|
help %Q{
|
|
10
8
|
|
|
11
|
-
If you need help, email
|
|
9
|
+
If you need help, email max@heroku.com."
|
|
12
10
|
|
|
13
11
|
}
|
|
14
12
|
|
|
@@ -16,4 +14,4 @@ welcome_message %Q{
|
|
|
16
14
|
|
|
17
15
|
w00t! You're using Heroku's Shibui, now go forth and craft teh awesome!
|
|
18
16
|
|
|
19
|
-
}
|
|
17
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
// This is a sample project using Shibui
|
|
2
|
+
|
|
3
|
+
// You can either import the entire Shibui library
|
|
4
|
+
// @import "shibui";
|
|
5
|
+
|
|
6
|
+
// Or only import the components you require (and their dependencies)
|
|
7
|
+
@import "shibui/config";
|
|
8
|
+
|
|
9
|
+
@import "compass";
|
|
10
|
+
@import "compass/reset";
|
|
11
|
+
|
|
12
|
+
@import "shibui/fonts";
|
|
13
|
+
@import "shibui/typography";
|
|
14
|
+
|
|
15
|
+
// This is a sample stylesheet using Shibui
|
|
16
|
+
// ----------------------------------------------------------------------------
|
|
17
|
+
|
|
18
|
+
@import "shibui/init";
|
|
19
|
+
|
|
20
|
+
body {
|
|
21
|
+
background: $shibui-content-background-color;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.experimental-container {
|
|
25
|
+
margin: 50px auto;
|
|
26
|
+
max-width: 600px;
|
|
27
|
+
padding: 0 10px;
|
|
28
|
+
}
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: shibui
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.2.alpha
|
|
4
|
+
version: 0.0.2.alpha.2
|
|
5
5
|
prerelease: 6
|
|
6
6
|
platform: ruby
|
|
7
7
|
authors:
|
|
@@ -13,7 +13,7 @@ date: 2012-05-23 00:00:00.000000000Z
|
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: sass
|
|
16
|
-
requirement: &
|
|
16
|
+
requirement: &70158035881320 !ruby/object:Gem::Requirement
|
|
17
17
|
none: false
|
|
18
18
|
requirements:
|
|
19
19
|
- - ! '>='
|
|
@@ -21,10 +21,10 @@ dependencies:
|
|
|
21
21
|
version: 3.2.0.alpha
|
|
22
22
|
type: :runtime
|
|
23
23
|
prerelease: false
|
|
24
|
-
version_requirements: *
|
|
24
|
+
version_requirements: *70158035881320
|
|
25
25
|
- !ruby/object:Gem::Dependency
|
|
26
26
|
name: compass
|
|
27
|
-
requirement: &
|
|
27
|
+
requirement: &70158035877160 !ruby/object:Gem::Requirement
|
|
28
28
|
none: false
|
|
29
29
|
requirements:
|
|
30
30
|
- - ! '>='
|
|
@@ -32,7 +32,7 @@ dependencies:
|
|
|
32
32
|
version: 0.11.5
|
|
33
33
|
type: :runtime
|
|
34
34
|
prerelease: false
|
|
35
|
-
version_requirements: *
|
|
35
|
+
version_requirements: *70158035877160
|
|
36
36
|
description: The Heroku CSS styleguide.
|
|
37
37
|
email:
|
|
38
38
|
- max@heroku.com
|
|
@@ -54,9 +54,8 @@ files:
|
|
|
54
54
|
- stylesheets/shibui/_init.scss
|
|
55
55
|
- stylesheets/shibui/_typography.scss
|
|
56
56
|
- templates/project/index.html
|
|
57
|
-
- templates/project/input-focus-bg.png
|
|
58
57
|
- templates/project/manifest.rb
|
|
59
|
-
- templates/project/sass/screen.
|
|
58
|
+
- templates/project/sass/screen.scss
|
|
60
59
|
homepage: https://github.com/heroku/shibui
|
|
61
60
|
licenses: []
|
|
62
61
|
post_install_message:
|
|
Binary file
|