snippet-box

snippet

An easy way to glam up your truncated comments/reviews/whatever!

For a nice interactive demo, visit: http://jh47.com/snippet/

Installation

bower install snippet

npm install snippet-box

Alternatively, download the latest release from here, and include snippet.css and snippet.js from /dist in an appropriate place within your project.

Usage

It's very easy to set up one of these boxes. Just include snippet.css (or the supplied SASS version) and snippet.js (or the CoffeeScript version) in your page, and then use the following markup:

<div class="snippet-box">
  <div class="snippet-content" style="max-height: CUSTOM-BOX-HEIGHT-VALUE">
    CONTENT GOES HERE
  </div>
  <div class="snippet-expander"></div>
</div>

Append whatever styling classes and data attributes you like to the snippet-expander element. Additionally, you can always style the key divs however you like with your own CSS. More information on the provided stuff below:

Classes

Styles

• snippet-pulldown
• snippet-reveal
• snippet-shutter-vertical
• snippet-shutter-horizontal
• snippet-inline
• snippet-inline-animated

Data Attributes

• data-expand - (the text used for the "more" button, defaults to "more")
• data-collapse - (the text used for the "less" button, defaults to "less")
• data-length - (the number of characters to shorten to in inline mode, defaults to 50)
• data-speed - (the speed of animation in animated inline mode, defaults to 20 words per frame)

Sizes

• snippet-xs
• snippet-sm
• snippet-md
• snippet-lg

Colours

• snippet-text
• snippet-default
• snippet-primary
• snippet-success
• snippet-warning
• snippet-danger

Alignment

• snippet-left
• snippet-center
• snippet-right
• snippet-full

Tint

• snippet-tint-dark
• snippet-tint-light
• snippet-tint-solid

Dependencies

Snippet needs jQuery to run. Bower will pull down at least version 2.2.1, but this version isn't a hard requirement.

Feedback

This is quite a young project so any contributions or bits of feedback are certainly welcome!