bones-rails 1.0.0 → 1.0.1
Sign up to get free protection for your applications and to get access to all the features.
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
|