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
         
     |