Snippets

Floating Images

Image 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum.

Image 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum.

Lightbox Gallery

Image 3


<p>
	<a href="image.jpg" class="lightbox-gallery" title="Your Caption">
		<img src="image.jpg" class="image-full-width" alt="Image Title">
	</a>
</p>

Highlight Text

The term specular means that light is perfectly reflected in a mirror-like way from the light source to the viewer. Specular reflection is visible only where the surface normal is oriented precisely halfway between the direction of incoming light and the direction of the viewer. This is called the half-angle direction because it bisects (divides into halves) the angle between the incoming light and the viewer. Thus, a specularly reflecting surface would show a specular highlight as the perfectly sharp reflected image of a light source. However, many shiny objects show blurred specular highlights.


<span class="highlight">This text will be highlighted</span>

Pull Quotes

Readability can also be compromised by letter-spacing, word spacing, or leading that is too tight or too loose. It can be improved when generous vertical space separates lines of text, making it easier for the eye to distinguish one line from the next, or previous line. Poorly designed fonts and those that are too tightly or loosely fitted can also result in poor legibility.

By formulating a style guide, a periodical standardizes
on a relatively small collection of typefaces

Typography is an element of all printed material. Periodical publications, especially newspapers and magazines, use typographical elements to achieve an attractive, distinctive appearance, to aid readers in navigating the publication, and in some cases for dramatic effect. By formulating a style guide, a periodical standardizes on a relatively small collection of typefaces, each used for specific elements within the publication, and makes consistent use of type sizes, italic, boldface, large and small capital letters, colors, and other typographic features.


<p class="pullquote">By formulating a style guide, a periodical standardizes...</p>

Block Quotes

This is a Blockquote - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.

Jonathan Doe


<blockquote>
	<p>
		<strong>This is a Blockquote</strong> - Lorem ipsum dolor sit
		amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod ut
		laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
		veniam.
	</p>
	
	<p><cite>Jonathan Doe</cite></p>
</blockquote>


Talk Balloons

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.

Jonathan Doe


<div class="bubble">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
	nibh euismod ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
	minim veniam.</p>
</div>

<p class="citation">Jonathan Doe</p>

Lists

  1. Ordered List item 1
  2. Ordered List item 2
  3. Ordered List item 3
  4. Ordered List item 4
    1. Nested List item A (with Roman Numerals)
    2. Nested List item B (with Roman Numerals)
    3. Nested List item C (with Roman Numerals)
  5. Ordered List item 5
  6. Ordered List item 6
  • Unordered List item 1
  • Unordered List item 2
  • Unordered List item 3
  • Unordered List item 4
    • Nested List item A
    • Nested List item B
    • Nested List item C
  • Unordered List item 5
  • Unordered List item 6

Tabs

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis placerat dolor id aliquet. Sed a orci in justo blandit commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

Section 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis placerat dolor id aliquet. Sed a orci in justo blandit commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

Section 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis placerat dolor id aliquet. Sed a orci in justo blandit commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.


<ul class='tabs'>
	<li><a href='#tab1'>Tab 1</a></li>
	<li><a href='#tab2'>Tab 2</a></li>
	<li><a href='#tab3'>Tab 3</a></li>
</ul>
<div id="tab1" class="tab-panel">
	<h3>Section 1</h3>
	<p>Your copy goes here....</p>
</div>
<div id="tab2" class="tab-panel">
	<h3>Section 2</h3>
	<p>Your copy goes here...</p>
</div>
<div id="tab3" class="tab-panel">
	<h3>Section 3</h3>
	<p>Your copy goes here...</p>
</div>

Accordion

Section 1

Title 1

Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim.

Section 2

Title 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim.

Section 3

Title 3

Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna.


<section class="accordion">
	<div class="expandee">
		<div class="trigger">Section 1</div>
		<div class="target">
			<h3>Title 1</h3>
			<p>Your copy goes here...</p>
		</div>
	</div>
	<div class="expandee">
		<div class="trigger">Section 2</div>
		<div class="target">
			<h3>Title 2</h3>
			<p>Your copy goes here...</p>
		</div>
	</div>
	<div class="expandee">
		<div class="trigger">Section 3</div>
		<div class="target">
			<h3>Title 3</h3>
			<p>Your copy goes here...</p>
		</div>
	</div>
</section>

Lightbox Message

