smock 0.1.29 → 0.1.30
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 +3 -1
- data/README.md +40 -0
- data/Rakefile +6 -4
- data/index.html +237 -0
- data/lib/config.ru +2 -0
- data/smock.gemspec +1 -0
- metadata +22 -4
data/Gemfile.lock
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
PATH
|
|
2
2
|
remote: .
|
|
3
3
|
specs:
|
|
4
|
-
smock (0.1.
|
|
4
|
+
smock (0.1.30)
|
|
5
5
|
sass (= 3.2.19)
|
|
6
6
|
thor (= 0.19.1)
|
|
7
7
|
|
|
@@ -15,6 +15,7 @@ GEM
|
|
|
15
15
|
bourbon (>= 3.1)
|
|
16
16
|
sass (~> 3.2.19)
|
|
17
17
|
rake (10.3.2)
|
|
18
|
+
rb-fsevent (0.9.4)
|
|
18
19
|
sass (3.2.19)
|
|
19
20
|
thor (0.19.1)
|
|
20
21
|
|
|
@@ -25,4 +26,5 @@ DEPENDENCIES
|
|
|
25
26
|
bourbon (~> 3.2)
|
|
26
27
|
neat (~> 1.5)
|
|
27
28
|
rake
|
|
29
|
+
rb-fsevent (~> 0.9)
|
|
28
30
|
smock!
|
data/README.md
CHANGED
|
@@ -4,6 +4,46 @@ smock
|
|
|
4
4
|
The Studio styleguide project
|
|
5
5
|
|
|
6
6
|
|
|
7
|
+
### Running the build
|
|
8
|
+
|
|
9
|
+
The quickest way to get started is to run the following commands
|
|
10
|
+
```bash
|
|
11
|
+
bundle install
|
|
12
|
+
rake build_version
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### Running Smock locally
|
|
16
|
+
|
|
17
|
+
While you can do `ruby -run -e httpd ./versions/latest -p 9090`, some people prefer to use [Pow](http://pow.cx) instead. Install using:
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
curl get.pow.cx | sh
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
The easiest way to do all the symlinking is by using the `powder` gem and running it in your `smock/versions/latest` directory:
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
gem install powder
|
|
27
|
+
cd ./versions/latest
|
|
28
|
+
powder link
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### Dev'ing Sass locally
|
|
32
|
+
|
|
33
|
+
To aid development this project provides two tasks:
|
|
34
|
+
|
|
35
|
+
This will copy and compile the latest code_html examples and make it ready on `smock.dev`
|
|
36
|
+
```bash
|
|
37
|
+
rake build_version
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
This will monitor sass files for changes re-compile ready on `smock.dev`
|
|
41
|
+
```bash
|
|
42
|
+
rake sasswatch
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
Note that you have to use rake build_versions to copy across markup.
|
|
46
|
+
|
|
7
47
|
### TODO
|
|
8
48
|
|
|
9
49
|
- Set up build tasks to update and download the stuff in the third party folder
|
data/Rakefile
CHANGED
|
@@ -6,7 +6,7 @@ require "smock/version"
|
|
|
6
6
|
|
|
7
7
|
Bundler::GemHelper.install_tasks
|
|
8
8
|
|
|
9
|
-
task :default => :
|
|
9
|
+
task :default => :build_version
|
|
10
10
|
|
|
11
11
|
desc "clean up"
|
|
12
12
|
task :clean do
|
|
@@ -31,9 +31,11 @@ task :build_version => :clean do
|
|
|
31
31
|
FileUtils.mkdir_p latest
|
|
32
32
|
|
|
33
33
|
sh "cp -R #{target}/* #{latest}/"
|
|
34
|
+
sh "cp ./lib/config.ru #{latest}/config.ru"
|
|
35
|
+
sh "cp ./index.html #{latest}/"
|
|
34
36
|
end
|
|
35
37
|
|
|
36
|
-
desc "run a
|
|
37
|
-
task :
|
|
38
|
-
sh "
|
|
38
|
+
desc "run a sass watcher"
|
|
39
|
+
task :sasswatch => :build_version do
|
|
40
|
+
sh "bundle exec sass --watch app/assets/stylesheets/smock.sass:./versions/smock.css"
|
|
39
41
|
end
|
data/index.html
ADDED
|
@@ -0,0 +1,237 @@
|
|
|
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>
|
|
22
|
+
|
|
23
|
+
<section class="classification">
|
|
24
|
+
<h2>Settings</h2>
|
|
25
|
+
<section class="style-group">
|
|
26
|
+
<h3>Global settings</h3>
|
|
27
|
+
<ul>
|
|
28
|
+
<li>$border-radius: 4px</li>
|
|
29
|
+
<li>$grid-columns: 12</li>
|
|
30
|
+
<li>$max-width: 960px</li>
|
|
31
|
+
<li>$border-color: #e1e1e1</li>
|
|
32
|
+
</ul>
|
|
33
|
+
</section>
|
|
34
|
+
</section>
|
|
35
|
+
|
|
36
|
+
<section class="classification">
|
|
37
|
+
<h2>Atoms</h2>
|
|
38
|
+
<section class="style-group">
|
|
39
|
+
<h3>Colours</h3>
|
|
40
|
+
|
|
41
|
+
<strong class="style-group__example__label">Hues</strong>
|
|
42
|
+
<ul class="style-group__example__colors">
|
|
43
|
+
<li class="style-group__example__color">
|
|
44
|
+
<div class="style-group__example__color__swatch--blue"></div>
|
|
45
|
+
<span class="style-group__example__color__name">$blue</span>
|
|
46
|
+
<span class="style-group__example__color__hex">#1FB4DA</span>
|
|
47
|
+
</li>
|
|
48
|
+
<li class="style-group__example__color">
|
|
49
|
+
<div class="style-group__example__color__swatch--green"></div>
|
|
50
|
+
<span class="style-group__example__color__name">$green</span>
|
|
51
|
+
<span class="style-group__example__color__hex">#82B641</span>
|
|
52
|
+
</li>
|
|
53
|
+
<li class="style-group__example__color">
|
|
54
|
+
<div class="style-group__example__color__swatch--orange"></div>
|
|
55
|
+
<span class="style-group__example__color__name">$orange</span>
|
|
56
|
+
<span class="style-group__example__color__hex">#F67D42</span>
|
|
57
|
+
</li>
|
|
58
|
+
<li class="style-group__example__color">
|
|
59
|
+
<div class="style-group__example__color__swatch--yellow"></div>
|
|
60
|
+
<span class="style-group__example__color__name">$yellow</span>
|
|
61
|
+
<span class="style-group__example__color__hex">#FFBE00</span>
|
|
62
|
+
</li>
|
|
63
|
+
<li class="style-group__example__color">
|
|
64
|
+
<div class="style-group__example__color__swatch--red"></div>
|
|
65
|
+
<span class="style-group__example__color__name">$red</span>
|
|
66
|
+
<span class="style-group__example__color__hex">#E65F51</span>
|
|
67
|
+
</li>
|
|
68
|
+
</ul>
|
|
69
|
+
|
|
70
|
+
<strong class="style-group__example__label">Shades</strong>
|
|
71
|
+
<ul class="style-group__example__colors">
|
|
72
|
+
<li class="style-group__example__color">
|
|
73
|
+
<div class="style-group__example__color__swatch--black"></div>
|
|
74
|
+
<span class="style-group__example__color__name">$black</span>
|
|
75
|
+
<span class="style-group__example__color__hex">#000000</span>
|
|
76
|
+
</li>
|
|
77
|
+
<li class="style-group__example__color">
|
|
78
|
+
<div class="style-group__example__color__swatch--gray-dark"></div>
|
|
79
|
+
<span class="style-group__example__color__name">$gray-dark</span>
|
|
80
|
+
<span class="style-group__example__color__hex">#454545</span>
|
|
81
|
+
</li>
|
|
82
|
+
<li class="style-group__example__color">
|
|
83
|
+
<div class="style-group__example__color__swatch--gray"></div>
|
|
84
|
+
<span class="style-group__example__color__name">$gray</span>
|
|
85
|
+
<span class="style-group__example__color__hex">#888888</span>
|
|
86
|
+
</li>
|
|
87
|
+
<li class="style-group__example__color">
|
|
88
|
+
<div class="style-group__example__color__swatch--gray-light"></div>
|
|
89
|
+
<span class="style-group__example__color__name">$gray-light</span>
|
|
90
|
+
<span class="style-group__example__color__hex">#BFBFBF</span>
|
|
91
|
+
</li>
|
|
92
|
+
<li class="style-group__example__color">
|
|
93
|
+
<div class="style-group__example__color__swatch--gray-lightest"></div>
|
|
94
|
+
<span class="style-group__example__color__name">$gray-lightest</span>
|
|
95
|
+
<span class="style-group__example__color__hex">#E1E1E1</span>
|
|
96
|
+
</li>
|
|
97
|
+
<li class="style-group__example__color">
|
|
98
|
+
<div class="style-group__example__color__swatch--white"></div>
|
|
99
|
+
<span class="style-group__example__color__name">$white</span>
|
|
100
|
+
<span class="style-group__example__color__hex">#FFFFFF</span>
|
|
101
|
+
</li>
|
|
102
|
+
</ul>
|
|
103
|
+
</section>
|
|
104
|
+
|
|
105
|
+
<section class="style-group">
|
|
106
|
+
<h3>Buttons</h3>
|
|
107
|
+
<a href="#" class="button">Standard Button</a>
|
|
108
|
+
<a href="#" class="button button--muted">Muted Button</a>
|
|
109
|
+
</section>
|
|
110
|
+
|
|
111
|
+
<section class="style-group">
|
|
112
|
+
<h3>Typography</h3>
|
|
113
|
+
|
|
114
|
+
<div class="style-group__example">
|
|
115
|
+
<strong class="style-group__example__label">Headings</strong>
|
|
116
|
+
|
|
117
|
+
<h1>Heading 1</h1>
|
|
118
|
+
|
|
119
|
+
<h2>Heading 2</h2>
|
|
120
|
+
|
|
121
|
+
<h3>Heading 3</h3>
|
|
122
|
+
<h4>Heading 4</h4>
|
|
123
|
+
<h5>Heading 5</h5>
|
|
124
|
+
<h6>Heading 6</h6>
|
|
125
|
+
</div>
|
|
126
|
+
|
|
127
|
+
<div class="style-group__example">
|
|
128
|
+
<strong class="style-group__example__label">Paragraphs</strong>
|
|
129
|
+
|
|
130
|
+
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
|
|
131
|
+
Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla
|
|
132
|
+
non metus auctor fringilla.</p>
|
|
133
|
+
|
|
134
|
+
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
|
|
135
|
+
Porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus
|
|
136
|
+
commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
|
|
137
|
+
risus.</p>
|
|
138
|
+
</div>
|
|
139
|
+
|
|
140
|
+
<div class="style-group__example">
|
|
141
|
+
<strong class="style-group__example__label">Links</strong>
|
|
142
|
+
<a href="#">Navigation Link</a>
|
|
143
|
+
|
|
144
|
+
<p>This is a paragraph with <a href="#">A basic link</a> inside of it.</p>
|
|
145
|
+
</div>
|
|
146
|
+
|
|
147
|
+
<div class="style-group__example">
|
|
148
|
+
<strong class="style-group__example__label">Forms</strong>
|
|
149
|
+
|
|
150
|
+
<form action="" method="post">
|
|
151
|
+
<fieldset>
|
|
152
|
+
<div class="input string optional"><label class="string optional" for="text_input">Text Input
|
|
153
|
+
Label</label><input class="string optional" id="" name="text_input" type="text"></div>
|
|
154
|
+
<p class="paragraph--hint">This is a hint that belongs on a form.</p>
|
|
155
|
+
|
|
156
|
+
<div class="input string optional form_order_extra_comments"><label class="string optional"
|
|
157
|
+
for="form_order_extra_comments">Extra
|
|
158
|
+
comments (optional)</label><textarea class="string optional" id="form_order_extra_comments"
|
|
159
|
+
name="form_order[extra_comments]"
|
|
160
|
+
placeholder="Anything else you would like to share with your expert"></textarea>
|
|
161
|
+
</fieldset>
|
|
162
|
+
</form>
|
|
163
|
+
</div>
|
|
164
|
+
</section>
|
|
165
|
+
</section>
|
|
166
|
+
|
|
167
|
+
<section class="classification">
|
|
168
|
+
<h2>Molecules</h2>
|
|
169
|
+
|
|
170
|
+
<div class="style-group__example">
|
|
171
|
+
<strong class="style-group__example__label">Payment Method</strong>
|
|
172
|
+
|
|
173
|
+
<div class="payment-method">
|
|
174
|
+
<span><input id="form_order_payment_method_paypal" name="form_order[payment_method]" type="radio"
|
|
175
|
+
value="paypal"><label class="collection_radio_buttons"
|
|
176
|
+
for="form_order_payment_method_paypal">Paypal</label></span><span><input
|
|
177
|
+
id="form_order_payment_method_braintree" name="form_order[payment_method]" type="radio" value="braintree"><label
|
|
178
|
+
class="collection_radio_buttons" for="form_order_payment_method_braintree">Creditcard</label></span>
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
181
|
+
<div class="style-group__example">
|
|
182
|
+
<strong class="style-group__example__label">Credit Card</strong>
|
|
183
|
+
|
|
184
|
+
<div class="credit-card" style="display: block;">
|
|
185
|
+
<div class="credit-card__numbers">
|
|
186
|
+
<div class="input string optional form_order_card_number credit-card__numbers__card-number"><label
|
|
187
|
+
class="string optional" for="form_order_card_number">Card number</label><input class="string optional"
|
|
188
|
+
id="form_order_card_number"
|
|
189
|
+
name="form_order[card_number]"
|
|
190
|
+
placeholder="0000 0000 0000 0000"
|
|
191
|
+
type="text"></div>
|
|
192
|
+
<div class="input string optional form_order_cvv credit-card__numbers__cvv"><label class="string optional"
|
|
193
|
+
for="form_order_cvv">CVV</label><input
|
|
194
|
+
class="string optional" id="form_order_cvv" name="form_order[cvv]" placeholder="000" type="text"></div>
|
|
195
|
+
</div>
|
|
196
|
+
<div class="credit-card__expiry">
|
|
197
|
+
<label>Expiry date</label>
|
|
198
|
+
|
|
199
|
+
<div class="input string optional form_order_expiry_month credit-card__expiry__month"><input
|
|
200
|
+
class="string optional" id="form_order_expiry_month" name="form_order[expiry_month]"
|
|
201
|
+
placeholder="Month (MM)" type="text"></div>
|
|
202
|
+
<div class="input string optional form_order_expiry_year credit-card__expiry__year"><input
|
|
203
|
+
class="string optional" id="form_order_expiry_year" name="form_order[expiry_year]" placeholder="Year (YY)"
|
|
204
|
+
type="text"></div>
|
|
205
|
+
</div>
|
|
206
|
+
</div>
|
|
207
|
+
</div>
|
|
208
|
+
</section>
|
|
209
|
+
|
|
210
|
+
<section class="classification">
|
|
211
|
+
<h2>Organisims</h2>
|
|
212
|
+
|
|
213
|
+
<div class="style-group__example">
|
|
214
|
+
<strong class="style-group__example__label">Asset Uploader</strong>
|
|
215
|
+
|
|
216
|
+
<div class="asset-uploader">
|
|
217
|
+
<label for="">Uploader Label</label>
|
|
218
|
+
|
|
219
|
+
<div class="asset-uploader__button asset-uploader__button--drop dz-clickable">Drop
|
|
220
|
+
files here or <strong>browse</strong> to add attachments
|
|
221
|
+
</div>
|
|
222
|
+
<div class="asset-uploader__previews"></div>
|
|
223
|
+
</div>
|
|
224
|
+
</div>
|
|
225
|
+
</section>
|
|
226
|
+
|
|
227
|
+
<section class="classification">
|
|
228
|
+
<h2>Templates</h2>
|
|
229
|
+
</section>
|
|
230
|
+
|
|
231
|
+
<section class="classification">
|
|
232
|
+
<h2>Patterns</h2>
|
|
233
|
+
</section>
|
|
234
|
+
|
|
235
|
+
|
|
236
|
+
</body>
|
|
237
|
+
</html>
|
data/lib/config.ru
ADDED
data/smock.gemspec
CHANGED
|
@@ -28,4 +28,5 @@ This gem provides the basic styles and files for use in an application that need
|
|
|
28
28
|
s.add_development_dependency('bourbon', '~> 3.2')
|
|
29
29
|
s.add_development_dependency('neat', '~> 1.5')
|
|
30
30
|
s.add_development_dependency('rake')
|
|
31
|
+
s.add_development_dependency('rb-fsevent', '~> 0.9')
|
|
31
32
|
end
|
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.30
|
|
5
5
|
prerelease:
|
|
6
6
|
platform: ruby
|
|
7
7
|
authors:
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2014-09-
|
|
12
|
+
date: 2014-09-12 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: sass
|
|
@@ -91,6 +91,22 @@ dependencies:
|
|
|
91
91
|
- - ! '>='
|
|
92
92
|
- !ruby/object:Gem::Version
|
|
93
93
|
version: '0'
|
|
94
|
+
- !ruby/object:Gem::Dependency
|
|
95
|
+
name: rb-fsevent
|
|
96
|
+
requirement: !ruby/object:Gem::Requirement
|
|
97
|
+
none: false
|
|
98
|
+
requirements:
|
|
99
|
+
- - ~>
|
|
100
|
+
- !ruby/object:Gem::Version
|
|
101
|
+
version: '0.9'
|
|
102
|
+
type: :development
|
|
103
|
+
prerelease: false
|
|
104
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
105
|
+
none: false
|
|
106
|
+
requirements:
|
|
107
|
+
- - ~>
|
|
108
|
+
- !ruby/object:Gem::Version
|
|
109
|
+
version: '0.9'
|
|
94
110
|
description: ! 'This gem provides the basic styles and files for use in an application
|
|
95
111
|
that needs Studio''s style-guide / branding
|
|
96
112
|
|
|
@@ -225,6 +241,8 @@ files:
|
|
|
225
241
|
- app/assets/stylesheets/thirdparty/video-js.scss
|
|
226
242
|
- bin/smock
|
|
227
243
|
- examples/blackbox.html
|
|
244
|
+
- index.html
|
|
245
|
+
- lib/config.ru
|
|
228
246
|
- lib/smock.rb
|
|
229
247
|
- lib/smock/engine.rb
|
|
230
248
|
- lib/smock/generator.rb
|
|
@@ -271,7 +289,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
|
271
289
|
version: '0'
|
|
272
290
|
segments:
|
|
273
291
|
- 0
|
|
274
|
-
hash:
|
|
292
|
+
hash: 1733307392278615953
|
|
275
293
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
276
294
|
none: false
|
|
277
295
|
requirements:
|
|
@@ -280,7 +298,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
280
298
|
version: '0'
|
|
281
299
|
segments:
|
|
282
300
|
- 0
|
|
283
|
-
hash:
|
|
301
|
+
hash: 1733307392278615953
|
|
284
302
|
requirements: []
|
|
285
303
|
rubyforge_project: smock
|
|
286
304
|
rubygems_version: 1.8.21
|