Style guide

Floating images

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.

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 galleries

<p>
	<a href="image.jpg" class="swipebox" title="Your caption">
		<img src="image.jpg" class="image-full-width" alt="Image title">
	</a>
</p>

Highlights

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>

Inline tweets

Those brushes are nothing more than wings. In recent years, those ashes are nothing more than eggplants. The menseless raincoat reveals itself as a blotchy zoo to those who look. However, their oxygen was, in this moment, a blushless cracker.

Easily create tweetable links from text on a webpage.

<span data-inline-tweet>In recent years, those ashes are nothing more than eggplants.</span>

Block quotes

Their offence was, in this moment, a boughten burst. A hindmost ease is a relative of the mind. A snazzy bay is a hygienic of the mind.

Titus Pullo

<blockquote>
		<p>Their offence was, in this moment, a boughten burst. A hindmost ease is a relative of the mind. A snazzy bay is a hygienic of the mind.</p>
		<cite>Titus Pullo</cite>
</blockquote>

Talk balloons

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

Tabs

• Tab 1
• Tab 2
• Tab 3

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

Accordions

<div class="accordion" data-accordion-group>
	<div data-accordion>
		<button data-control>Section 1</button>
		<div data-content>
			<article>
				<h3>Title 1</h3>
				<p>Your copy goes here...</p>
			</article>
		</div>
	</div>
	<div data-accordion>
		<button data-control>Section 2</button>
		<div data-content>
			<article>
				<h3>Title 2</h3>
				<p>Your copy goes here...</p>
			</article>
		</div>
	</div>
	<div data-accordion>
		<button data-control>Section 3</button>
		<div data-content>
			<article>
				<h3>Title 3</h3>
				<p>Your copy goes here...</p>
			</article>
		</div>
	</div>
</div>

Buttons

Small Default Large

<a class="button button--large" href="#">Large</a>

Tables

Alerts

<div class="alert alert_green">
	<a href="#" class="dismiss-alert"><span class="accent-icon-close"></a>
	<p><strong>I'm a message box!</strong> Insert <a href="#">a link</a> and some text here.</p>
</div>

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 videos

Accent 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 width="1280" height="720" src="https://www.youtube.com/embed/8QX7_HC1Bzg?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</p>

Alternatively you can display a video in a Lightbox window. Supported services include YouTube and Vimeo.

• YouTube Video
• Vimeo Video

<a class="swipebox-video" href="https://www.youtube.com/watch?v=fhpyUbGBhQk">YouTube Video</a>
<a class="swipebox-video" href="http://vimeo.com/91410682">Vimeo Video</a>

Grid columns

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