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
|
@@ -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: []
|