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 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