bones-rails 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
data/README.md
CHANGED
@@ -1,46 +1,67 @@
|
|
1
1
|
# Bones for Rails
|
2
2
|
|
3
|
-
Bones for Rails packages
|
3
|
+
Bones for Rails packages the current build of [Bones CSS Framework](https://github.com/rocktreedesign/bones)
|
4
|
+
and inserts applicable portions of it into the asset pipeline to help streamline the
|
5
|
+
design of your application.
|
4
6
|
|
5
|
-
##
|
7
|
+
## Bones Documentation
|
6
8
|
|
7
|
-
|
9
|
+
A documentation website for Bones is in the works. For now, all documentation for the framework itself can be found
|
10
|
+
[here](https://github.com/rocktreedesign/bones/tree/master/docs).
|
8
11
|
|
9
12
|
## Getting Started
|
10
13
|
|
11
14
|
Add this line to your application's Gemfile:
|
12
15
|
|
13
|
-
|
16
|
+
```ruby
|
17
|
+
gem 'bones-rails'
|
18
|
+
```
|
14
19
|
|
15
20
|
Install using:
|
16
21
|
|
17
|
-
|
22
|
+
```bash
|
23
|
+
$ bundle install
|
24
|
+
```
|
18
25
|
|
19
26
|
Or install it to your system:
|
20
27
|
|
21
|
-
|
28
|
+
```bash
|
29
|
+
$ gem install bones-rails
|
30
|
+
```
|
31
|
+
|
32
|
+
> If you prefer to have more control over Bones, I'd suggest checking out the [SCSS method of installation](https://github.com/rocktreedesign/bones/blob/master/docs/getting-started/installation.md). This installation of Bones is optimized for use in Ruby on Rails projects.
|
22
33
|
|
23
34
|
## Usage
|
24
35
|
|
25
36
|
We can add the necesasry files to the asset pipeline by running:
|
26
37
|
|
27
|
-
|
38
|
+
```bash
|
39
|
+
$ rails g bones:install
|
40
|
+
```
|
41
|
+
|
42
|
+
The installation generator performs a number of tasks you should be aware of:
|
43
|
+
|
44
|
+
### 1. application.scss
|
28
45
|
|
29
|
-
|
46
|
+
Bones requires that you use the `.scss` extension for your application stylesheet (your manifest file). If it detects anything other than `application.scss`,
|
47
|
+
it will change the filename to `application.scss`
|
30
48
|
|
31
|
-
|
49
|
+
Once we're sure `application.scss` exists, the generator adds the following line to the top of your `application.scss` file:
|
32
50
|
|
33
|
-
|
51
|
+
```scss
|
52
|
+
@import 'bones/bones';
|
53
|
+
```
|
34
54
|
|
35
|
-
|
55
|
+
### 2. Controller
|
36
56
|
|
37
|
-
|
57
|
+
The controller (or manifest file) for Bones is `bones.scss`. This is where you configure which modules you'd like to load. First, we create a new directory:
|
58
|
+
`app/assets/stylesheets/bones`. Then we place the new configuration file into this directory: `app/assets/stylesheets/bones/bones.scss`.
|
38
59
|
|
39
|
-
###
|
60
|
+
### 3. Bones Configuration Files
|
40
61
|
|
41
|
-
|
62
|
+
Last, we add all the configuration files to a new directory: `app/assets/stylesheets/bones/bones-config`.
|
42
63
|
|
43
|
-
|
64
|
+
In this directory is where you can configure Bones to your liking and see it change when you refresh your browser.
|
44
65
|
|
45
66
|
## Contributing
|
46
67
|
|
@@ -37,63 +37,63 @@ input[type=submit], form > input[type=submit] {
|
|
37
37
|
|
38
38
|
/* Size Factors
|
39
39
|
============================ */
|
40
|
-
button.huge, a.button
|
40
|
+
button.huge, a.button-huge {
|
41
41
|
font-size: $button-sizeFactor-huge;
|
42
42
|
}
|
43
43
|
|
44
|
-
button.large, a.button
|
44
|
+
button.large, a.button-large {
|
45
45
|
font-size: $button-sizeFactor-large;
|
46
46
|
}
|
47
47
|
|
48
|
-
button.small, a.button
|
48
|
+
button.small, a.button-small {
|
49
49
|
font-size: $button-sizeFactor-small;
|
50
50
|
}
|
51
51
|
|
52
52
|
/* Colors
|
53
53
|
============================ */
|
54
|
-
button.
|
54
|
+
button.color-1, a.button-color-1 {
|
55
55
|
@include button($color-light, $color-1, $color-1-dark, $color-1-darker);
|
56
56
|
}
|
57
57
|
|
58
|
-
button.
|
58
|
+
button.color-2, a.button-color-2 {
|
59
59
|
@include button($color-light, $color-2, $color-2-dark, $color-2-darker);
|
60
60
|
}
|
61
61
|
|
62
|
-
button.
|
62
|
+
button.color-3, a.button-color-3 {
|
63
63
|
@include button($color-light, $color-3, $color-3-dark, $color-3-darker);
|
64
64
|
}
|
65
65
|
|
66
|
-
button.
|
66
|
+
button.color-4, a.button-color-4 {
|
67
67
|
@include button($color-light, $color-4, $color-4-dark, $color-4-darker);
|
68
68
|
}
|
69
69
|
|
70
|
-
button.
|
70
|
+
button.color-5, a.button-color-5 {
|
71
71
|
@include button($color-light, $color-5, $color-5-dark, $color-5-darker);
|
72
72
|
}
|
73
73
|
|
74
|
-
button.dark, a.button
|
74
|
+
button.dark, a.button-dark {
|
75
75
|
@include button($color-light, $color-dark, $color-dark-light, $color-dark-lightest);
|
76
76
|
}
|
77
77
|
|
78
|
-
button.light, a.button
|
78
|
+
button.light, a.button-light {
|
79
79
|
@include button($color-dark, $color-light-dark, $color-light-darker, $color-light-darkest);
|
80
80
|
}
|
81
81
|
|
82
|
-
button.success, a.button
|
82
|
+
button.success, a.button-success {
|
83
83
|
@include button($color-light, $color-success, $color-success-dark, $color-success-darker);
|
84
84
|
}
|
85
85
|
|
86
|
-
button.notice, a.button
|
86
|
+
button.notice, a.button-notice {
|
87
87
|
@include button($color-light, $color-warning, $color-warning-dark, $color-warning-darker);
|
88
88
|
}
|
89
89
|
|
90
|
-
button.alert, a.button
|
90
|
+
button.alert, a.button-alert {
|
91
91
|
@include button($color-light, $color-danger, $color-danger-dark, $color-danger-darker);
|
92
92
|
}
|
93
93
|
|
94
94
|
/* Block-Level
|
95
95
|
============================ */
|
96
|
-
button.block, a.button
|
96
|
+
button.block, a.button-block, input[type=submit].block, form > input[type=submit].block {
|
97
97
|
@include button($button-default-color, $button-default-background, $button-default-background-hover, $button-default-background-active);
|
98
98
|
display: block;
|
99
99
|
width: 100%;
|
@@ -110,7 +110,7 @@ button, input[type=submit], form > input[type=submit] {
|
|
110
110
|
}
|
111
111
|
}
|
112
112
|
|
113
|
-
a.button.disabled, .button
|
113
|
+
a.button.disabled, .button-disabled {
|
114
114
|
@include button($color-dark-lightest, $color-dark-lighter, $color-dark-lighter, $color-dark-lighter);
|
115
115
|
&:hover {
|
116
116
|
cursor: default;
|
data/lib/bones/rails/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: bones-rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.0.
|
4
|
+
version: 1.0.1
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2013-12-
|
12
|
+
date: 2013-12-23 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: sass
|
@@ -119,12 +119,18 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
119
119
|
- - ! '>='
|
120
120
|
- !ruby/object:Gem::Version
|
121
121
|
version: '0'
|
122
|
+
segments:
|
123
|
+
- 0
|
124
|
+
hash: -1986255092884219101
|
122
125
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
123
126
|
none: false
|
124
127
|
requirements:
|
125
128
|
- - ! '>='
|
126
129
|
- !ruby/object:Gem::Version
|
127
130
|
version: '0'
|
131
|
+
segments:
|
132
|
+
- 0
|
133
|
+
hash: -1986255092884219101
|
128
134
|
requirements: []
|
129
135
|
rubyforge_project:
|
130
136
|
rubygems_version: 1.8.23
|