smock 0.1.65 → 0.1.66
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/Gemfile.lock +1 -1
- data/app/assets/stylesheets/includes/_images.sass +4 -0
- data/app/assets/stylesheets/includes/_layouts.sass +11 -0
- data/app/assets/stylesheets/includes/_molecules.sass +12 -0
- data/app/assets/stylesheets/includes/_typography.sass +5 -1
- data/app/assets/stylesheets/smock.sass +2 -1
- data/examples/atoms.html +10 -1
- data/examples/molecules.html +41 -0
- data/examples/organisims.html +35 -0
- data/examples/pages/testimonials.html +497 -0
- data/index.html +2 -0
- metadata +6 -3
data/Gemfile.lock
CHANGED
@@ -0,0 +1,12 @@
|
|
1
|
+
.avatar-caption
|
2
|
+
+typecsset-font-size($first-font-size)
|
3
|
+
clear: both
|
4
|
+
.avatar-caption__main
|
5
|
+
margin: 0
|
6
|
+
.avatar-caption__secondary
|
7
|
+
margin: 0
|
8
|
+
color: $gray
|
9
|
+
|
10
|
+
//this needs to be fixed, or removed.
|
11
|
+
.avatar-caption__2of12col-image
|
12
|
+
+space(padding-top, 0.6)
|
@@ -43,7 +43,6 @@ cite
|
|
43
43
|
+typecsset-font-size($base-font-size)
|
44
44
|
font-family: $font-stack-main
|
45
45
|
|
46
|
-
|
47
46
|
.paragraph--heading
|
48
47
|
+typecsset-font-size($first-font-size)
|
49
48
|
+space(margin-bottom)
|
@@ -52,6 +51,11 @@ cite
|
|
52
51
|
+typecsset-font-size($first-font-size)
|
53
52
|
.paragraph--no-margin
|
54
53
|
margin-bottom: 0
|
54
|
+
.paragraph--with-aside
|
55
|
+
+clearfix
|
56
|
+
.paragraph__large-image__heading
|
57
|
+
+space(margin-top)
|
58
|
+
|
55
59
|
.heading--mast
|
56
60
|
+space(margin-bottom, 2)
|
57
61
|
+space(margin-top, 2)
|
@@ -19,6 +19,7 @@
|
|
19
19
|
@import "includes/icons"
|
20
20
|
@import "includes/forms"
|
21
21
|
@import "includes/layouts"
|
22
|
+
@import "includes/molecules"
|
22
23
|
|
23
24
|
@import "modules/am_grid"
|
24
25
|
@import "modules/styleguide"
|
@@ -149,7 +150,7 @@
|
|
149
150
|
.button--muted
|
150
151
|
+secondary-button($orange)
|
151
152
|
|
152
|
-
.button
|
153
|
+
.button[disabled]
|
153
154
|
+button($gray-light)
|
154
155
|
|
155
156
|
.button--large, .button--large:disabled
|
data/examples/atoms.html
CHANGED
@@ -104,8 +104,11 @@
|
|
104
104
|
<section class="style-group">
|
105
105
|
<h3>Buttons</h3>
|
106
106
|
<a href="#" class="button">Standard Button</a>
|
107
|
+
<br/>
|
107
108
|
<a href="#" class="button button--muted">Muted Button</a>
|
108
|
-
<
|
109
|
+
<br/>
|
110
|
+
<a href="#" class="button" disabled>Disabled Button</a>
|
111
|
+
<br/>
|
109
112
|
</section>
|
110
113
|
|
111
114
|
<section class="style-group">
|
@@ -144,6 +147,12 @@
|
|
144
147
|
<p>This is a paragraph with <a href="#">A basic link</a> inside of it.</p>
|
145
148
|
</div>
|
146
149
|
|
150
|
+
<div class="style-group__example">
|
151
|
+
<strong class="style-group__example__label">Horizontal Rule</strong>
|
152
|
+
|
153
|
+
<hr />
|
154
|
+
</div>
|
155
|
+
|
147
156
|
<div class="style-group__example">
|
148
157
|
<strong class="style-group__example__label">Avatar</strong>
|
149
158
|
|
@@ -0,0 +1,41 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<!--[if lt IE 7]>
|
3
|
+
<html lang="en" ng-app="moodBoard" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
4
|
+
<!--[if IE 7]>
|
5
|
+
<html lang="en" ng-app="moodBoard" class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
6
|
+
<!--[if IE 8]>
|
7
|
+
<html lang="en" ng-app="moodBoard" class="no-js lt-ie9"> <![endif]-->
|
8
|
+
<!--[if gt IE 8]><!-->
|
9
|
+
<html lang="en" class="no-js">
|
10
|
+
<!--<![endif]-->
|
11
|
+
<head>
|
12
|
+
<meta charset="utf-8">
|
13
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
14
|
+
<title>Landing Page</title>
|
15
|
+
<meta name="description" content="">
|
16
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
17
|
+
|
18
|
+
<link rel="stylesheet" href="../smock.css"/>
|
19
|
+
</head>
|
20
|
+
|
21
|
+
<body am-grid>
|
22
|
+
|
23
|
+
<section class="classification">
|
24
|
+
<section class="style-group">
|
25
|
+
<h3>Text</h3>
|
26
|
+
|
27
|
+
<strong class="style-group__example__label">Avatar Caption</strong>
|
28
|
+
<div class="avatar-caption">
|
29
|
+
<p class="avatar-caption__main">Main Caption</p>
|
30
|
+
<p class="avatar-caption__secondary">Secondary Caption</p>
|
31
|
+
</div>
|
32
|
+
|
33
|
+
<br/>
|
34
|
+
|
35
|
+
<strong class="style-group__example__label">Large image heading</strong>
|
36
|
+
<p class="paragraph--bigger paragraph__large-avatar__heading"><a href="#">Professional Logo Design</a> for $150 by <a href="#">Brandbusters</a></p>
|
37
|
+
</section>
|
38
|
+
|
39
|
+
</section> <!-- end .classification -->
|
40
|
+
</body>
|
41
|
+
</html>
|
data/examples/organisims.html
CHANGED
@@ -89,6 +89,41 @@
|
|
89
89
|
</blockquote>
|
90
90
|
</div>
|
91
91
|
</section>
|
92
|
+
|
93
|
+
|
94
|
+
<section class="style-group">
|
95
|
+
<h3>Text</h3>
|
96
|
+
|
97
|
+
<strong class="style-group__example__label">Paragraphs with image aside</strong>
|
98
|
+
<article class="paragraph--with-aside">
|
99
|
+
<div class="paragraph__content--aside-sibling" am-grid-col="l:9">
|
100
|
+
<p class="paragraph--heading">How Brandbusters helped Keegan</p>
|
101
|
+
<p>"When designing logos we always look for simple geometric solutions,
|
102
|
+
in this case we started with a circle and then reduced it to form a 'C'
|
103
|
+
to match the company name 'Creat'd'. Since their name makes you think
|
104
|
+
of art and design, we initially tried designing the 'C' as a curved
|
105
|
+
pencil or brush. But wanted something a bit stronger. We found
|
106
|
+
inspiration in a color palette and settled on the design you see
|
107
|
+
now.</p>
|
108
|
+
<p>
|
109
|
+
This was first version and we liked it, so we uploaded it to see the
|
110
|
+
client's reaction. They were very impressed and accepted the work! This
|
111
|
+
job was fantastic as the client had a great name for their business and
|
112
|
+
they gave us a really good brief at the beginning. Jobs like this have
|
113
|
+
us thinking about leaving our full-time jobs so we can continue on
|
114
|
+
Envato Studio as successful freelance designers.</p>
|
115
|
+
</div>
|
116
|
+
<div class="paragraph__aside--content-sibling" am-grid-col="l:pre1 l:2">
|
117
|
+
<div class="avatar" am-grid-col="l:2:2">
|
118
|
+
<img class="avatar__image" src="http://placehold.it/220x220" alt="300x300 Placeholder" />
|
119
|
+
</div>
|
120
|
+
<aside class="avatar-caption avatar-caption__2of12col-image">
|
121
|
+
<p class="avatar-caption__main">Brandbusters</p>
|
122
|
+
<p class="avatar-caption__secondary">Logo Designer</p>
|
123
|
+
</aside>
|
124
|
+
</div>
|
125
|
+
</article>
|
126
|
+
</section>
|
92
127
|
</section> <!-- end .classification -->
|
93
128
|
</body>
|
94
129
|
</html>
|
@@ -0,0 +1,497 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<!--[if lt IE 7]> <html lang="en" ng-app="moodBoard" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
3
|
+
<!--[if IE 7]> <html lang="en" ng-app="moodBoard" class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
4
|
+
<!--[if IE 8]> <html lang="en" ng-app="moodBoard" class="no-js lt-ie9"> <![endif]-->
|
5
|
+
<!--[if gt IE 8]><!-->
|
6
|
+
<html lang="en" class="no-js">
|
7
|
+
<!--<![endif]-->
|
8
|
+
<head>
|
9
|
+
<meta charset="utf-8">
|
10
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
11
|
+
<title>Landing Page</title>
|
12
|
+
<meta name="description" content="">
|
13
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
14
|
+
|
15
|
+
<link rel="stylesheet" href="../../smock.css" />
|
16
|
+
<link rel="stylesheet" href="../../svg_images.css" />
|
17
|
+
</head>
|
18
|
+
<body am-grid>
|
19
|
+
|
20
|
+
|
21
|
+
<header class="header">
|
22
|
+
<div class="container">
|
23
|
+
<a class="header__logo svg__logo" href="https://studio-app.envato.com/smock/examples/">Envato Studio</a>
|
24
|
+
|
25
|
+
<nav class="header__categories">
|
26
|
+
<strong class="header__categories__label">Categories
|
27
|
+
<div class="header__categories__down-arrow hot-icon__arrow-down"></div>
|
28
|
+
</strong>
|
29
|
+
<ul class="header__categories__dropdown__top-level">
|
30
|
+
<li class="header__categories__dropdown__top-level__category" data-submenu-id="business-online-marketing">
|
31
|
+
<a class="header__categories__dropdown__top-level__link"
|
32
|
+
href="https://studio-app.envato.com/smock/examples/explore/business-online-marketing">Business & Online Marketing</a>
|
33
|
+
<ul class="header__categories__dropdown__subcategories" id="business-online-marketing">
|
34
|
+
<li class="header__categories__dropdown__subcategories__category">
|
35
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
36
|
+
href="https://studio-app.envato.com/smock/examples/explore/social-media-design">Social Media Design</a>
|
37
|
+
</li>
|
38
|
+
<li class="header__categories__dropdown__subcategories__category">
|
39
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
40
|
+
href="https://studio-app.envato.com/smock/examples/explore/infographic-design">Infographic Design</a>
|
41
|
+
</li>
|
42
|
+
<li class="header__categories__dropdown__subcategories__category">
|
43
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
44
|
+
href="https://studio-app.envato.com/smock/examples/explore/web-banner-design">Web Banner Ad Design</a>
|
45
|
+
</li>
|
46
|
+
<li class="header__categories__dropdown__subcategories__category">
|
47
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
48
|
+
href="https://studio-app.envato.com/smock/examples/explore/presentation-design">Presentation Design</a>
|
49
|
+
</li>
|
50
|
+
<li class="header__categories__dropdown__subcategories__category">
|
51
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
52
|
+
href="https://studio-app.envato.com/smock/examples/explore/business-card-design">Business Card Design</a>
|
53
|
+
</li>
|
54
|
+
<li class="header__categories__dropdown__subcategories__category">
|
55
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
56
|
+
href="https://studio-app.envato.com/smock/examples/explore/stationery-design">Stationery Design</a>
|
57
|
+
</li>
|
58
|
+
</ul>
|
59
|
+
</li>
|
60
|
+
<li class="header__categories__dropdown__top-level__category" data-submenu-id="mobile-apps">
|
61
|
+
<a class="header__categories__dropdown__top-level__link" href="https://studio-app.envato.com/smock/examples/explore/mobile-apps">Mobile
|
62
|
+
& Apps</a>
|
63
|
+
<ul class="header__categories__dropdown__subcategories" id="mobile-apps">
|
64
|
+
<li class="header__categories__dropdown__subcategories__category">
|
65
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
66
|
+
href="https://studio-app.envato.com/smock/examples/explore/app-design">App Design</a>
|
67
|
+
</li>
|
68
|
+
<li class="header__categories__dropdown__subcategories__category">
|
69
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
70
|
+
href="https://studio-app.envato.com/smock/examples/explore/app-development">App Development</a>
|
71
|
+
</li>
|
72
|
+
<li class="header__categories__dropdown__subcategories__category">
|
73
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
74
|
+
href="https://studio-app.envato.com/smock/examples/explore/mobile-design-development">Mobile Design & Development</a>
|
75
|
+
</li>
|
76
|
+
</ul>
|
77
|
+
</li>
|
78
|
+
<li class="header__categories__dropdown__top-level__category" data-submenu-id="ecommerce-cms-development">
|
79
|
+
<a class="header__categories__dropdown__top-level__link"
|
80
|
+
href="https://studio-app.envato.com/smock/examples/explore/ecommerce-cms-development">Ecommerce & CMS Development</a>
|
81
|
+
<ul class="header__categories__dropdown__subcategories" id="ecommerce-cms-development">
|
82
|
+
<li class="header__categories__dropdown__subcategories__category">
|
83
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
84
|
+
href="https://studio-app.envato.com/smock/examples/explore/drupal-development">Drupal</a>
|
85
|
+
</li>
|
86
|
+
<li class="header__categories__dropdown__subcategories__category">
|
87
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
88
|
+
href="https://studio-app.envato.com/smock/examples/explore/joomla-development">Joomla</a>
|
89
|
+
</li>
|
90
|
+
<li class="header__categories__dropdown__subcategories__category">
|
91
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
92
|
+
href="https://studio-app.envato.com/smock/examples/explore/online-shopping">Online Shopping</a>
|
93
|
+
</li>
|
94
|
+
<li class="header__categories__dropdown__subcategories__category">
|
95
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
96
|
+
href="https://studio-app.envato.com/smock/examples/explore/shopify-development">Shopify</a>
|
97
|
+
</li>
|
98
|
+
<li class="header__categories__dropdown__subcategories__category">
|
99
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
100
|
+
href="https://studio-app.envato.com/smock/examples/explore/magento-development">Magento</a>
|
101
|
+
</li>
|
102
|
+
<li class="header__categories__dropdown__subcategories__category">
|
103
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
104
|
+
href="https://studio-app.envato.com/smock/examples/explore/opencart-development">OpenCart</a>
|
105
|
+
</li>
|
106
|
+
<li class="header__categories__dropdown__subcategories__category">
|
107
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
108
|
+
href="https://studio-app.envato.com/smock/examples/explore/woocommerce">WooCommerce</a>
|
109
|
+
</li>
|
110
|
+
<li class="header__categories__dropdown__subcategories__category">
|
111
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
112
|
+
href="https://studio-app.envato.com/smock/examples/explore/cms-other">CMS Other</a>
|
113
|
+
</li>
|
114
|
+
</ul>
|
115
|
+
</li>
|
116
|
+
<li class="header__categories__dropdown__top-level__category" data-submenu-id="websites-programming">
|
117
|
+
<a class="header__categories__dropdown__top-level__link"
|
118
|
+
href="https://studio-app.envato.com/smock/examples/explore/websites-programming">Websites & Programming</a>
|
119
|
+
<ul class="header__categories__dropdown__subcategories" id="websites-programming">
|
120
|
+
<li class="header__categories__dropdown__subcategories__category">
|
121
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
122
|
+
href="https://studio-app.envato.com/smock/examples/explore/new-website">New Website Design & Development</a>
|
123
|
+
</li>
|
124
|
+
<li class="header__categories__dropdown__subcategories__category">
|
125
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
126
|
+
href="https://studio-app.envato.com/smock/examples/explore/landing-page-design-development">Landing Page Design &
|
127
|
+
Development</a>
|
128
|
+
</li>
|
129
|
+
<li class="header__categories__dropdown__subcategories__category">
|
130
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
131
|
+
href="https://studio-app.envato.com/smock/examples/explore/web-components">Web Components</a>
|
132
|
+
</li>
|
133
|
+
<li class="header__categories__dropdown__subcategories__category">
|
134
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
135
|
+
href="https://studio-app.envato.com/smock/examples/explore/psd-to-html">PSD to HTML</a>
|
136
|
+
</li>
|
137
|
+
<li class="header__categories__dropdown__subcategories__category">
|
138
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
139
|
+
href="https://studio-app.envato.com/smock/examples/explore/email-design-development">Email Design & Development</a>
|
140
|
+
</li>
|
141
|
+
<li class="header__categories__dropdown__subcategories__category">
|
142
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
143
|
+
href="https://studio-app.envato.com/smock/examples/explore/bug-fixes">Bug Fixes</a>
|
144
|
+
</li>
|
145
|
+
<li class="header__categories__dropdown__subcategories__category">
|
146
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
147
|
+
href="https://studio-app.envato.com/smock/examples/explore/website-customization">Website Customization & Updates</a>
|
148
|
+
</li>
|
149
|
+
<li class="header__categories__dropdown__subcategories__category">
|
150
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
151
|
+
href="https://studio-app.envato.com/smock/examples/explore/php-development">PHP</a>
|
152
|
+
</li>
|
153
|
+
<li class="header__categories__dropdown__subcategories__category">
|
154
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
155
|
+
href="https://studio-app.envato.com/smock/examples/explore/server-admin">Server Admin</a>
|
156
|
+
</li>
|
157
|
+
</ul>
|
158
|
+
</li>
|
159
|
+
<li class="header__categories__dropdown__top-level__category" data-submenu-id="design-graphics">
|
160
|
+
<a class="header__categories__dropdown__top-level__link" href="https://studio-app.envato.com/smock/examples/explore/design-graphics">Design
|
161
|
+
& Graphics</a>
|
162
|
+
<ul class="header__categories__dropdown__subcategories" id="design-graphics">
|
163
|
+
<li class="header__categories__dropdown__subcategories__category">
|
164
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
165
|
+
href="https://studio-app.envato.com/smock/examples/explore/3d-design-modeling">3D Design & Modeling</a>
|
166
|
+
</li>
|
167
|
+
<li class="header__categories__dropdown__subcategories__category">
|
168
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
169
|
+
href="https://studio-app.envato.com/smock/examples/explore/photo-editing">Photo Editing</a>
|
170
|
+
</li>
|
171
|
+
<li class="header__categories__dropdown__subcategories__category">
|
172
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
173
|
+
href="https://studio-app.envato.com/smock/examples/explore/drawing-sketching">Drawing & Sketching</a>
|
174
|
+
</li>
|
175
|
+
<li class="header__categories__dropdown__subcategories__category">
|
176
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
177
|
+
href="https://studio-app.envato.com/smock/examples/explore/vector-illustration">Vector Illustration</a>
|
178
|
+
</li>
|
179
|
+
<li class="header__categories__dropdown__subcategories__category">
|
180
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
181
|
+
href="https://studio-app.envato.com/smock/examples/explore/caricatures-cartoon-design">Caricatures & Cartoon Design</a>
|
182
|
+
</li>
|
183
|
+
<li class="header__categories__dropdown__subcategories__category">
|
184
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
185
|
+
href="https://studio-app.envato.com/smock/examples/explore/digital-publishing">eBooks & Digital Publishing</a>
|
186
|
+
</li>
|
187
|
+
<li class="header__categories__dropdown__subcategories__category">
|
188
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
189
|
+
href="https://studio-app.envato.com/smock/examples/explore/invitation-design">Invitation Design</a>
|
190
|
+
</li>
|
191
|
+
<li class="header__categories__dropdown__subcategories__category">
|
192
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
193
|
+
href="https://studio-app.envato.com/smock/examples/explore/t-shirt-apparel-design">T-Shirt & Apparel Design</a>
|
194
|
+
</li>
|
195
|
+
<li class="header__categories__dropdown__subcategories__category">
|
196
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
197
|
+
href="https://studio-app.envato.com/smock/examples/explore/lettering-calligraphy">Lettering & Calligraphy</a>
|
198
|
+
</li>
|
199
|
+
<li class="header__categories__dropdown__subcategories__category">
|
200
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
201
|
+
href="https://studio-app.envato.com/smock/examples/explore/icon-set-design">Icon Set Design</a>
|
202
|
+
</li>
|
203
|
+
<li class="header__categories__dropdown__subcategories__category">
|
204
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
205
|
+
href="https://studio-app.envato.com/smock/examples/explore/customize-graphics">Customize Graphics</a>
|
206
|
+
</li>
|
207
|
+
<li class="header__categories__dropdown__subcategories__category">
|
208
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
209
|
+
href="https://studio-app.envato.com/smock/examples/explore/app-icon-design">App Icon Design</a>
|
210
|
+
</li>
|
211
|
+
<li class="header__categories__dropdown__subcategories__category">
|
212
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
213
|
+
href="https://studio-app.envato.com/smock/examples/explore/poster-flyer-design">Poster & Flyer Design</a>
|
214
|
+
</li>
|
215
|
+
<li class="header__categories__dropdown__subcategories__category">
|
216
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
217
|
+
href="https://studio-app.envato.com/smock/examples/explore/brochure-design">Brochure Design</a>
|
218
|
+
</li>
|
219
|
+
<li class="header__categories__dropdown__subcategories__category">
|
220
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
221
|
+
href="https://studio-app.envato.com/smock/examples/explore/design-graphics-other">Other</a>
|
222
|
+
</li>
|
223
|
+
</ul>
|
224
|
+
</li>
|
225
|
+
<li class="header__categories__dropdown__top-level__category" data-submenu-id="wordpress">
|
226
|
+
<a class="header__categories__dropdown__top-level__link" href="./explore_files/explore.html">WordPress</a>
|
227
|
+
<ul class="header__categories__dropdown__subcategories" id="wordpress">
|
228
|
+
<li class="header__categories__dropdown__subcategories__category">
|
229
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
230
|
+
href="https://studio-app.envato.com/smock/examples/explore/wordpress-installation">WordPress Installation</a>
|
231
|
+
</li>
|
232
|
+
<li class="header__categories__dropdown__subcategories__category">
|
233
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
234
|
+
href="https://studio-app.envato.com/smock/examples/explore/wordpress-plug-ins">WordPress Plug-ins</a>
|
235
|
+
</li>
|
236
|
+
<li class="header__categories__dropdown__subcategories__category">
|
237
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
238
|
+
href="https://studio-app.envato.com/smock/examples/explore/wordpress-customization">WordPress Customization</a>
|
239
|
+
</li>
|
240
|
+
<li class="header__categories__dropdown__subcategories__category">
|
241
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
242
|
+
href="https://studio-app.envato.com/smock/examples/explore/website-to-wordpress">Website to WordPress</a>
|
243
|
+
</li>
|
244
|
+
<li class="header__categories__dropdown__subcategories__category">
|
245
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
246
|
+
href="https://studio-app.envato.com/smock/examples/explore/psd-to-wordpress">PSD to WordPress</a>
|
247
|
+
</li>
|
248
|
+
</ul>
|
249
|
+
</li>
|
250
|
+
<li class="header__categories__dropdown__top-level__category" data-submenu-id="logo-design-branding">
|
251
|
+
<a class="header__categories__dropdown__top-level__link"
|
252
|
+
href="https://studio-app.envato.com/smock/examples/explore/logo-design-branding">Logo Design & Branding</a>
|
253
|
+
<ul class="header__categories__dropdown__subcategories" id="logo-design-branding">
|
254
|
+
<li class="header__categories__dropdown__subcategories__category">
|
255
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
256
|
+
href="https://studio-app.envato.com/smock/examples/explore/logo-design">Logo Design</a>
|
257
|
+
</li>
|
258
|
+
<li class="header__categories__dropdown__subcategories__category">
|
259
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
260
|
+
href="https://studio-app.envato.com/smock/examples/explore/logo-customization">Logo Customization</a>
|
261
|
+
</li>
|
262
|
+
</ul>
|
263
|
+
</li>
|
264
|
+
<li class="header__categories__dropdown__top-level__category" data-submenu-id="video-animation">
|
265
|
+
<a class="header__categories__dropdown__top-level__link" href="https://studio-app.envato.com/smock/examples/explore/video-animation">Video
|
266
|
+
& Animation</a>
|
267
|
+
<ul class="header__categories__dropdown__subcategories" id="video-animation">
|
268
|
+
<li class="header__categories__dropdown__subcategories__category">
|
269
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
270
|
+
href="https://studio-app.envato.com/smock/examples/explore/video">Video</a>
|
271
|
+
</li>
|
272
|
+
<li class="header__categories__dropdown__subcategories__category">
|
273
|
+
<a class="header__categories__dropdown__subcategories__category__link"
|
274
|
+
href="https://studio-app.envato.com/smock/examples/explore/animation">Animation</a>
|
275
|
+
</li>
|
276
|
+
</ul>
|
277
|
+
</li>
|
278
|
+
<li class="header__categories__dropdown__top-level__category--content">
|
279
|
+
<p>Can't find the exact service you're after? Most providers complete custom jobs. Just send them an enquiry.</p>
|
280
|
+
</li>
|
281
|
+
</ul>
|
282
|
+
</nav>
|
283
|
+
|
284
|
+
<div class="header__nav">
|
285
|
+
<a class="header__nav-link" href="https://studio-app.envato.com/smock/examples/start-selling/services/new">Create Service</a>
|
286
|
+
</div>
|
287
|
+
|
288
|
+
<div class="header__utilities">
|
289
|
+
<div class="header__search">
|
290
|
+
<form accept-charset="UTF-8" action="https://studio-app.envato.com/smock/examples/search" class="header__search__form has-validation"
|
291
|
+
id="new_search" method="get">
|
292
|
+
<div style="display:none"><input name="utf8" type="hidden" value="✓"></div>
|
293
|
+
<label class="header__search__label" for="search_query">Search</label>
|
294
|
+
<button type="submit" class="header__search__button">
|
295
|
+
<i class="header__search__button__icon hot-icon__search-glass"></i>
|
296
|
+
</button>
|
297
|
+
<input autocomplete="off" class="header__search__body" id="search_query" name="search[query]" placeholder="Search"
|
298
|
+
type="text">
|
299
|
+
</form>
|
300
|
+
</div>
|
301
|
+
|
302
|
+
<div class="header__nav--user">
|
303
|
+
<div class="header__nav__profile">
|
304
|
+
<a class="header__nav__profile__link" href="https://studio-app.envato.com/smock/examples/users/test-user">test-user</a>
|
305
|
+
|
306
|
+
<div class="header__nav__arrow hot-icon__arrow-down"></div>
|
307
|
+
|
308
|
+
<div class="header__nav__dropdown--container">
|
309
|
+
<ul class="header__nav__dropdown">
|
310
|
+
<li class="header__nav__dropdown__item">
|
311
|
+
<a href="https://studio-app.envato.com/smock/examples/account/services">Your Services</a>
|
312
|
+
</li>
|
313
|
+
<li class="header__nav__dropdown__item">
|
314
|
+
<a href="https://studio-app.envato.com/smock/examples/account/jobs/providing">Your Jobs</a>
|
315
|
+
</li>
|
316
|
+
<li class="header__nav__dropdown__item">
|
317
|
+
<a href="https://studio-app.envato.com/smock/examples/account/profile/edit">Your Account</a>
|
318
|
+
</li>
|
319
|
+
<li class="header__nav__dropdown__item">
|
320
|
+
<a href="https://studio-app.envato.com/smock/examples/account/favorites">Your Favorites</a>
|
321
|
+
</li>
|
322
|
+
<li class="header__dropdown__seperator"></li>
|
323
|
+
<li class="header__nav__dropdown__item">
|
324
|
+
<a data-method="post" data-no-turbolink="true" href="https://sso.envato-staging.com/sign_out?to=studio"
|
325
|
+
rel="nofollow">Signout</a>
|
326
|
+
</li>
|
327
|
+
</ul>
|
328
|
+
</div>
|
329
|
+
</div>
|
330
|
+
</div>
|
331
|
+
</div>
|
332
|
+
</div>
|
333
|
+
</header>
|
334
|
+
|
335
|
+
<script async="" charset="utf-8" src="./explore_files/saved_resource" type="text/javascript"></script>
|
336
|
+
<script>
|
337
|
+
Studio.ready(function () {
|
338
|
+
new Studio.HeaderNavigation({el: '.header__categories'}).ready();
|
339
|
+
});
|
340
|
+
</script>
|
341
|
+
|
342
|
+
|
343
|
+
<script>
|
344
|
+
var noscript = document.getElementById('noscript');
|
345
|
+
if (noscript) {
|
346
|
+
noscript.parentNode.removeChild(noscript);
|
347
|
+
}
|
348
|
+
;
|
349
|
+
</script>
|
350
|
+
|
351
|
+
|
352
|
+
<section class="hero image__hero--mobile-apps">
|
353
|
+
<div class="hero__container">
|
354
|
+
<div class="hero__headings">
|
355
|
+
<h2 class="hero__headings__main">Here's how we help</h2>
|
356
|
+
<h4 class="hero__headings__secondary">We connect you with expert designers and developers,<br />
|
357
|
+
who will take your idea and make it a reality.</h4>
|
358
|
+
</div>
|
359
|
+
|
360
|
+
<div class="hero__video-link">
|
361
|
+
<a href="https://studio-app.envato.com/smock/examples/explore/wordpress#fancy__category__video"
|
362
|
+
class="hero__heading__video-launcher">
|
363
|
+
<i class="hero__heading__video-launcher__play hot-icon__play"></i>
|
364
|
+
<span class="hero__heading__video-launcher__subtext">How it works</span>
|
365
|
+
</a>
|
366
|
+
</div>
|
367
|
+
</div>
|
368
|
+
</section>
|
369
|
+
|
370
|
+
<section class="l-container">
|
371
|
+
<h2 class="heading--mast">What our customers are saying</h2>
|
372
|
+
|
373
|
+
<section class="testimonials--inlined">
|
374
|
+
<blockquote class="testimonial testimonial--single" am-grid-col="l:6">
|
375
|
+
<div class="testimonial__image avatar" am-grid-col="l:1:6">
|
376
|
+
<img class="avatar__image" alt="Sandra Hahn" height="140" src="http://placehold.it/140x140" width="140"/>
|
377
|
+
</div>
|
378
|
+
<div class="testimonial__content" am-grid-col="l:5:6">
|
379
|
+
<p class="testimonial__content__body">Maia was very patient
|
380
|
+
with all my questions and we problem-solved together. I would highly
|
381
|
+
recommend this service to anyone getting started.</p>
|
382
|
+
<cite>Sandra Hahn</cite>
|
383
|
+
</div>
|
384
|
+
</blockquote>
|
385
|
+
|
386
|
+
<blockquote class="testimonial testimonial--single" am-grid-col="l:6" am-grid-row="l:end">
|
387
|
+
<div class="testimonial__image avatar" am-grid-col="l:1:6">
|
388
|
+
<img class="avatar__image" alt="Sandra Hahn" height="140" src="http://placehold.it/140x140" width="140"/>
|
389
|
+
</div>
|
390
|
+
<div class="testimonial__content" am-grid-col="l:5:6">
|
391
|
+
<p class="testimonial__content__body">Maia was very patient
|
392
|
+
with all my questions and we problem-solved together. I would highly
|
393
|
+
recommend this service to anyone getting started.</p>
|
394
|
+
<cite>Sandra Hahn</cite>
|
395
|
+
</div>
|
396
|
+
</blockquote>
|
397
|
+
|
398
|
+
<blockquote class="testimonial testimonial--single" am-grid-col="l:6">
|
399
|
+
<div class="testimonial__image avatar" am-grid-col="l:1:6">
|
400
|
+
<img class="avatar__image" alt="Sandra Hahn" height="140" src="http://placehold.it/140x140" width="140"/>
|
401
|
+
</div>
|
402
|
+
<div class="testimonial__content" am-grid-col="l:5:6">
|
403
|
+
<p class="testimonial__content__body">Maia was very patient
|
404
|
+
with all my questions and we problem-solved together. I would highly
|
405
|
+
recommend this service to anyone getting started.</p>
|
406
|
+
<cite>Sandra Hahn</cite>
|
407
|
+
</div>
|
408
|
+
</blockquote>
|
409
|
+
|
410
|
+
<blockquote class="testimonial testimonial--single" am-grid-col="l:6" am-grid-row="l:end">
|
411
|
+
<div class="testimonial__image avatar" am-grid-col="l:1:6">
|
412
|
+
<img class="avatar__image" alt="Sandra Hahn" height="140" src="http://placehold.it/140x140" width="140"/>
|
413
|
+
</div>
|
414
|
+
<div class="testimonial__content" am-grid-col="l:5:6">
|
415
|
+
<p class="testimonial__content__body">Maia was very patient
|
416
|
+
with all my questions and we problem-solved together. I would highly
|
417
|
+
recommend this service to anyone getting started.</p>
|
418
|
+
<cite>Sandra Hahn</cite>
|
419
|
+
</div>
|
420
|
+
</blockquote>
|
421
|
+
</section>
|
422
|
+
|
423
|
+
<article>
|
424
|
+
<h2 class="heading--mast">Helping Keegan start his new business</h2>
|
425
|
+
<article class="paragraph--with-aside">
|
426
|
+
<div class="paragraph__aside--content-sibling" am-grid-col="l:2">
|
427
|
+
<div class="avatar" am-grid-col="l:2:2">
|
428
|
+
<img class="avatar__image" src="http://placehold.it/220x220" alt="300x300 Placeholder" />
|
429
|
+
</div>
|
430
|
+
<aside class="avatar-caption avatar-caption__2of12col-image">
|
431
|
+
<p class="avatar-caption__main">Keegan Baker</p>
|
432
|
+
<p class="avatar-caption__secondary">Entrepreneur</p>
|
433
|
+
</aside>
|
434
|
+
</div>
|
435
|
+
<div class="paragraph__content--aside-sibling" am-grid-col="l:9 l:pre1">
|
436
|
+
<p class="paragraph--heading">We needed a logo for a new tech startup</p>
|
437
|
+
<p>We’re a very small team, and with all our energy focused on building
|
438
|
+
the product I thought I’d give Envato Studio a shot, not having used it
|
439
|
+
before. Brandbusters were in the top few providers under the Logo Design
|
440
|
+
category and had plenty of great feedback. I had a flick through some of
|
441
|
+
their previous work and felt really comfortable that they would be able
|
442
|
+
to achieve the “feel” we were after.</p>
|
443
|
+
<p class="paragraph--no-margin">The simplicity of Envato Studio is unreal - it literally took me 2 or
|
444
|
+
3 minutes to post the job up and a couple of days later we’d accepted the
|
445
|
+
final logo & the whole process was wrapped up. We were really impressed
|
446
|
+
with the work. I gave Envato Studio a try because we were under the pump,
|
447
|
+
but I can easily see myself using it again in the future.</p>
|
448
|
+
</div>
|
449
|
+
</article>
|
450
|
+
<hr />
|
451
|
+
<article class="paragraph--with-aside">
|
452
|
+
<div class="paragraph__content--aside-sibling" am-grid-col="l:9">
|
453
|
+
<p class="paragraph--heading">How Brandbusters helped Keegan</p>
|
454
|
+
<p>"When designing logos we always look for simple geometric solutions,
|
455
|
+
in this case we started with a circle and then reduced it to form a 'C'
|
456
|
+
to match the company name 'Creat'd'. Since their name makes you think
|
457
|
+
of art and design, we initially tried designing the 'C' as a curved
|
458
|
+
pencil or brush. But wanted something a bit stronger. We found
|
459
|
+
inspiration in a color palette and settled on the design you see
|
460
|
+
now.</p>
|
461
|
+
<p>
|
462
|
+
This was first version and we liked it, so we uploaded it to see the
|
463
|
+
client's reaction. They were very impressed and accepted the work! This
|
464
|
+
job was fantastic as the client had a great name for their business and
|
465
|
+
they gave us a really good brief at the beginning. Jobs like this have
|
466
|
+
us thinking about leaving our full-time jobs so we can continue on
|
467
|
+
Envato Studio as successful freelance designers.</p>
|
468
|
+
</div>
|
469
|
+
<div class="paragraph__aside--content-sibling" am-grid-col="l:pre1 l:2">
|
470
|
+
<div class="avatar" am-grid-col="l:2:2">
|
471
|
+
<img class="avatar__image" src="http://placehold.it/220x220" alt="300x300 Placeholder" />
|
472
|
+
</div>
|
473
|
+
<aside class="avatar-caption avatar-caption__2of12col-image">
|
474
|
+
<p class="avatar-caption__main">Brandbusters</p>
|
475
|
+
<p class="avatar-caption__secondary">Logo Designer</p>
|
476
|
+
</aside>
|
477
|
+
</div>
|
478
|
+
</article>
|
479
|
+
|
480
|
+
<article class="paragraph__large-image">
|
481
|
+
<p class="paragraph--bigger paragraph__large-image__heading"><a href="#">Professional Logo Design</a> for $150 by <a href="#">Brandbusters</a></p>
|
482
|
+
<img class="paragraph__large-image__image image--blocked" src="http://placehold.it/960x572" alt="Big Image placeholder" width="960" height="572" />
|
483
|
+
</article>
|
484
|
+
</article>
|
485
|
+
|
486
|
+
<a class="button button--large" am-grid-col="l:4 l:pre4" href="#">Logo Design Services</a>
|
487
|
+
</section>
|
488
|
+
|
489
|
+
<div class="container">
|
490
|
+
<footer class="sub-footer">
|
491
|
+
<p>Copyright © 2014 Envato Studio. All Rights Reserved</p>
|
492
|
+
<a class="sub-footer__envato svg__envato-logo" href="http://envato.com">Envato</a>
|
493
|
+
</footer>
|
494
|
+
</div>
|
495
|
+
|
496
|
+
</body>
|
497
|
+
</html>
|
data/index.html
CHANGED
@@ -8,6 +8,7 @@
|
|
8
8
|
<div class="nav">
|
9
9
|
<ul class="nav__list">
|
10
10
|
<li class="nav__list__item"><a href="examples/atoms.html" target="style_frame">Atoms</a></li>
|
11
|
+
<li class="nav__list__item"><a href="examples/molecules.html" target="style_frame">Molecules</a></li>
|
11
12
|
<li class="nav__list__item"><a href="examples/organisims.html" target="style_frame">Organisims</a></li>
|
12
13
|
<li class="nav__list__item">
|
13
14
|
Pages
|
@@ -15,6 +16,7 @@
|
|
15
16
|
<li class="nav__list__item__dropdown__item"><a href="examples/pages/affiliates.html" target="style_frame">Affiliates</a></li>
|
16
17
|
<li class="nav__list__item__dropdown__item"><a href="examples/pages/blackbox.html" target="style_frame">Blackbox</a></li>
|
17
18
|
<li class="nav__list__item__dropdown__item"><a href="examples/pages/explore.html" target="style_frame">Explore</a></li>
|
19
|
+
<li class="nav__list__item__dropdown__item"><a href="examples/pages/testimonials.html" target="style_frame">Testimonials</a></li>
|
18
20
|
</ul>
|
19
21
|
</li>
|
20
22
|
</ul>
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: smock
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.1.
|
4
|
+
version: 0.1.66
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -130,6 +130,7 @@ files:
|
|
130
130
|
- app/assets/stylesheets/includes/_images.sass
|
131
131
|
- app/assets/stylesheets/includes/_layouts.sass
|
132
132
|
- app/assets/stylesheets/includes/_mixins.sass
|
133
|
+
- app/assets/stylesheets/includes/_molecules.sass
|
133
134
|
- app/assets/stylesheets/includes/_svg_images.sass
|
134
135
|
- app/assets/stylesheets/includes/_typography.sass
|
135
136
|
- app/assets/stylesheets/includes/_typography_settings.sass
|
@@ -245,6 +246,7 @@ files:
|
|
245
246
|
- app/assets/stylesheets/thirdparty/video-js.scss
|
246
247
|
- bin/smock
|
247
248
|
- examples/atoms.html
|
249
|
+
- examples/molecules.html
|
248
250
|
- examples/organisims.html
|
249
251
|
- examples/pages/affiliates.html
|
250
252
|
- examples/pages/affiliates_files/themeforest-cf59c988c1d2bf085124a3b145d6426b.png
|
@@ -331,6 +333,7 @@ files:
|
|
331
333
|
- examples/pages/explore_files/thumbnail_wordpress-1385019095.png
|
332
334
|
- examples/pages/explore_files/thumbnail_x-1379162338.jpg
|
333
335
|
- examples/pages/explore_files/tuts-plus-bd0affcfa95d86912384b5d39e923119.jpg
|
336
|
+
- examples/pages/testimonials.html
|
334
337
|
- guide.sass
|
335
338
|
- index.html
|
336
339
|
- lib/smock.rb
|
@@ -357,7 +360,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
357
360
|
version: '0'
|
358
361
|
segments:
|
359
362
|
- 0
|
360
|
-
hash:
|
363
|
+
hash: 1375674154028886855
|
361
364
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
362
365
|
none: false
|
363
366
|
requirements:
|
@@ -366,7 +369,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
366
369
|
version: '0'
|
367
370
|
segments:
|
368
371
|
- 0
|
369
|
-
hash:
|
372
|
+
hash: 1375674154028886855
|
370
373
|
requirements: []
|
371
374
|
rubyforge_project: smock
|
372
375
|
rubygems_version: 1.8.21
|