mice 0.0.3 → 0.0.4
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.
- checksums.yaml +4 -4
- data/Gemfile.lock +1 -1
- data/README.md +27 -6
- data/lib/mice/version.rb +1 -1
- data/vendor/assets/stylesheets/mice/_grid.scss +32 -56
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 4a165025a485d06282dbc1b35b8651def582464a
|
|
4
|
+
data.tar.gz: a9071a73e4e56ad3735be2656523ec771301095d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: bd8c155550520d8a666cf300532c970097b514f3f3d0bfcba3cf8cdc618e01b39d9951afa91413dbcef77c6eaa33dd746b8f5bcdebf173267a1d3e9a2d9b9fe0
|
|
7
|
+
data.tar.gz: c33754cbc98c746def2fd4d9fc9e7b2c4b52952d21260d513da3fb33e2739a63cb1a79b7d499e7e10efc34d65115c9c94a3d1fa105c86e275f368d6664075720
|
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
|
@@ -1,25 +1,46 @@
|
|
|
1
1
|
# Mice
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Mice is semantic front-end framework.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
Add this line to your application's Gemfile:
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
```ruby
|
|
10
|
+
gem 'mice'
|
|
11
|
+
```
|
|
12
|
+
or
|
|
13
|
+
|
|
14
|
+
```ruby
|
|
15
|
+
gem 'mice', :git => 'git@github.com:miclle/mice.git'
|
|
16
|
+
```
|
|
10
17
|
|
|
11
18
|
And then execute:
|
|
12
19
|
|
|
13
|
-
|
|
20
|
+
`bundle install`
|
|
14
21
|
|
|
15
22
|
Or install it yourself as:
|
|
16
23
|
|
|
17
|
-
|
|
24
|
+
`$ gem install mice`
|
|
18
25
|
|
|
19
26
|
|
|
20
|
-
|
|
27
|
+
# mice with Rails
|
|
21
28
|
|
|
22
|
-
|
|
29
|
+
## CSS
|
|
30
|
+
|
|
31
|
+
Import Mice in an SCSS file (for example, `application.css.scss`) to get all of Mice's styles
|
|
32
|
+
|
|
33
|
+
```css
|
|
34
|
+
@import "mice";
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
or
|
|
38
|
+
|
|
39
|
+
```css
|
|
40
|
+
/*
|
|
41
|
+
*= require mice
|
|
42
|
+
*/
|
|
43
|
+
```
|
|
23
44
|
|
|
24
45
|
|
|
25
46
|
## HTML/CSS Style Guide
|
data/lib/mice/version.rb
CHANGED
|
@@ -25,90 +25,66 @@
|
|
|
25
25
|
|
|
26
26
|
.grid{
|
|
27
27
|
@include clearfix();
|
|
28
|
-
|
|
29
|
-
.column {
|
|
28
|
+
> .column {
|
|
30
29
|
display: block;
|
|
31
30
|
float: left;
|
|
32
31
|
|
|
33
32
|
&:first-child {
|
|
34
33
|
margin-left: 0;
|
|
35
34
|
}
|
|
35
|
+
|
|
36
|
+
&.right{
|
|
37
|
+
float: right;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&.center{
|
|
41
|
+
float: none;
|
|
42
|
+
margin-left: auto;
|
|
43
|
+
margin-right: auto;
|
|
44
|
+
}
|
|
36
45
|
}
|
|
37
46
|
}
|
|
38
47
|
|
|
39
48
|
|
|
40
|
-
@mixin column-child($
|
|
49
|
+
@mixin column-child($columns) {
|
|
41
50
|
> .column {
|
|
42
|
-
width: $
|
|
51
|
+
width: percentage(1 / $columns);
|
|
43
52
|
}
|
|
44
53
|
}
|
|
45
54
|
|
|
46
|
-
@mixin column-self($value) {
|
|
55
|
+
@mixin column-self($columns, $value) {
|
|
47
56
|
&.column {
|
|
48
|
-
width: $value;
|
|
57
|
+
width: percentage(1 / $columns * $value);
|
|
49
58
|
}
|
|
50
59
|
}
|
|
51
60
|
|
|
52
61
|
|
|
53
|
-
|
|
54
|
-
@include column-child(50%);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.grid.three{
|
|
58
|
-
@include column-child(33.3333333%);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.grid.four{
|
|
62
|
-
@include column-child(25%);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.grid.five{
|
|
66
|
-
@include column-child(20%);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.grid.six{
|
|
70
|
-
@include column-child(16.6666667%);
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.grid.seven{
|
|
74
|
-
@include column-child(14.2857143%);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.grid.eight{
|
|
78
|
-
@include column-child(12.5%);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.grid.nine{
|
|
82
|
-
@include column-child(11.1111111%);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.grid.ten{
|
|
86
|
-
@include column-child(10%);
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.grid.eleven{
|
|
90
|
-
@include column-child(9.09090909%);
|
|
91
|
-
}
|
|
62
|
+
$columns: "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve";
|
|
92
63
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
@
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
64
|
+
@for $i from 1 through length($columns) {
|
|
65
|
+
.grid.#{nth($columns, $i)} {
|
|
66
|
+
@include column-child($i + 1);
|
|
67
|
+
@for $j from 1 through $i - 1 {
|
|
68
|
+
> .#{nth($columns, $j)}{
|
|
69
|
+
@include column-self($i + 1, $j + 1);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
100
72
|
}
|
|
101
73
|
}
|
|
102
74
|
|
|
103
75
|
|
|
104
76
|
// Go full width at less than 480px
|
|
105
77
|
@media only screen and (max-width: 480px) {
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
@include column-child(
|
|
78
|
+
@for $i from 1 through length($columns) {
|
|
79
|
+
.grid.#{nth($columns, $i)} {
|
|
80
|
+
@include column-child(1);
|
|
81
|
+
@for $j from 1 through $i {
|
|
82
|
+
> .#{nth($columns, $j)}{
|
|
83
|
+
@include column-self($i + 1, $i + 1);
|
|
84
|
+
}
|
|
85
|
+
}
|
|
109
86
|
}
|
|
110
87
|
}
|
|
111
88
|
}
|
|
112
89
|
|
|
113
90
|
|
|
114
|
-
|