mice 0.0.3 → 0.0.4
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
-
|