minimal-devices 0.5
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.
- 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
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
@import "utilities";
|
|
2
|
+
|
|
3
|
+
.md-macbook-pro {
|
|
4
|
+
width: pxtoem(885);
|
|
5
|
+
height: pxtoem(510);
|
|
6
|
+
|
|
7
|
+
.md-lid {
|
|
8
|
+
width: pxtoem(720);
|
|
9
|
+
height: pxtoem(490);
|
|
10
|
+
margin: 0 auto;
|
|
11
|
+
position: relative;
|
|
12
|
+
border-radius: pxtoem(30);
|
|
13
|
+
border: solid pxtoem(3) #cdced1;
|
|
14
|
+
background: #131313;
|
|
15
|
+
|
|
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) ));
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.md-camera {
|
|
31
|
+
width: pxtoem(6);
|
|
32
|
+
height: pxtoem(6);
|
|
33
|
+
margin: 0 auto;
|
|
34
|
+
position: relative;
|
|
35
|
+
top: pxtoem(17);
|
|
36
|
+
background: #000;
|
|
37
|
+
border-radius: 100%;
|
|
38
|
+
box-shadow: inset 0 -1px 0 rgba(#fff, 0.25);
|
|
39
|
+
|
|
40
|
+
&:after {
|
|
41
|
+
content: "";
|
|
42
|
+
display: block;
|
|
43
|
+
width: pxtoem(2);
|
|
44
|
+
height: pxtoem(2);
|
|
45
|
+
position: absolute;
|
|
46
|
+
left: pxtoem(2);
|
|
47
|
+
top: pxtoem(1);
|
|
48
|
+
background: #353542;
|
|
49
|
+
border-radius: 100%;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.md-screen {
|
|
54
|
+
width: pxtoem(676);
|
|
55
|
+
height: pxtoem(422);
|
|
56
|
+
margin: 0 auto;
|
|
57
|
+
position: relative;
|
|
58
|
+
top: pxtoem(33);
|
|
59
|
+
background: #1d1d1d;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.md-base {
|
|
63
|
+
width: 100%;
|
|
64
|
+
height: pxtoem(15);
|
|
65
|
+
position: relative;
|
|
66
|
+
top: pxtoem(-12);
|
|
67
|
+
background: #c6c7ca;
|
|
68
|
+
|
|
69
|
+
&:after {
|
|
70
|
+
content: "";
|
|
71
|
+
display: block;
|
|
72
|
+
width: 100%;
|
|
73
|
+
height: pxtoem(8);
|
|
74
|
+
margin: 0 auto;
|
|
75
|
+
position: relative;
|
|
76
|
+
bottom: pxtoem(-3);
|
|
77
|
+
background: darken(#c6c7ca, 5%);
|
|
78
|
+
border-radius: 0 0 pxtoem(20) pxtoem(20);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
&:before {
|
|
82
|
+
content: "";
|
|
83
|
+
display: block;
|
|
84
|
+
width: pxtoem(123);
|
|
85
|
+
height: pxtoem(10);
|
|
86
|
+
margin: 0 auto;
|
|
87
|
+
position: relative;
|
|
88
|
+
background: darken(#c6c7ca, 12%);
|
|
89
|
+
border-radius: 0 0 pxtoem(10) pxtoem(10);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
$white-phone-base: #ebebe4;
|
|
2
|
+
$black-phone-base: #1b211e;
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
%device-body {
|
|
6
|
+
width: 100%;
|
|
7
|
+
height: 100%;
|
|
8
|
+
border-radius: pxtoem(60);
|
|
9
|
+
border-style: solid;
|
|
10
|
+
border-width: pxtoem(6);
|
|
11
|
+
position: relative;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
%device-screen {
|
|
15
|
+
position: relative;
|
|
16
|
+
margin: 0 auto;
|
|
17
|
+
background-color: #161616;
|
|
18
|
+
border-radius: pxtoem(4);
|
|
19
|
+
overflow: hidden;
|
|
20
|
+
box-shadow: 0 0 0px 3px #161616;
|
|
21
|
+
|
|
22
|
+
img {
|
|
23
|
+
width: 100%;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
%home-button {
|
|
28
|
+
display: block;
|
|
29
|
+
width: pxtoem(58);
|
|
30
|
+
height: pxtoem(58);
|
|
31
|
+
margin: 0 auto;
|
|
32
|
+
position: relative;
|
|
33
|
+
border-radius: 100%;
|
|
34
|
+
border: none;
|
|
35
|
+
cursor: default;
|
|
36
|
+
font-size: 100%;
|
|
37
|
+
|
|
38
|
+
&:after {
|
|
39
|
+
content: "";
|
|
40
|
+
display: block;
|
|
41
|
+
width: pxtoem(18);
|
|
42
|
+
height: pxtoem(18);
|
|
43
|
+
margin: 0 auto;
|
|
44
|
+
position: relative;
|
|
45
|
+
border-style: solid;
|
|
46
|
+
border-width: pxtoem(2);
|
|
47
|
+
border-radius: pxtoem(4);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
%front-camera {
|
|
52
|
+
width: pxtoem(14);
|
|
53
|
+
height: pxtoem(14);
|
|
54
|
+
margin: 0 auto;
|
|
55
|
+
position: relative;
|
|
56
|
+
border-radius: 100%;
|
|
57
|
+
|
|
58
|
+
&:after {
|
|
59
|
+
content: "";
|
|
60
|
+
display: block;
|
|
61
|
+
width: pxtoem(6);
|
|
62
|
+
height: pxtoem(6);
|
|
63
|
+
position: relative;
|
|
64
|
+
top: pxtoem(4);
|
|
65
|
+
left: pxtoem(4);
|
|
66
|
+
background-color: #8c8091;
|
|
67
|
+
border-radius:100%;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
// For glare
|
|
73
|
+
%glare {
|
|
74
|
+
|
|
75
|
+
&:before {
|
|
76
|
+
content: "";
|
|
77
|
+
display: block;
|
|
78
|
+
width: 50%;
|
|
79
|
+
height: 80%;
|
|
80
|
+
position: absolute;
|
|
81
|
+
top: pxtoem(12);
|
|
82
|
+
right: pxtoem(0);
|
|
83
|
+
border-radius: 0 pxtoem(50) 0 0;
|
|
84
|
+
@include background(linear-gradient( bottom left, rgba(#fff, 0) 50%, rgba(#f7f8f0, 0.025) 50%, rgba(#faf5fc, 0.08) ));
|
|
85
|
+
z-index: 100;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
// On off toggle button
|
|
90
|
+
%toggle {
|
|
91
|
+
|
|
92
|
+
&:after {
|
|
93
|
+
content: "";
|
|
94
|
+
display: block;
|
|
95
|
+
width: pxtoem(53);
|
|
96
|
+
height: pxtoem(3);
|
|
97
|
+
position: absolute;
|
|
98
|
+
right: pxtoem(58);
|
|
99
|
+
top: pxtoem(-3);
|
|
100
|
+
border-radius: pxtoem(2) pxtoem(2) 0 0;
|
|
101
|
+
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
|
|
2
|
+
@import "compass/css3";
|
|
3
|
+
|
|
4
|
+
// A function to convert a px value to em. Takes an optional context variable
|
|
5
|
+
// to change the context.
|
|
6
|
+
//
|
|
7
|
+
// eg. #box { width: pxtoem(20) }
|
|
8
|
+
//
|
|
9
|
+
// -----------------------------------------------------------------------------
|
|
10
|
+
|
|
11
|
+
@function pxtoem($px-value, $context: 16) {
|
|
12
|
+
@return #{$px-value/$context}em;
|
|
13
|
+
}
|
|
14
|
+
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<div class="md-imac">
|
|
2
|
+
<div class="md-body">
|
|
3
|
+
<div class="md-top">
|
|
4
|
+
<div class="md-camera"></div>
|
|
5
|
+
<div class="md-screen"></div>
|
|
6
|
+
</div>
|
|
7
|
+
</div>
|
|
8
|
+
|
|
9
|
+
<div class="md-base">
|
|
10
|
+
<div class="md-stand"></div>
|
|
11
|
+
<div class="md-foot"></div>
|
|
12
|
+
</div>
|
|
13
|
+
</div>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<div class="md-ipad md-white-device md-glare">
|
|
2
|
+
<div class="md-body">
|
|
3
|
+
<div class="md-front-camera"></div>
|
|
4
|
+
<div class="md-screen"></div>
|
|
5
|
+
|
|
6
|
+
<button class="md-home-button"></button>
|
|
7
|
+
</div>
|
|
8
|
+
</div>
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
<div class="md-ipad md-black-device md-glare">
|
|
12
|
+
<div class="md-body">
|
|
13
|
+
<div class="md-front-camera"></div>
|
|
14
|
+
<div class="md-screen"></div>
|
|
15
|
+
|
|
16
|
+
<button class="md-home-button"></button>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<div class="md-iphone-5 md-white-device md-glare">
|
|
2
|
+
<div class="md-body">
|
|
3
|
+
<div class="md-buttons"></div>
|
|
4
|
+
|
|
5
|
+
<div class="md-front-camera"></div>
|
|
6
|
+
<div class="md-top-speaker"></div>
|
|
7
|
+
<div class="md-screen"></div>
|
|
8
|
+
|
|
9
|
+
<button class="md-home-button"></button>
|
|
10
|
+
</div>
|
|
11
|
+
</div>
|
|
12
|
+
|
|
13
|
+
<div class="md-iphone-5 md-black-device md-glare">
|
|
14
|
+
<div class="md-body">
|
|
15
|
+
|
|
16
|
+
<div class="md-buttons"></div>
|
|
17
|
+
|
|
18
|
+
<div class="md-front-camera"></div>
|
|
19
|
+
<div class="md-top-speaker"></div>
|
|
20
|
+
<div class="md-screen"></div>
|
|
21
|
+
|
|
22
|
+
<button class="md-home-button"></button>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
data/test.html
ADDED
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>Minimal Devices</title>
|
|
6
|
+
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<section class="iphones">
|
|
10
|
+
<div class="banner">
|
|
11
|
+
<div class="iphone-5 white-device glare">
|
|
12
|
+
<div class="body">
|
|
13
|
+
|
|
14
|
+
<div class="buttons"></div>
|
|
15
|
+
|
|
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>
|
|
22
|
+
</div>
|
|
23
|
+
|
|
24
|
+
<div class="iphone-5 black-device glare">
|
|
25
|
+
<div class="body">
|
|
26
|
+
|
|
27
|
+
<div class="buttons"></div>
|
|
28
|
+
|
|
29
|
+
<div class="front-camera"></div>
|
|
30
|
+
<div class="top-speaker"></div>
|
|
31
|
+
<div class="screen"></div>
|
|
32
|
+
|
|
33
|
+
<button class="home-button"></button>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
</section>
|
|
38
|
+
|
|
39
|
+
<section class="ipads">
|
|
40
|
+
<div class="banner">
|
|
41
|
+
|
|
42
|
+
<div class="ipad white-device glare">
|
|
43
|
+
<div class="body">
|
|
44
|
+
<div class="front-camera"></div>
|
|
45
|
+
<div class="screen"></div>
|
|
46
|
+
|
|
47
|
+
<button class="home-button"></button>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
<div class="ipad black-device glare">
|
|
53
|
+
<div class="body">
|
|
54
|
+
<div class="front-camera"></div>
|
|
55
|
+
<div class="screen"></div>
|
|
56
|
+
|
|
57
|
+
<button class="home-button"></button>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
</div>
|
|
62
|
+
</section>
|
|
63
|
+
|
|
64
|
+
<section class="macbook">
|
|
65
|
+
|
|
66
|
+
<div class="banner">
|
|
67
|
+
<div class="macbook-pro">
|
|
68
|
+
<div class="lid">
|
|
69
|
+
<div class="camera"></div>
|
|
70
|
+
<div class="screen"></div>
|
|
71
|
+
</div>
|
|
72
|
+
|
|
73
|
+
<div class="base"></div>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
</section>
|
|
77
|
+
|
|
78
|
+
<section class="desktop">
|
|
79
|
+
<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>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<div class="base">
|
|
89
|
+
<div class="stand"></div>
|
|
90
|
+
<div class="foot"></div>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
</section>
|
|
95
|
+
</body>
|
|
96
|
+
</html>
|
metadata
ADDED
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: minimal-devices
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
version: '0.5'
|
|
5
|
+
prerelease:
|
|
6
|
+
platform: ruby
|
|
7
|
+
authors:
|
|
8
|
+
- Jared Hardy
|
|
9
|
+
autorequire:
|
|
10
|
+
bindir: bin
|
|
11
|
+
cert_chain: []
|
|
12
|
+
date: 2013-06-07 00:00:00.000000000 -07:00
|
|
13
|
+
default_executable:
|
|
14
|
+
dependencies:
|
|
15
|
+
- !ruby/object:Gem::Dependency
|
|
16
|
+
name: bundler
|
|
17
|
+
requirement: &70196630367320 !ruby/object:Gem::Requirement
|
|
18
|
+
none: false
|
|
19
|
+
requirements:
|
|
20
|
+
- - ~>
|
|
21
|
+
- !ruby/object:Gem::Version
|
|
22
|
+
version: '1.3'
|
|
23
|
+
type: :development
|
|
24
|
+
prerelease: false
|
|
25
|
+
version_requirements: *70196630367320
|
|
26
|
+
- !ruby/object:Gem::Dependency
|
|
27
|
+
name: rake
|
|
28
|
+
requirement: &70196630366840 !ruby/object:Gem::Requirement
|
|
29
|
+
none: false
|
|
30
|
+
requirements:
|
|
31
|
+
- - ! '>='
|
|
32
|
+
- !ruby/object:Gem::Version
|
|
33
|
+
version: '0'
|
|
34
|
+
type: :development
|
|
35
|
+
prerelease: false
|
|
36
|
+
version_requirements: *70196630366840
|
|
37
|
+
description: HTML and CSS minimal devices
|
|
38
|
+
email:
|
|
39
|
+
- jared@jaredhardy.com
|
|
40
|
+
executables: []
|
|
41
|
+
extensions: []
|
|
42
|
+
extra_rdoc_files: []
|
|
43
|
+
files:
|
|
44
|
+
- .gitignore
|
|
45
|
+
- Gemfile
|
|
46
|
+
- Gemfile.lock
|
|
47
|
+
- LICENSE.txt
|
|
48
|
+
- README.md
|
|
49
|
+
- Rakefile
|
|
50
|
+
- css-output/config.rb
|
|
51
|
+
- css-output/imac.scss
|
|
52
|
+
- css-output/ipad.scss
|
|
53
|
+
- css-output/iphone.scss
|
|
54
|
+
- css-output/macbook.scss
|
|
55
|
+
- css/imac.css
|
|
56
|
+
- css/ipad.css
|
|
57
|
+
- css/iphone.css
|
|
58
|
+
- css/macbook.css
|
|
59
|
+
- lib/minimal-devices.rb
|
|
60
|
+
- minimal-devices.gemspec
|
|
61
|
+
- pkg/minimal-devices-0.5.gem
|
|
62
|
+
- stylesheets/_minimal-devices.scss
|
|
63
|
+
- stylesheets/device/_color-variations.scss
|
|
64
|
+
- stylesheets/device/_imac.scss
|
|
65
|
+
- stylesheets/device/_ipad.scss
|
|
66
|
+
- stylesheets/device/_iphone.scss
|
|
67
|
+
- stylesheets/device/_macbook-pro.scss
|
|
68
|
+
- stylesheets/device/_minimal-devices.scss
|
|
69
|
+
- stylesheets/device/_shared-structure.scss
|
|
70
|
+
- stylesheets/device/_utilities.scss
|
|
71
|
+
- templates/device_markup/imac.html
|
|
72
|
+
- templates/device_markup/ipad.html
|
|
73
|
+
- templates/device_markup/iphone.html
|
|
74
|
+
- templates/device_markup/macbook.html
|
|
75
|
+
- test.html
|
|
76
|
+
has_rdoc: true
|
|
77
|
+
homepage: ''
|
|
78
|
+
licenses:
|
|
79
|
+
- MIT
|
|
80
|
+
post_install_message:
|
|
81
|
+
rdoc_options: []
|
|
82
|
+
require_paths:
|
|
83
|
+
- lib
|
|
84
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
85
|
+
none: false
|
|
86
|
+
requirements:
|
|
87
|
+
- - ! '>='
|
|
88
|
+
- !ruby/object:Gem::Version
|
|
89
|
+
version: '0'
|
|
90
|
+
segments:
|
|
91
|
+
- 0
|
|
92
|
+
hash: -2784933177268235574
|
|
93
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
94
|
+
none: false
|
|
95
|
+
requirements:
|
|
96
|
+
- - ! '>='
|
|
97
|
+
- !ruby/object:Gem::Version
|
|
98
|
+
version: '0'
|
|
99
|
+
segments:
|
|
100
|
+
- 0
|
|
101
|
+
hash: -2784933177268235574
|
|
102
|
+
requirements: []
|
|
103
|
+
rubyforge_project:
|
|
104
|
+
rubygems_version: 1.6.2
|
|
105
|
+
signing_key:
|
|
106
|
+
specification_version: 3
|
|
107
|
+
summary: HTML and CSS minimal devices
|
|
108
|
+
test_files: []
|