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 CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- smock (0.1.93)
4
+ smock (0.1.94)
5
5
  sass (= 3.2.19)
6
6
  thor (= 0.19.1)
7
7
 
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>
@@ -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>
@@ -0,0 +1,7 @@
1
+ <div class="example">
2
+ <a href="#">Navigation Link</a>
3
+ </div>
4
+
5
+ <div class="example">
6
+ <p>This is a paragraph with <a href="#">A basic link</a> inside of it.</p>
7
+ </div>
@@ -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>
@@ -0,0 +1,8 @@
1
+ <div class="example">
2
+ <h1>Heading 1</h1>
3
+ <h2>Heading 2</h2>
4
+ <h3>Heading 3</h3>
5
+ <h4>Heading 4</h4>
6
+ <h5>Heading 5</h5>
7
+ <h6>Heading 6</h6>
8
+ </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.93
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: -1606120737903736144
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: -1606120737903736144
397
+ hash: -1343171327614109855
385
398
  requirements: []
386
399
  rubyforge_project: smock
387
400
  rubygems_version: 1.8.21