smock 0.1.93 → 0.1.94
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/Rakefile +3 -0
- data/app/assets/stylesheets/smock.sass +2 -0
- data/examples/avatars.html +16 -0
- data/examples/banners.html +8 -0
- data/examples/buttons.html +9 -0
- data/examples/colors.html +61 -0
- data/examples/forms.html +15 -0
- data/examples/links.html +7 -0
- data/examples/pagination.html +15 -0
- data/examples/paragraphs.html +53 -0
- data/examples/testimonials.html +51 -0
- data/examples/typography.html +8 -0
- data/guide.js +27 -0
- data/guide2.sass +15 -0
- data/index2.html +35 -0
- metadata +16 -3
data/Gemfile.lock
CHANGED
data/Rakefile
CHANGED
@@ -35,7 +35,10 @@ task :build_version => :clean do
|
|
35
35
|
|
36
36
|
sh "cp -R #{target}/* #{latest}/"
|
37
37
|
sh "bundle exec sass ./guide.sass #{latest}/guide.css"
|
38
|
+
sh "bundle exec sass ./guide2.sass #{latest}/guide2.css"
|
38
39
|
sh "ln -s $(pwd)/index.html #{latest}/"
|
40
|
+
sh "ln -s $(pwd)/guide.js #{latest}/"
|
41
|
+
sh "ln -s $(pwd)/index2.html #{latest}/"
|
39
42
|
end
|
40
43
|
|
41
44
|
desc "run a sass watcher"
|
@@ -124,6 +124,7 @@ html.vr
|
|
124
124
|
+space(margin-top)
|
125
125
|
|
126
126
|
@mixin button($background: $orange)
|
127
|
+
width: 100%
|
127
128
|
display: block
|
128
129
|
border: 0
|
129
130
|
box-shadow: inset 0 0 0 0 transparent
|
@@ -140,6 +141,7 @@ html.vr
|
|
140
141
|
text-decoration: none
|
141
142
|
|
142
143
|
@mixin secondary-button($border: $orange)
|
144
|
+
width: 100%
|
143
145
|
display: block
|
144
146
|
box-shadow: inset 0 0 0 0 transparent
|
145
147
|
border: solid 3px $border
|
@@ -0,0 +1,16 @@
|
|
1
|
+
<div class="example">
|
2
|
+
<div class="avatar">
|
3
|
+
<img class="avatar__image" src="http://placehold.it/220x220" alt="300x300 Placeholder" />
|
4
|
+
</div>
|
5
|
+
</div>
|
6
|
+
|
7
|
+
<div class="example">
|
8
|
+
<div class="avatar-caption">
|
9
|
+
<p class="avatar-caption__main">Main Caption</p>
|
10
|
+
<p class="avatar-caption__secondary">Secondary Caption</p>
|
11
|
+
</div>
|
12
|
+
</div>
|
13
|
+
|
14
|
+
<div class="example">
|
15
|
+
<p class="paragraph--bigger paragraph__large-avatar__heading"><a href="#">Professional Logo Design</a> for $150 by <a href="#">Brandbusters</a></p>
|
16
|
+
</div>
|
@@ -0,0 +1,8 @@
|
|
1
|
+
<div class="example">
|
2
|
+
<div class="marketing-banner" am-grid-col="l:10:12">
|
3
|
+
<h2 class="marketing-banner__heading" am-grid-col="l:8:10 l:pre1:10">Need web hosting for your project?</h2>
|
4
|
+
<p class="marketing-banner__copy" am-grid-col="l:6:10 l:pre2:10">Check out our web hosting partners. Many offer special
|
5
|
+
deals to help you get started.</p>
|
6
|
+
<a class="marketing-banner__button button" href="" am-grid-col="l:4:10">View hosting partners</a>
|
7
|
+
</div>
|
8
|
+
</div>
|
@@ -0,0 +1,9 @@
|
|
1
|
+
<div class="example">
|
2
|
+
<button class="button">Primary Button</button>
|
3
|
+
</div>
|
4
|
+
<div class="example">
|
5
|
+
<button class="button button--muted">Muted Button</button>
|
6
|
+
</div>
|
7
|
+
<div class="example">
|
8
|
+
<button class="button" disabled>Disabled Button</button>
|
9
|
+
</div>
|
@@ -0,0 +1,61 @@
|
|
1
|
+
<div class="example">
|
2
|
+
<ul class="style-group__example__colors">
|
3
|
+
<li class="style-group__example__color">
|
4
|
+
<div class="style-group__example__color__swatch--blue"></div>
|
5
|
+
<span class="style-group__example__color__name">$blue</span>
|
6
|
+
<span class="style-group__example__color__hex">#1FB4DA</span>
|
7
|
+
</li>
|
8
|
+
<li class="style-group__example__color">
|
9
|
+
<div class="style-group__example__color__swatch--green"></div>
|
10
|
+
<span class="style-group__example__color__name">$green</span>
|
11
|
+
<span class="style-group__example__color__hex">#82B641</span>
|
12
|
+
</li>
|
13
|
+
<li class="style-group__example__color">
|
14
|
+
<div class="style-group__example__color__swatch--orange"></div>
|
15
|
+
<span class="style-group__example__color__name">$orange</span>
|
16
|
+
<span class="style-group__example__color__hex">#F67D42</span>
|
17
|
+
</li>
|
18
|
+
<li class="style-group__example__color">
|
19
|
+
<div class="style-group__example__color__swatch--yellow"></div>
|
20
|
+
<span class="style-group__example__color__name">$yellow</span>
|
21
|
+
<span class="style-group__example__color__hex">#FFBE00</span>
|
22
|
+
</li>
|
23
|
+
<li class="style-group__example__color">
|
24
|
+
<div class="style-group__example__color__swatch--red"></div>
|
25
|
+
<span class="style-group__example__color__name">$red</span>
|
26
|
+
<span class="style-group__example__color__hex">#E65F51</span>
|
27
|
+
</li>
|
28
|
+
</ul>
|
29
|
+
<ul class="style-group__example__colors">
|
30
|
+
<li class="style-group__example__color">
|
31
|
+
<div class="style-group__example__color__swatch--black"></div>
|
32
|
+
<span class="style-group__example__color__name">$black</span>
|
33
|
+
<span class="style-group__example__color__hex">#000000</span>
|
34
|
+
</li>
|
35
|
+
<li class="style-group__example__color">
|
36
|
+
<div class="style-group__example__color__swatch--gray-dark"></div>
|
37
|
+
<span class="style-group__example__color__name">$gray-dark</span>
|
38
|
+
<span class="style-group__example__color__hex">#454545</span>
|
39
|
+
</li>
|
40
|
+
<li class="style-group__example__color">
|
41
|
+
<div class="style-group__example__color__swatch--gray"></div>
|
42
|
+
<span class="style-group__example__color__name">$gray</span>
|
43
|
+
<span class="style-group__example__color__hex">#888888</span>
|
44
|
+
</li>
|
45
|
+
<li class="style-group__example__color">
|
46
|
+
<div class="style-group__example__color__swatch--gray-light"></div>
|
47
|
+
<span class="style-group__example__color__name">$gray-light</span>
|
48
|
+
<span class="style-group__example__color__hex">#BFBFBF</span>
|
49
|
+
</li>
|
50
|
+
<li class="style-group__example__color">
|
51
|
+
<div class="style-group__example__color__swatch--gray-lightest"></div>
|
52
|
+
<span class="style-group__example__color__name">$gray-lightest</span>
|
53
|
+
<span class="style-group__example__color__hex">#E1E1E1</span>
|
54
|
+
</li>
|
55
|
+
<li class="style-group__example__color">
|
56
|
+
<div class="style-group__example__color__swatch--white"></div>
|
57
|
+
<span class="style-group__example__color__name">$white</span>
|
58
|
+
<span class="style-group__example__color__hex">#FFFFFF</span>
|
59
|
+
</li>
|
60
|
+
</ul>
|
61
|
+
</div>
|
data/examples/forms.html
ADDED
@@ -0,0 +1,15 @@
|
|
1
|
+
<div class="example">
|
2
|
+
<form action="" method="post">
|
3
|
+
<fieldset>
|
4
|
+
<div class="input string optional"><label class="string optional" for="text_input">Text Input
|
5
|
+
Label</label><input class="string optional" id="" name="text_input" type="text"></div>
|
6
|
+
<p class="paragraph--hint">This is a hint that belongs on a form.</p>
|
7
|
+
|
8
|
+
<div class="input string optional form_order_extra_comments"><label class="string optional"
|
9
|
+
for="form_order_extra_comments">Extra
|
10
|
+
comments (optional)</label><textarea class="string optional" id="form_order_extra_comments"
|
11
|
+
name="form_order[extra_comments]"
|
12
|
+
placeholder="Anything else you would like to share with your expert"></textarea>
|
13
|
+
</fieldset>
|
14
|
+
</form>
|
15
|
+
</div>
|
data/examples/links.html
ADDED
@@ -0,0 +1,15 @@
|
|
1
|
+
<div class="example">
|
2
|
+
<nav class="pagination">
|
3
|
+
<span class="first"><a href="#">First</a></span>
|
4
|
+
<span class="prev"><a href="#">Prev</a></span>
|
5
|
+
<span class="page"><a href="#">1</a></span>
|
6
|
+
<span class="page"><a href="#">2</a></span>
|
7
|
+
<span class="page"><a href="#">3</a></span>
|
8
|
+
<span class="page gap">…</span>
|
9
|
+
<span class="page"><a href="#">7</a></span>
|
10
|
+
<span class="page"><a href="#">8</a></span>
|
11
|
+
<span class="page"><a href="#">9</a></span>
|
12
|
+
<span class="next"><a href="#">Next</a></span>
|
13
|
+
<span class="last"><a href="#">Last</a></span>
|
14
|
+
</nav>
|
15
|
+
</div>
|
@@ -0,0 +1,53 @@
|
|
1
|
+
<div class="example">
|
2
|
+
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
|
3
|
+
Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla
|
4
|
+
non metus auctor fringilla.</p>
|
5
|
+
|
6
|
+
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
|
7
|
+
Porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus
|
8
|
+
commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
|
9
|
+
risus.</p>
|
10
|
+
</div>
|
11
|
+
|
12
|
+
<div class="example">
|
13
|
+
<h3 class="paragraph--heading">Um sociis natoque penatibus et magnis dis parturien. Um sociis natoque penatibus et magnis dis parturien.</h3>
|
14
|
+
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
|
15
|
+
Vestibulum id ligula porta felis euismod semper. Integer posuere erat a
|
16
|
+
ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis
|
17
|
+
interdum.</p>
|
18
|
+
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
|
19
|
+
Vestibulum id ligula porta felis euismod semper. Integer posuere erat a
|
20
|
+
ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis
|
21
|
+
interdum.</p>
|
22
|
+
</div>
|
23
|
+
|
24
|
+
<div class="example">
|
25
|
+
<article class="paragraph--with-aside">
|
26
|
+
<div class="paragraph__content--aside-sibling" am-grid-col="l:9">
|
27
|
+
<p class="paragraph--heading">How Brandbusters helped Keegan</p>
|
28
|
+
<p>"When designing logos we always look for simple geometric solutions,
|
29
|
+
in this case we started with a circle and then reduced it to form a 'C'
|
30
|
+
to match the company name 'Creat'd'. Since their name makes you think
|
31
|
+
of art and design, we initially tried designing the 'C' as a curved
|
32
|
+
pencil or brush. But wanted something a bit stronger. We found
|
33
|
+
inspiration in a color palette and settled on the design you see
|
34
|
+
now.</p>
|
35
|
+
<p>
|
36
|
+
This was first version and we liked it, so we uploaded it to see the
|
37
|
+
client's reaction. They were very impressed and accepted the work! This
|
38
|
+
job was fantastic as the client had a great name for their business and
|
39
|
+
they gave us a really good brief at the beginning. Jobs like this have
|
40
|
+
us thinking about leaving our full-time jobs so we can continue on
|
41
|
+
Envato Studio as successful freelance designers.</p>
|
42
|
+
</div>
|
43
|
+
<div class="paragraph__aside--content-sibling" am-grid-col="l:pre1 l:2">
|
44
|
+
<div class="avatar" am-grid-col="l:2:2">
|
45
|
+
<img class="avatar__image" src="http://placehold.it/220x220" alt="300x300 Placeholder" />
|
46
|
+
</div>
|
47
|
+
<aside class="avatar-caption avatar-caption__2of12col-image">
|
48
|
+
<p class="avatar-caption__main">Brandbusters</p>
|
49
|
+
<p class="avatar-caption__secondary">Logo Designer</p>
|
50
|
+
</aside>
|
51
|
+
</div>
|
52
|
+
</article>
|
53
|
+
</div>
|
@@ -0,0 +1,51 @@
|
|
1
|
+
<div class="example">
|
2
|
+
<blockquote class="testimonial testimonial--single">
|
3
|
+
<div class="testimonial__image avatar" am-grid-col="l:1:12">
|
4
|
+
<img class="avatar__image" alt="Peter Fitzgibbon" src="http://placehold.it/300x300"/>
|
5
|
+
</div>
|
6
|
+
<div class="testimonial__content" am-grid-col="l:11:12">
|
7
|
+
<p class="testimonial__content__body">I have been wanting to update my
|
8
|
+
Wordpress theme for over a year but was intimidated to do it. I was
|
9
|
+
contacted by my installer right away and he was awesome to work with!</p>
|
10
|
+
<cite>Erin Southwell</cite>
|
11
|
+
</div>
|
12
|
+
</blockquote>
|
13
|
+
</div>
|
14
|
+
|
15
|
+
<div class="example">
|
16
|
+
<div class="testimonials" am-grid-col="l:12:12">
|
17
|
+
<blockquote class="testimonial testimonial--single">
|
18
|
+
<div class="testimonial__image avatar" am-grid-col="l:1:12">
|
19
|
+
<img class="avatar__image" alt="Peter Fitzgibbon" src="http://placehold.it/300x300"/>
|
20
|
+
</div>
|
21
|
+
<div class="testimonial__content" am-grid-col="l:11:12">
|
22
|
+
<p class="testimonial__content__body">I have been wanting to update my
|
23
|
+
Wordpress theme for over a year but was intimidated to do it. I was
|
24
|
+
contacted by my installer right away and he was awesome to work with!</p>
|
25
|
+
<cite>Erin Southwell</cite>
|
26
|
+
</div>
|
27
|
+
</blockquote>
|
28
|
+
<blockquote class="testimonial testimonial--single">
|
29
|
+
<div class="testimonial__image avatar" am-grid-col="l:1:12">
|
30
|
+
<img class="avatar__image" alt="Peter Fitzgibbon" src="http://placehold.it/300x300"/>
|
31
|
+
</div>
|
32
|
+
<div class="testimonial__content" am-grid-col="l:11:12">
|
33
|
+
<p class="testimonial__content__body">I have been wanting to update my
|
34
|
+
Wordpress theme for over a year but was intimidated to do it. I was
|
35
|
+
contacted by my installer right away and he was awesome to work with!</p>
|
36
|
+
<cite>Erin Southwell</cite>
|
37
|
+
</div>
|
38
|
+
</blockquote>
|
39
|
+
<blockquote class="testimonial testimonial--single">
|
40
|
+
<div class="testimonial__image avatar" am-grid-col="l:1:12">
|
41
|
+
<img class="avatar__image" alt="Peter Fitzgibbon" src="http://placehold.it/300x300"/>
|
42
|
+
</div>
|
43
|
+
<div class="testimonial__content" am-grid-col="l:11:12">
|
44
|
+
<p class="testimonial__content__body">I have been wanting to update my
|
45
|
+
Wordpress theme for over a year but was intimidated to do it. I was
|
46
|
+
contacted by my installer right away and he was awesome to work with!</p>
|
47
|
+
<cite>Erin Southwell</cite>
|
48
|
+
</div>
|
49
|
+
</blockquote>
|
50
|
+
</div>
|
51
|
+
</div>
|
data/guide.js
ADDED
@@ -0,0 +1,27 @@
|
|
1
|
+
function loadContent(name) {
|
2
|
+
if (name != undefined) {
|
3
|
+
$('#content').load('/examples/' + name + '.html', function() {
|
4
|
+
addExamples();
|
5
|
+
});
|
6
|
+
}
|
7
|
+
}
|
8
|
+
|
9
|
+
function setupActions() {
|
10
|
+
$('.actions').click(function (e) {
|
11
|
+
loadContent(e.target.rel);
|
12
|
+
});
|
13
|
+
}
|
14
|
+
|
15
|
+
function addExamples() {
|
16
|
+
var elements = $('.example');
|
17
|
+
for (var i = 0; i < elements.length; i++) {
|
18
|
+
var element = elements[i];
|
19
|
+
var elementText = $('<span/>').text($(element).html());
|
20
|
+
var identText = elementText.text().match(/^\s*/im)[0];
|
21
|
+
var escapedHtml = elementText.html().replace(new RegExp(identText, 'g'), '\n').trim();
|
22
|
+
var codeTemplate = $('<code class="html">').append(escapedHtml);
|
23
|
+
var template = $('<pre am-grid-col="l:12:12">').append(codeTemplate);
|
24
|
+
$(element).append(template);
|
25
|
+
hljs.highlightBlock(codeTemplate[0]);
|
26
|
+
}
|
27
|
+
}
|
data/guide2.sass
ADDED
@@ -0,0 +1,15 @@
|
|
1
|
+
@import "app/assets/stylesheets/smock"
|
2
|
+
|
3
|
+
.example:before
|
4
|
+
content: 'Example'
|
5
|
+
display: block
|
6
|
+
.example
|
7
|
+
+bottom-horizontal-rule(3)
|
8
|
+
code
|
9
|
+
overflow-wrap: break-word
|
10
|
+
pre
|
11
|
+
+space(margin-top, 1)
|
12
|
+
+space(margin-bottom, 1)
|
13
|
+
pre:before
|
14
|
+
content: 'Code'
|
15
|
+
|
data/index2.html
ADDED
@@ -0,0 +1,35 @@
|
|
1
|
+
<html>
|
2
|
+
<head>
|
3
|
+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
4
|
+
<title>Styleguide</title>
|
5
|
+
<link rel="stylesheet" href="svg_images.css" />
|
6
|
+
<link rel="stylesheet" href="guide2.css" />
|
7
|
+
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/monokai_sublime.min.css">
|
8
|
+
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>
|
9
|
+
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
|
10
|
+
<script src="guide.js"></script>
|
11
|
+
</head>
|
12
|
+
<body am-grid>
|
13
|
+
<div class="container">
|
14
|
+
<h1>Sherv's Styleguide to the Universe</h1>
|
15
|
+
<ul am-grid-col="l:2:12" class="actions">
|
16
|
+
<li><a href="#" rel="buttons">Buttons</a></li>
|
17
|
+
<li><a href="#" rel="banners">Banners</a></li>
|
18
|
+
<li><a href="#" rel="typography">Typography</a></li>
|
19
|
+
<li><a href="#" rel="paragraphs">Paragraphs</a></li>
|
20
|
+
<li><a href="#" rel="testimonials">Testimonials</a></li>
|
21
|
+
<li><a href="#" rel="avatars">Avatars</a></li>
|
22
|
+
<li><a href="#" rel="colors">Colors</a></li>
|
23
|
+
<li><a href="#" rel="links">Links</a></li>
|
24
|
+
<li><a href="#" rel="forms">Forms</a></li>
|
25
|
+
</ul>
|
26
|
+
<aside am-grid-col="l:10:12">
|
27
|
+
<div id='content'></div>
|
28
|
+
</aside>
|
29
|
+
</div>
|
30
|
+
<script>
|
31
|
+
setupActions();
|
32
|
+
loadContent($('.actions a:first')[0].rel)
|
33
|
+
</script>
|
34
|
+
</body>
|
35
|
+
</html>
|
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.94
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -255,6 +255,12 @@ files:
|
|
255
255
|
- app/assets/stylesheets/thirdparty/video-js.scss
|
256
256
|
- bin/smock
|
257
257
|
- examples/atoms.html
|
258
|
+
- examples/avatars.html
|
259
|
+
- examples/banners.html
|
260
|
+
- examples/buttons.html
|
261
|
+
- examples/colors.html
|
262
|
+
- examples/forms.html
|
263
|
+
- examples/links.html
|
258
264
|
- examples/molecules.html
|
259
265
|
- examples/organisims.html
|
260
266
|
- examples/pages/affiliates.html
|
@@ -346,8 +352,15 @@ files:
|
|
346
352
|
- examples/pages/profile.html
|
347
353
|
- examples/pages/service.html
|
348
354
|
- examples/pages/testimonials.html
|
355
|
+
- examples/pagination.html
|
356
|
+
- examples/paragraphs.html
|
357
|
+
- examples/testimonials.html
|
358
|
+
- examples/typography.html
|
359
|
+
- guide.js
|
349
360
|
- guide.sass
|
361
|
+
- guide2.sass
|
350
362
|
- index.html
|
363
|
+
- index2.html
|
351
364
|
- lib/smock.rb
|
352
365
|
- lib/smock/engine.rb
|
353
366
|
- lib/smock/generator.rb
|
@@ -372,7 +385,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
372
385
|
version: '0'
|
373
386
|
segments:
|
374
387
|
- 0
|
375
|
-
hash: -
|
388
|
+
hash: -1343171327614109855
|
376
389
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
377
390
|
none: false
|
378
391
|
requirements:
|
@@ -381,7 +394,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
381
394
|
version: '0'
|
382
395
|
segments:
|
383
396
|
- 0
|
384
|
-
hash: -
|
397
|
+
hash: -1343171327614109855
|
385
398
|
requirements: []
|
386
399
|
rubyforge_project: smock
|
387
400
|
rubygems_version: 1.8.21
|