smock 0.1.93 → 0.1.94
Sign up to get free protection for your applications and to get access to all the features.
- 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
|