minimal-devices 0.5
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +3 -0
- data/Gemfile +4 -0
- data/Gemfile.lock +17 -0
- data/LICENSE.txt +22 -0
- data/README.md +63 -0
- data/Rakefile +1 -0
- data/css-output/config.rb +10 -0
- data/css-output/imac.scss +1 -0
- data/css-output/ipad.scss +1 -0
- data/css-output/iphone.scss +2 -0
- data/css-output/macbook.scss +1 -0
- data/css/imac.css +98 -0
- data/css/ipad.css +185 -0
- data/css/iphone.css +237 -0
- data/css/macbook.css +84 -0
- data/lib/minimal-devices.rb +12 -0
- data/minimal-devices.gemspec +23 -0
- data/pkg/minimal-devices-0.5.gem +0 -0
- data/stylesheets/_minimal-devices.scss +5 -0
- data/stylesheets/device/_color-variations.scss +98 -0
- data/stylesheets/device/_imac.scss +98 -0
- data/stylesheets/device/_ipad.scss +49 -0
- data/stylesheets/device/_iphone.scss +102 -0
- data/stylesheets/device/_macbook-pro.scss +92 -0
- data/stylesheets/device/_minimal-devices.scss +9 -0
- data/stylesheets/device/_shared-structure.scss +105 -0
- data/stylesheets/device/_utilities.scss +14 -0
- data/templates/device_markup/imac.html +13 -0
- data/templates/device_markup/ipad.html +18 -0
- data/templates/device_markup/iphone.html +24 -0
- data/templates/device_markup/macbook.html +8 -0
- data/test.html +96 -0
- metadata +108 -0
data/css/macbook.css
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
.md-macbook-pro {
|
|
2
|
+
width: 55.3125em;
|
|
3
|
+
height: 31.875em;
|
|
4
|
+
}
|
|
5
|
+
.md-macbook-pro .md-lid {
|
|
6
|
+
width: 45em;
|
|
7
|
+
height: 30.625em;
|
|
8
|
+
margin: 0 auto;
|
|
9
|
+
position: relative;
|
|
10
|
+
border-radius: 1.875em;
|
|
11
|
+
border: solid 0.1875em #cdced1;
|
|
12
|
+
background: #131313;
|
|
13
|
+
}
|
|
14
|
+
.md-macbook-pro .md-lid:after {
|
|
15
|
+
content: "";
|
|
16
|
+
display: block;
|
|
17
|
+
width: 50%;
|
|
18
|
+
height: 100%;
|
|
19
|
+
position: absolute;
|
|
20
|
+
top: 0;
|
|
21
|
+
right: 0;
|
|
22
|
+
border-radius: 0 1.25em 0 0;
|
|
23
|
+
background: -webkit-linear-gradient(bottom left, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
|
|
24
|
+
background: -moz-linear-gradient(bottom left, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
|
|
25
|
+
background: -o-linear-gradient(bottom left, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
|
|
26
|
+
background: linear-gradient(to top right, rgba(255, 255, 255, 0) 50%, rgba(247, 248, 240, 0.025) 50%, rgba(250, 245, 252, 0.08));
|
|
27
|
+
}
|
|
28
|
+
.md-macbook-pro .md-camera {
|
|
29
|
+
width: 0.375em;
|
|
30
|
+
height: 0.375em;
|
|
31
|
+
margin: 0 auto;
|
|
32
|
+
position: relative;
|
|
33
|
+
top: 1.0625em;
|
|
34
|
+
background: #000;
|
|
35
|
+
border-radius: 100%;
|
|
36
|
+
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.25);
|
|
37
|
+
}
|
|
38
|
+
.md-macbook-pro .md-camera:after {
|
|
39
|
+
content: "";
|
|
40
|
+
display: block;
|
|
41
|
+
width: 0.125em;
|
|
42
|
+
height: 0.125em;
|
|
43
|
+
position: absolute;
|
|
44
|
+
left: 0.125em;
|
|
45
|
+
top: 0.0625em;
|
|
46
|
+
background: #353542;
|
|
47
|
+
border-radius: 100%;
|
|
48
|
+
}
|
|
49
|
+
.md-macbook-pro .md-screen {
|
|
50
|
+
width: 42.25em;
|
|
51
|
+
height: 26.375em;
|
|
52
|
+
margin: 0 auto;
|
|
53
|
+
position: relative;
|
|
54
|
+
top: 2.0625em;
|
|
55
|
+
background: #1d1d1d;
|
|
56
|
+
}
|
|
57
|
+
.md-macbook-pro .md-base {
|
|
58
|
+
width: 100%;
|
|
59
|
+
height: 0.9375em;
|
|
60
|
+
position: relative;
|
|
61
|
+
top: -0.75em;
|
|
62
|
+
background: #c6c7ca;
|
|
63
|
+
}
|
|
64
|
+
.md-macbook-pro .md-base:after {
|
|
65
|
+
content: "";
|
|
66
|
+
display: block;
|
|
67
|
+
width: 100%;
|
|
68
|
+
height: 0.5em;
|
|
69
|
+
margin: 0 auto;
|
|
70
|
+
position: relative;
|
|
71
|
+
bottom: -0.1875em;
|
|
72
|
+
background: #b9babe;
|
|
73
|
+
border-radius: 0 0 1.25em 1.25em;
|
|
74
|
+
}
|
|
75
|
+
.md-macbook-pro .md-base:before {
|
|
76
|
+
content: "";
|
|
77
|
+
display: block;
|
|
78
|
+
width: 7.6875em;
|
|
79
|
+
height: 0.625em;
|
|
80
|
+
margin: 0 auto;
|
|
81
|
+
position: relative;
|
|
82
|
+
background: #a6a8ad;
|
|
83
|
+
border-radius: 0 0 0.625em 0.625em;
|
|
84
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
require 'compass'
|
|
2
|
+
|
|
3
|
+
Compass::Frameworks.register('minimal-devices',
|
|
4
|
+
:stylesheets_directory => File.join(File.dirname(__FILE__), '..', 'stylesheets'),
|
|
5
|
+
:templates_directory => File.join(File.dirname(__FILE__), '..', 'templates'))
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
module Minimal
|
|
9
|
+
module Devices
|
|
10
|
+
VERSION = "0.5"
|
|
11
|
+
end
|
|
12
|
+
end
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# coding: utf-8
|
|
2
|
+
lib = File.expand_path('../lib', __FILE__)
|
|
3
|
+
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
|
4
|
+
require 'minimal-devices'
|
|
5
|
+
|
|
6
|
+
Gem::Specification.new do |spec|
|
|
7
|
+
spec.name = "minimal-devices"
|
|
8
|
+
spec.version = Minimal::Devices::VERSION
|
|
9
|
+
spec.authors = ["Jared Hardy"]
|
|
10
|
+
spec.email = ["jared@jaredhardy.com"]
|
|
11
|
+
spec.description = %q{HTML and CSS minimal devices}
|
|
12
|
+
spec.summary = %q{HTML and CSS minimal devices}
|
|
13
|
+
spec.homepage = ""
|
|
14
|
+
spec.license = "MIT"
|
|
15
|
+
|
|
16
|
+
spec.files = `git ls-files`.split($/)
|
|
17
|
+
spec.executables = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
|
|
18
|
+
spec.test_files = spec.files.grep(%r{^(test|spec|features)/})
|
|
19
|
+
spec.require_paths = ["lib"]
|
|
20
|
+
|
|
21
|
+
spec.add_development_dependency "bundler", "~> 1.3"
|
|
22
|
+
spec.add_development_dependency "rake"
|
|
23
|
+
end
|
|
Binary file
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
// Portrait Gradients
|
|
2
|
+
%white-gradient { @include background(linear-gradient(#d0d0c5, #eeeeea)); }
|
|
3
|
+
%black-gradient { @include background(linear-gradient(#141917, #202623)); }
|
|
4
|
+
|
|
5
|
+
//Landscape Gradients
|
|
6
|
+
%white-gradient-landscape { @include background(linear-gradient(left, #d0d0c5, #eeeeea)); }
|
|
7
|
+
%black-gradient-landscape { @include background(linear-gradient(left, #141917, #202623)); }
|
|
8
|
+
|
|
9
|
+
.md-white-device {
|
|
10
|
+
.md-body {
|
|
11
|
+
background-color: $white-phone-base;
|
|
12
|
+
border-color: #f1f2eb;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.md-buttons {
|
|
16
|
+
background-color: $white-phone-base;
|
|
17
|
+
|
|
18
|
+
&:after, &:before {
|
|
19
|
+
background-color: $white-phone-base;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.md-front-camera {
|
|
24
|
+
@extend %white-gradient;
|
|
25
|
+
|
|
26
|
+
&:after { background-color: #8c8091; }
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.md-top-speaker {
|
|
30
|
+
@extend %white-gradient;
|
|
31
|
+
|
|
32
|
+
&:after { background-color: #4b414a }
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.md-home-button {
|
|
36
|
+
@extend %white-gradient;
|
|
37
|
+
|
|
38
|
+
&:after { border-color: #eff1e6; }
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&:after {
|
|
42
|
+
background: $white-phone-base;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&.md-landscape {
|
|
46
|
+
|
|
47
|
+
.home-button, .front-camera, .top-speaker {
|
|
48
|
+
@extend %white-gradient-landscape;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.md-black-device {
|
|
55
|
+
|
|
56
|
+
.md-body {
|
|
57
|
+
background-color: $black-phone-base;
|
|
58
|
+
border-color: #282e2b;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.md-buttons {
|
|
62
|
+
background-color: $black-phone-base;
|
|
63
|
+
|
|
64
|
+
&:after, &:before {
|
|
65
|
+
background-color: $black-phone-base;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.md-front-camera {
|
|
70
|
+
@extend %black-gradient;
|
|
71
|
+
|
|
72
|
+
&:after { background-color: #2c292f; }
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.md-top-speaker {
|
|
76
|
+
@extend %black-gradient;
|
|
77
|
+
|
|
78
|
+
&:after { background-color: #191616; }
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.md-home-button {
|
|
82
|
+
@extend %black-gradient;
|
|
83
|
+
|
|
84
|
+
&:after { border-color: #444a45; }
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
&:after {
|
|
89
|
+
background: $black-phone-base;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
&.md-landscape {
|
|
93
|
+
|
|
94
|
+
.home-button, .front-camera, .top-speaker {
|
|
95
|
+
@extend %black-gradient-landscape;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
@import "utilities";
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
.md-imac {
|
|
5
|
+
width: pxtoem(1000);
|
|
6
|
+
height: pxtoem(800);
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
.md-body {
|
|
10
|
+
width: 100%;
|
|
11
|
+
height: pxtoem(690);
|
|
12
|
+
background: #c6c7ca;
|
|
13
|
+
border-radius: pxtoem(30);
|
|
14
|
+
overflow: hidden;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.md-top {
|
|
18
|
+
width: 100%;
|
|
19
|
+
height: pxtoem(595);
|
|
20
|
+
background: #0f0f0f;
|
|
21
|
+
position: relative;
|
|
22
|
+
|
|
23
|
+
&: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
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.md-screen {
|
|
37
|
+
width: pxtoem(920);
|
|
38
|
+
height: pxtoem(518);
|
|
39
|
+
margin: 0 auto;
|
|
40
|
+
position: relative;
|
|
41
|
+
top: pxtoem(38);
|
|
42
|
+
background: #17171a;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.md-camera {
|
|
46
|
+
width: pxtoem(6);
|
|
47
|
+
height: pxtoem(6);
|
|
48
|
+
margin: 0 auto;
|
|
49
|
+
position: relative;
|
|
50
|
+
top: pxtoem(20);
|
|
51
|
+
background: #000;
|
|
52
|
+
border-radius: 100%;
|
|
53
|
+
box-shadow: inset 0 -1px 0 rgba(#fff, 0.25);
|
|
54
|
+
|
|
55
|
+
&:after {
|
|
56
|
+
content: "";
|
|
57
|
+
display: block;
|
|
58
|
+
width: pxtoem(2);
|
|
59
|
+
height: pxtoem(2);
|
|
60
|
+
position: absolute;
|
|
61
|
+
left: pxtoem(2);
|
|
62
|
+
top: pxtoem(1);
|
|
63
|
+
background: #353542;
|
|
64
|
+
border-radius: 100%;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.md-base {
|
|
69
|
+
width: pxtoem(308);
|
|
70
|
+
height: pxtoem(110);
|
|
71
|
+
margin: pxtoem(-9) auto;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.md-stand {
|
|
75
|
+
width: pxtoem(210);
|
|
76
|
+
height: pxtoem(98);
|
|
77
|
+
margin: 0 auto;
|
|
78
|
+
background: #cccdcf;
|
|
79
|
+
@include background(linear-gradient(darken(#cccdcf, 8%), #cccdcf 50%, lighten(#cccdcf,5%) 80%, #cccdcf, darken(#cccdcf, 5%)));
|
|
80
|
+
@include transform(perspective(pxtoem(800)) rotate3d(1, 0, 0, 30deg));
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.md-foot {
|
|
84
|
+
width: pxtoem(240);
|
|
85
|
+
height: pxtoem(50);
|
|
86
|
+
margin: 0 auto;
|
|
87
|
+
position: relative;
|
|
88
|
+
bottom: pxtoem(24);
|
|
89
|
+
border-radius: 0 0 pxtoem(10) pxtoem(10);
|
|
90
|
+
@include background(linear-gradient(darken(#cccdcf, 5%) 20%, #cccdcf));
|
|
91
|
+
@include transform(perspective(pxtoem(190)) rotate3d(1, 0, 0, 70deg));
|
|
92
|
+
box-shadow: 0 pxtoem(6) 0 darken(#cccdcf, 5%);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
}
|
|
98
|
+
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
@import "utilities";
|
|
2
|
+
@import "shared-structure";
|
|
3
|
+
|
|
4
|
+
.md-ipad {
|
|
5
|
+
width: pxtoem(854);
|
|
6
|
+
height: pxtoem(1271);
|
|
7
|
+
position: relative;
|
|
8
|
+
|
|
9
|
+
.md-body {
|
|
10
|
+
@extend %device-body;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.md-front-camera {
|
|
14
|
+
|
|
15
|
+
top: pxtoem(50);
|
|
16
|
+
@extend %front-camera;
|
|
17
|
+
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.md-screen {
|
|
21
|
+
width: pxtoem(768);
|
|
22
|
+
height: pxtoem(1024);
|
|
23
|
+
top: pxtoem(100);
|
|
24
|
+
@extend %device-screen;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.md-home-button {
|
|
28
|
+
bottom: pxtoem(-140);
|
|
29
|
+
@extend %home-button;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&.glare {
|
|
33
|
+
@extend %glare;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&.landscape {
|
|
37
|
+
@include transform3d(rotateZ(90deg));
|
|
38
|
+
|
|
39
|
+
&.glare {
|
|
40
|
+
&:before {
|
|
41
|
+
@include transform(rotateY(180deg));
|
|
42
|
+
left: pxtoem(10);
|
|
43
|
+
top: pxtoem(10);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@import "color-variations";
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
@import "utilities";
|
|
2
|
+
@import "shared-structure";
|
|
3
|
+
|
|
4
|
+
.md-iphone-5 {
|
|
5
|
+
width: pxtoem(365);
|
|
6
|
+
height: pxtoem(784);
|
|
7
|
+
position: relative;
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
.md-body {
|
|
11
|
+
@extend %device-body
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.md-front-camera {
|
|
15
|
+
top: pxtoem(20);
|
|
16
|
+
@extend %front-camera;
|
|
17
|
+
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.md-top-speaker {
|
|
21
|
+
width: pxtoem(60);
|
|
22
|
+
height: pxtoem(14);
|
|
23
|
+
margin: 0 auto;
|
|
24
|
+
position: relative;
|
|
25
|
+
top: pxtoem(36);
|
|
26
|
+
border-radius: pxtoem(50);
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
&:after {
|
|
30
|
+
content: "";
|
|
31
|
+
display: block;
|
|
32
|
+
width: pxtoem(52);
|
|
33
|
+
height: pxtoem(6);
|
|
34
|
+
margin: 0 auto;
|
|
35
|
+
position: relative;
|
|
36
|
+
top: pxtoem(4);
|
|
37
|
+
background-color: #4b414a;
|
|
38
|
+
border-radius: pxtoem(50);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.md-screen {
|
|
43
|
+
width: pxtoem(320);
|
|
44
|
+
height: pxtoem(568);
|
|
45
|
+
top: pxtoem(60);
|
|
46
|
+
@extend %device-screen;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.md-home-button {
|
|
50
|
+
bottom: pxtoem(-95);
|
|
51
|
+
@extend %home-button;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.md-buttons {
|
|
55
|
+
width: pxtoem(3);
|
|
56
|
+
height: pxtoem(30);
|
|
57
|
+
position: absolute;
|
|
58
|
+
left: pxtoem(-8);
|
|
59
|
+
top: pxtoem(95);
|
|
60
|
+
border-radius: pxtoem(2) 0 0 pxtoem(2);
|
|
61
|
+
|
|
62
|
+
&:after, &:before {
|
|
63
|
+
content: "";
|
|
64
|
+
display: block;
|
|
65
|
+
position: absolute;
|
|
66
|
+
width: pxtoem(3);
|
|
67
|
+
height: pxtoem(25);
|
|
68
|
+
border-radius: pxtoem(2) 0 0 pxtoem(2);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
&:after {
|
|
72
|
+
top: pxtoem(50);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&:before {
|
|
76
|
+
top: pxtoem(100);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
&.md-glare {
|
|
82
|
+
@extend %glare;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&.md-landscape {
|
|
86
|
+
@include transform3d(rotateZ(90deg));
|
|
87
|
+
|
|
88
|
+
&.md-glare {
|
|
89
|
+
&:before {
|
|
90
|
+
@include transform(rotateY(180deg));
|
|
91
|
+
left: pxtoem(10);
|
|
92
|
+
top: pxtoem(10);
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
@extend %toggle;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
@import "color-variations";
|
|
102
|
+
|