To create a message in a Lightbox window, simply create a normal page in Shopify and select the "page.lightbox" template. Then link to that page, adding the class "lightbox-message" as shown in the snippet below.

View Lightbox Message



<p>
	<a class="lightbox-message" href="lightbox-message" title="Your Caption">
		View Lightbox Message
	</a>
</p>

Buttons

Button Button Button Button Button Button Button Button


<p><a class="button blue" href="#">Blue Button</a></p>

Table

Header 1 Header 2 Header 3 Header 4
A1 B1 C1 D1
A2 B2 C2 D2
A3 B3 C3 D3
A4 B4 C4 D4

Alerts

I'm a message box! Insert a link and some text here.

I'm a message box! Insert a link and some text here.

I'm a message box! Insert a link and some text here.

I'm a message box! Insert a link and some text here.

Definition Lists

Apples
The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple.
Oranges
The orange (specifically, the sweet orange) is the fruit of the citrus species Citrus × sinensis in the family Rutaceae.

<dl class="table-display">
	<dt>Apples</dt>
	<dd>The apple tree is a deciduous tree in the rose family...</dd>
	<dt>Oranges</dt>
	<dd>The orange is the fruit of the citrus species...</dd>
</dl>

Full Width Video

Vibrant includes support for full-width videos. Embedded videos automatically expands to fill the available width of the layout. This currently works with popular video services, including: YouTube, Vimeo, Blip.tv, Viddler and even Kickstarter. It works automatically with the regular embed code that these sites normally provide.


<p>
	<iframe 
		src="https://player.vimeo.com/video/91054620?color=ffffff&title=0&byline=0&portrait=0" 
		width="1280" height="720" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
	</iframe>
</p>

Grid Columns

1/2 Column

A column that carries the load down to a foundation must have means to transfer the load without overstressing the foundation material. Reinforced concrete and masonry columns are generally built directly on top of concrete foundations. When seated on a concrete foundation, a steel column must have a base plate to spread the load over a larger area, and thereby reduce the bearing pressure. The base plate is a thick, rectangular steel plate usually welded to the bottom end of the column.

1/2 Column

A column that carries the load down to a foundation must have means to transfer the load without overstressing the foundation material. Reinforced concrete and masonry columns are generally built directly on top of concrete foundations. When seated on a concrete foundation, a steel column must have a base plate to spread the load over a larger area, and thereby reduce the bearing pressure. The base plate is a thick, rectangular steel plate usually welded to the bottom end of the column.

1/3 Column

A column that carries the load down to a foundation must have means to transfer the load without overstressing the foundation material. Reinforced concrete and masonry columns are generally built directly on top of concrete foundations. When seated on a concrete foundation, a steel column must have a base plate to spread the load over a larger area, and thereby reduce the bearing pressure.

1/3 Column

A column that carries the load down to a foundation must have means to transfer the load without overstressing the foundation material. Reinforced concrete and masonry columns are generally built directly on top of concrete foundations. When seated on a concrete foundation, a steel column must have a base plate to spread the load over a larger area, and thereby reduce the bearing pressure.

1/3 Column

A column that carries the load down to a foundation must have means to transfer the load without overstressing the foundation material. Reinforced concrete and masonry columns are generally built directly on top of concrete foundations. When seated on a concrete foundation, a steel column must have a base plate to spread the load over a larger area, and thereby reduce the bearing pressure.

1/4 Column

A column that carries the load down to a foundation must have means to transfer the load without overstressing the foundation material. Reinforced concrete and masonry columns are generally built directly on top of concrete foundations.

1/4 Column

A column that carries the load down to a foundation must have means to transfer the load without overstressing the foundation material. Reinforced concrete and masonry columns are generally built directly on top of concrete foundations.

1/4 Column

A column that carries the load down to a foundation must have means to transfer the load without overstressing the foundation material. Reinforced concrete and masonry columns are generally built directly on top of concrete foundations.

1/4 Column

A column that carries the load down to a foundation must have means to transfer the load without overstressing the foundation material. Reinforced concrete and masonry columns are generally built directly on top of concrete foundations.


<div class="row clearfix">
	<div class="column-1-2">
		
		<h4>1/2 Column</h4>
		<p>A column that carries the load down to a foundation....</p>
		
	</div>
	<div class="column-1-2">
		
		<h4>1/2 Column</h4>
		<p>A column that carries the load down to a foundation...</p>
		
	</div>
</div>