minimal-devices 0.5 → 0.5.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (14) hide show
  1. data/Gemfile.lock +1 -1
  2. data/README.md +53 -24
  3. data/bower.json +26 -0
  4. data/css/imac.css +1 -1
  5. data/css/ipad.css +2 -2
  6. data/css/macbook.css +1 -1
  7. data/lib/minimal-devices.rb +1 -1
  8. data/pkg/minimal-devices-0.5.gem +0 -0
  9. data/stylesheets/device/_imac.scss +12 -10
  10. data/stylesheets/device/_ipad.scss +2 -2
  11. data/stylesheets/device/_macbook-pro.scss +12 -11
  12. data/templates/device_markup/macbook.html +5 -5
  13. data/test.html +54 -43
  14. metadata +9 -8
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- minimal-devices (0.5)
4
+ minimal-devices (0.5.1)
5
5
 
6
6
  GEM
7
7
  remote: https://rubygems.org/
data/README.md CHANGED
@@ -13,51 +13,80 @@ iPad - black and white variant
13
13
  ## Mark up
14
14
  **iPhone 5**
15
15
  ```html
16
- <div class="iphone-5 white-device">
17
- <div class="body">
16
+ <div class="md-iphone-5 md-white-device md-glare">
17
+ <div class="md-body">
18
18
 
19
- <div class="buttons"></div>
19
+ <div class="md-buttons"></div>
20
20
 
21
- <div class="front-camera"></div>
22
- <div class="top-speaker"></div>
23
- <div class="screen"></div>
21
+ <div class="md-front-camera"></div>
22
+ <div class="md-top-speaker"></div>
23
+ <div class="md-screen"></div>
24
24
 
25
- <button class="home-button"></button>
25
+ <button class="md-home-button"></button>
26
26
  </div>
27
27
  </div>
28
28
 
29
- <div class="iphone-5 black-device">
30
- <div class="body">
29
+ <div class="md-iphone-5 md-black-device md-glare">
30
+ <div class="md-body">
31
31
 
32
- <div class="buttons"></div>
32
+ <div class="md-buttons"></div>
33
33
 
34
- <div class="front-camera"></div>
35
- <div class="top-speaker"></div>
36
- <div class="screen"></div>
34
+ <div class="md-front-camera"></div>
35
+ <div class="md-top-speaker"></div>
36
+ <div class="md-screen"></div>
37
37
 
38
- <button class="home-button"></button>
38
+ <button class="md-home-button"></button>
39
39
  </div>
40
40
  </div>
41
41
  ```
42
42
 
43
43
  **iPad**
44
44
  ```html
45
- <div class="ipad white-device">
46
- <div class="body">
47
- <div class="front-camera"></div>
48
- <div class="screen"></div>
45
+ <div class="md-ipad md-white-device md-glare">
46
+ <div class="md-body">
47
+ <div class="md-front-camera"></div>
48
+ <div class="md-screen"></div>
49
49
 
50
- <button class="home-button"></button>
50
+ <button class="md-home-button"></button>
51
51
  </div>
52
52
  </div>
53
53
 
54
54
 
55
- <div class="ipad black-device">
56
- <div class="body">
57
- <div class="front-camera"></div>
58
- <div class="screen"></div>
55
+ <div class="md-ipad md-black-device md-glare">
56
+ <div class="md-body">
57
+ <div class="md-front-camera"></div>
58
+ <div class="md-screen"></div>
59
59
 
60
- <button class="home-button"></button>
60
+ <button class="md-home-button"></button>
61
61
  </div>
62
62
  </div>
63
63
  ```
64
+
65
+ **Macbook Pro**
66
+ ```html
67
+ <div class="md-macbook-pro">
68
+ <div class="md-lid">
69
+ <div class="md-camera"></div>
70
+ <div class="md-screen"></div>
71
+ </div>
72
+
73
+ <div class="md-base"></div>
74
+ </div>
75
+ ```
76
+
77
+ **iMac**
78
+ <div class="md-imac">
79
+ <div class="md-body">
80
+ <div class="md-top">
81
+ <div class="md-camera"></div>
82
+ <div class="md-screen"></div>
83
+ </div>
84
+ </div>
85
+
86
+ <div class="md-base">
87
+ <div class="md-stand"></div>
88
+ <div class="md-foot"></div>
89
+ </div>
90
+ </div>
91
+
92
+
data/bower.json ADDED
@@ -0,0 +1,26 @@
1
+ {
2
+ "name": "minimal-devices",
3
+ "version": "0.5.0",
4
+ "author": "Jared Hardy",
5
+ "description": "Minimal HTML and CSS devices",
6
+ "main": [
7
+ "css/imac.css",
8
+ "css/iphone.css",
9
+ "css/ipad.css",
10
+ "css/macbook.css",
11
+ "templates/device_markup/imac.html",
12
+ "templates/device_markup/ipad.html",
13
+ "templates/device_markup/iphone.html",
14
+ "templates/device_markup/macbook.html"
15
+ ],
16
+ "ignore": [
17
+ "css-output/",
18
+ "lib/",
19
+ "pkg/",
20
+ "stylesheets/",
21
+ "Gemfile",
22
+ "Gemfile.lock",
23
+ "minimal-devices.gemspec",
24
+ "Rakefile"
25
+ ]
26
+ }
data/css/imac.css CHANGED
@@ -15,7 +15,7 @@
15
15
  background: #0f0f0f;
16
16
  position: relative;
17
17
  }
18
- .md-imac .md-top:after {
18
+ .md-imac .md-glare:after {
19
19
  content: "";
20
20
  display: block;
21
21
  width: 50%;
data/css/ipad.css CHANGED
@@ -61,7 +61,7 @@
61
61
  border-radius: 100%;
62
62
  }
63
63
 
64
- .md-ipad.glare:before {
64
+ .md-ipad.md-glare:before {
65
65
  content: "";
66
66
  display: block;
67
67
  width: 50%;
@@ -100,7 +100,7 @@
100
100
  -o-transform: rotateZ(90deg);
101
101
  transform: rotateZ(90deg);
102
102
  }
103
- .md-ipad.landscape.glare:before {
103
+ .md-ipad.landscape.md-glare:before {
104
104
  -webkit-transform: rotateY(180deg);
105
105
  -moz-transform: rotateY(180deg);
106
106
  -ms-transform: rotateY(180deg);
data/css/macbook.css CHANGED
@@ -11,7 +11,7 @@
11
11
  border: solid 0.1875em #cdced1;
12
12
  background: #131313;
13
13
  }
14
- .md-macbook-pro .md-lid:after {
14
+ .md-macbook-pro .md-glare:after {
15
15
  content: "";
16
16
  display: block;
17
17
  width: 50%;
data/lib/minimal-devices.rb CHANGED
@@ -7,6 +7,6 @@ Compass::Frameworks.register('minimal-devices',
7
7
 
8
8
  module Minimal
9
9
  module Devices
10
- VERSION = "0.5"
10
+ VERSION = "0.5.1"
11
11
  end
12
12
  end
data/pkg/minimal-devices-0.5.gem CHANGED
Binary file
data/stylesheets/device/_imac.scss CHANGED
@@ -19,18 +19,20 @@
19
19
  height: pxtoem(595);
20
20
  background: #0f0f0f;
21
21
  position: relative;
22
+ }
22
23
 
24
+ .md-glare {
23
25
  &:after {
24
- content: "";
25
- display: block;
26
- width: 50%;
27
- height: 100%;
28
- position: absolute;
29
- top: 0;
30
- right: 0;
31
- border-radius: 0 pxtoem(20) 0 0;
32
- @include background(linear-gradient( bottom left, rgba(#fff, 0) 50%, rgba(#f7f8f0, 0.025) 50%, rgba(#faf5fc, 0.08) ));
33
- }
26
+ content: "";
27
+ display: block;
28
+ width: 50%;
29
+ height: 100%;
30
+ position: absolute;
31
+ top: 0;
32
+ right: 0;
33
+ border-radius: 0 pxtoem(20) 0 0;
34
+ @include background(linear-gradient( bottom left, rgba(#fff, 0) 50%, rgba(#f7f8f0, 0.025) 50%, rgba(#faf5fc, 0.08) ));
35
+ }
34
36
  }
35
37
 
36
38
  .md-screen {
data/stylesheets/device/_ipad.scss CHANGED
@@ -29,14 +29,14 @@
29
29
  @extend %home-button;
30
30
  }
31
31
 
32
- &.glare {
32
+ &.md-glare {
33
33
  @extend %glare;
34
34
  }
35
35
 
36
36
  &.landscape {
37
37
  @include transform3d(rotateZ(90deg));
38
38
 
39
- &.glare {
39
+ &.md-glare {
40
40
  &:before {
41
41
  @include transform(rotateY(180deg));
42
42
  left: pxtoem(10);
data/stylesheets/device/_macbook-pro.scss CHANGED
@@ -12,18 +12,19 @@
12
12
  border-radius: pxtoem(30);
13
13
  border: solid pxtoem(3) #cdced1;
14
14
  background: #131313;
15
+ }
15
16
 
16
-
17
- &:after {
18
- content: "";
19
- display: block;
20
- width: 50%;
21
- height: 100%;
22
- position: absolute;
23
- top: 0;
24
- right: 0;
25
- border-radius: 0 pxtoem(20) 0 0;
26
- @include background(linear-gradient( bottom left, rgba(#fff, 0) 50%, rgba(#f7f8f0, 0.025) 50%, rgba(#faf5fc, 0.08) ));
17
+ .md-glare {
18
+ &:after {
19
+ content: "";
20
+ display: block;
21
+ width: 50%;
22
+ height: 100%;
23
+ position: absolute;
24
+ top: 0;
25
+ right: 0;
26
+ border-radius: 0 pxtoem(20) 0 0;
27
+ @include background(linear-gradient( bottom left, rgba(#fff, 0) 50%, rgba(#f7f8f0, 0.025) 50%, rgba(#faf5fc, 0.08) ));
27
28
  }
28
29
  }
29
30
 
data/templates/device_markup/macbook.html CHANGED
@@ -1,8 +1,8 @@
1
- <div class="macbook-pro">
2
- <div class="lid">
3
- <div class="camera"></div>
4
- <div class="screen"></div>
1
+ <div class="md-macbook-pro">
2
+ <div class="md-lid">
3
+ <div class="md-camera"></div>
4
+ <div class="md-screen"></div>
5
5
  </div>
6
6
 
7
- <div class="base"></div>
7
+ <div class="md-base"></div>
8
8
  </div>
data/test.html CHANGED
@@ -2,36 +2,47 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
- <title>Minimal Devices</title>
6
- <link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
5
+ <title></title>
6
+ <title>Minimal Device Test Sheet</title>
7
+ <link href="css/iphone.css" media="screen, projection" rel="stylesheet" type="text/css" />
8
+ <link href="css/ipad.css" media="screen, projection" rel="stylesheet" type="text/css" />
9
+ <link href="css/macbook.css" media="screen, projection" rel="stylesheet" type="text/css" />
10
+ <link href="css/imac.css" media="screen, projection" rel="stylesheet" type="text/css" />
11
+
12
+ <style>
13
+
14
+
15
+ .md-iphone-5, .md-ipad, .md-macbook-pro, .md-imac {
16
+ margin: 150px auto;
17
+ }
18
+ </style>
7
19
  </head>
8
20
  <body>
9
- <section class="iphones">
21
+ <section class="iphones">
10
22
  <div class="banner">
11
- <div class="iphone-5 white-device glare">
12
- <div class="body">
23
+ <div class="md-iphone-5 md-white-device md-glare">
24
+ <div class="md-body">
25
+ <div class="md-buttons"></div>
13
26
 
14
- <div class="buttons"></div>
27
+ <div class="md-front-camera"></div>
28
+ <div class="md-top-speaker"></div>
29
+ <div class="md-screen"></div>
15
30
 
16
- <div class="front-camera"></div>
17
- <div class="top-speaker"></div>
18
- <div class="screen"></div>
19
-
20
- <button class="home-button"></button>
21
- </div>
31
+ <button class="md-home-button"></button>
32
+ </div>
22
33
  </div>
23
34
 
24
- <div class="iphone-5 black-device glare">
25
- <div class="body">
35
+ <div class="md-iphone-5 md-black-device md-glare">
36
+ <div class="md-body">
26
37
 
27
- <div class="buttons"></div>
38
+ <div class="md-buttons"></div>
28
39
 
29
- <div class="front-camera"></div>
30
- <div class="top-speaker"></div>
31
- <div class="screen"></div>
40
+ <div class="md-front-camera"></div>
41
+ <div class="md-top-speaker"></div>
42
+ <div class="md-screen"></div>
32
43
 
33
- <button class="home-button"></button>
34
- </div>
44
+ <button class="md-home-button"></button>
45
+ </div>
35
46
  </div>
36
47
  </div>
37
48
  </section>
@@ -39,22 +50,22 @@
39
50
  <section class="ipads">
40
51
  <div class="banner">
41
52
 
42
- <div class="ipad white-device glare">
43
- <div class="body">
44
- <div class="front-camera"></div>
45
- <div class="screen"></div>
53
+ <div class="md-ipad md-white-device md-glare">
54
+ <div class="md-body">
55
+ <div class="md-front-camera"></div>
56
+ <div class="md-screen"></div>
46
57
 
47
- <button class="home-button"></button>
58
+ <button class="md-home-button"></button>
48
59
  </div>
49
60
  </div>
50
61
 
51
62
 
52
- <div class="ipad black-device glare">
53
- <div class="body">
54
- <div class="front-camera"></div>
55
- <div class="screen"></div>
63
+ <div class="md-ipad md-black-device md-glare">
64
+ <div class="md-body">
65
+ <div class="md-front-camera"></div>
66
+ <div class="md-screen"></div>
56
67
 
57
- <button class="home-button"></button>
68
+ <button class="md-home-button"></button>
58
69
  </div>
59
70
  </div>
60
71
 
@@ -64,30 +75,30 @@
64
75
  <section class="macbook">
65
76
 
66
77
  <div class="banner">
67
- <div class="macbook-pro">
68
- <div class="lid">
69
- <div class="camera"></div>
70
- <div class="screen"></div>
78
+ <div class="md-macbook-pro">
79
+ <div class="md-lid md-glare">
80
+ <div class="md-camera"></div>
81
+ <div class="md-screen"></div>
71
82
  </div>
72
83
 
73
- <div class="base"></div>
84
+ <div class="md-base"></div>
74
85
  </div>
75
86
  </div>
76
87
  </section>
77
88
 
78
89
  <section class="desktop">
79
90
  <div class="banner">
80
- <div class="imac">
81
- <div class="body">
82
- <div class="top">
83
- <div class="camera"></div>
84
- <div class="screen"></div>
91
+ <div class="md-imac">
92
+ <div class="md-body">
93
+ <div class="md-top md-glare">
94
+ <div class="md-camera"></div>
95
+ <div class="md-screen"></div>
85
96
  </div>
86
97
  </div>
87
98
 
88
- <div class="base">
89
- <div class="stand"></div>
90
- <div class="foot"></div>
99
+ <div class="md-base">
100
+ <div class="md-stand"></div>
101
+ <div class="md-foot"></div>
91
102
  </div>
92
103
  </div>
93
104
  </div>
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: minimal-devices
3
3
  version: !ruby/object:Gem::Version
4
- version: '0.5'
4
+ version: 0.5.1
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -9,12 +9,12 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2013-06-07 00:00:00.000000000 -07:00
12
+ date: 2013-06-09 00:00:00.000000000 -07:00
13
13
  default_executable:
14
14
  dependencies:
15
15
  - !ruby/object:Gem::Dependency
16
16
  name: bundler
17
- requirement: &70196630367320 !ruby/object:Gem::Requirement
17
+ requirement: &70100469792640 !ruby/object:Gem::Requirement
18
18
  none: false
19
19
  requirements:
20
20
  - - ~>
@@ -22,10 +22,10 @@ dependencies:
22
22
  version: '1.3'
23
23
  type: :development
24
24
  prerelease: false
25
- version_requirements: *70196630367320
25
+ version_requirements: *70100469792640
26
26
  - !ruby/object:Gem::Dependency
27
27
  name: rake
28
- requirement: &70196630366840 !ruby/object:Gem::Requirement
28
+ requirement: &70100469792160 !ruby/object:Gem::Requirement
29
29
  none: false
30
30
  requirements:
31
31
  - - ! '>='
@@ -33,7 +33,7 @@ dependencies:
33
33
  version: '0'
34
34
  type: :development
35
35
  prerelease: false
36
- version_requirements: *70196630366840
36
+ version_requirements: *70100469792160
37
37
  description: HTML and CSS minimal devices
38
38
  email:
39
39
  - jared@jaredhardy.com
@@ -47,6 +47,7 @@ files:
47
47
  - LICENSE.txt
48
48
  - README.md
49
49
  - Rakefile
50
+ - bower.json
50
51
  - css-output/config.rb
51
52
  - css-output/imac.scss
52
53
  - css-output/ipad.scss
@@ -89,7 +90,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
89
90
  version: '0'
90
91
  segments:
91
92
  - 0
92
- hash: -2784933177268235574
93
+ hash: 3075877188481008480
93
94
  required_rubygems_version: !ruby/object:Gem::Requirement
94
95
  none: false
95
96
  requirements:
@@ -98,7 +99,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
98
99
  version: '0'
99
100
  segments:
100
101
  - 0
101
- hash: -2784933177268235574
102
+ hash: 3075877188481008480
102
103
  requirements: []
103
104
  rubyforge_project:
104
105
  rubygems_version: 1.6.2