Style Guide

All the goodies you need to know about

Background Colors


.bg-primary

.bg-success

.bg-info

.bg-warning

.bg-danger

.bg-inverse


Headers/Copy


H1 Followed by p Tag

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

H2 Followed by p Tag

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

H3 Followed by p Tag

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

H4 Followed by p Tag

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

H5 Followed by p Tag

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

H6 Followed by p Tag

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Full Width Banner Image

Utilizing Background Images only

Size is 1600x550 and it crops in from sides. Copy is align center.


View Code

Left Banner

<div class="bg33-md bg40-sm bg-half-xs dark-boxshadow" style="background-image:url('http://lorempixel.com/1600/550/people/2/');">
	<!--need to inline the image as a bg-img -->
	<!-- many different ratios to choose from-->
	<!-- need this div to left/center/right copy-->
	<div class="left-pos">
		<h1>Full Width Banner Image</h1>
		<p>Size is 1600x550 and it crops in from sides. Copy is align center.</p>
		<button class="btn btn-primary action-link btn-sm" type="button">Primary</button>
	</div>
	<!-- end need this div to left/center/right copy-->
</div>
							

Centered banner

<div class="bg33-md bg40-sm bg-half-xs dark-boxshadow" style="background-image:url('http://lorempixel.com/1600/550/people/2/');">
	<!--need to inline the image as a bg-img -->
	<!-- many different ratios to choose from-->
	<!-- need this div to left/center/right copy-->
	<div class="center-pos">
		<h1>Full Width Banner Image</h1>
		<p>Size is 1600x550 and it crops in from sides. Copy is align center.</p>
		<button class="btn btn-primary action-link btn-sm" type="button">Primary</button>
	</div>
	<!-- end need this div to left/center/right copy-->
</div>
						

Right Banner

<div class="bg33-md bg40-sm bg-half-xs dark-boxshadow" style="background-image:url('http://lorempixel.com/1600/550/people/2/');">
	<!--need to inline the image as a bg-img -->
	<!-- many different ratios to choose from-->
	<!-- need this div to left/center/right copy-->
	<div class="right-pos">
		<h1>Full Width Banner Image</h1>
		<p>Size is 1600x550 and it crops in from sides. Copy is align center.</p>
		<button class="btn btn-primary action-link btn-sm" type="button">Primary</button>
	</div>
	<!-- end need this div to left/center/right copy-->
</div>
						

Buttons



View Code

Button Code

<!-- '.action-link' gives the left chevron after the cta link--> 
		<!-- Standard button -->
		<button class="btn btn-default action-link btn-sm" type="button">Default</button>
		
		<!-- Inverse button -->
		<button class="btn btn-inverse action-link btn-sm" type="button">Inverse</button>
		
		<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
		<button class="btn btn-primary action-link btn-sm" type="button">Primary</button>
		
		<!-- Indicates a successful or positive action -->
		<button class="btn btn-success action-link btn-sm" type="button">Success</button>
		
		<!-- Contextual button for informational alert messages -->
		<button class="btn btn-info action-link btn-sm" type="button">Info</button>
		
		<!-- Indicates caution should be taken with this action -->
		<button class="btn btn-warning action-link btn-sm" type="button">Warning</button>
		
		<!-- Indicates a dangerous or potentially negative action -->
		<a href="" class="btn btn-danger action-link" type="button">Danger</button>
		
		<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
		<button class="btn btn-link action-link btn-sm" type="button">Link</button>
						
						

Progress Bars


Progress Bar Title - Success
10% Complete (success)
30% Complete (success)
Progress Bar Title - Info
50% Complete (info)
Progress Bar Title - Warning
70% Complete (warning)
Progress Bar Title - Danger
90% Complete (danger)

View Code

Progress Bar Code

<h6>Progress Bar Title - Success</h6>
			<div class="progress">
				<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%">
					<span class="sr-only">10% Complete (success)</span>
				</div>
			</div>
			<div class="progress">
				<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
					<span class="sr-only">30% Complete (success)</span>
				</div>
			</div>
			<h6>Progress Bar Title - Info</h6>
			<div class="progress">
				<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
					<span class="sr-only">50% Complete (info)</span>
				</div>
			</div>
			<h6>Progress Bar Title - Warning</h6>
			<div class="progress">
				<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
					<span class="sr-only">70% Complete (warning)</span>
				</div>
			</div>
			<h6>Progress Bar Title - Danger</h6>
			<div class="progress">
				<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
					<span class="sr-only">90% Complete (danger)</span>
				</div>
			</div>
					

Panels


Basic panel example

Panel title

Panel content

Panel title

Panel content

.panel-primary

Panel content

.panel-success

Panel content

.panel-info

Panel content

.panel-warning

Panel content

.panel-danger

Panel content

View Code

Panel Code

<!-- Default panel-->
			<div class="panel panel-default">
				<div class="panel-body"> Basic panel example </div>
			</div>
			<!-- Default panel with Heading-->
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">Panel title</h3>
				</div>
				<div class="panel-body"> Panel content </div>
			</div>
			<!-- Default panel w/heading and footer-->
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">Panel title</h3>
				</div>
				<div class="panel-body"> Panel content </div>
				<div class="panel-footer">Panel footer</div>
			</div>
					

Modal


Launch Modal

View Code

Modal Code

<!-- Button trigger modal -->
		<div class="btn btn-primary" type="button">
			<a data-toggle="modal" data-target="#myModal">Launch Modal</a>
		</div>
		<!-- Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">Modal title</h4>
					</div>
					<div class="modal-body">
						<img src="http://lorempixel.com/1920/1080/transport/10/" width="100%"/>
						<p>This is a regular ole p tag in the 'modal-body'</p>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					</div>
				</div>
			</div>
		</div>
		
					

Tooltips


You can wrap these around font awesome icons


View Code

Tooltip Code

<!-- HTML to write --> 
		<!-- To get this to work properly you need to initialize it on the pages you want it on with the below script making sure it loads after the footer/bootstrap JS--> 
		<!-- <script>
				$("[data-toggle=tooltip]").tooltip();
			</script>
		--> 
		<a class="btn btn-primary" data-toggle="tooltip" data-container="body" data-placement="left" title="Tooltip on left">Tooltip on left</a>
		<a class="btn btn-primary" data-toggle="tooltip" data-container="body" data-placement="top" title="Tooltip on top">Tooltip on top</a>
		<a class="btn btn-primary" data-toggle="tooltip" data-container="body" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a>
		<a class="btn btn-primary" data-toggle="tooltip" data-container="body" data-placement="right" title="Tooltip on right">Tooltip on right</a>
						
						

Responsive Video Embeds



View Code

Responsive Embeds Code

<!-- You can embed multiple Youtube videos on a page -->
<div class="max-1080">
	<div class="embed-responsive embed-responsive-16by9">
		<meta itemprop="thumbnailURL" content="http://secondcropcreative.com/video/images/loks.jpg" />
		<meta itemprop="uploadDate" content="Sep 14, 2015" />
		<meta itemprop="embedURL" content="http://youtube.com/embed/6XHz8nvqwuk?rel=0&hd=1" />
		<meta itemprop="name" content="Live on King Street 2014 - Cracker" />
		<meta itemprop="description" content="Cracker performing Live on King Street in Madison, WI in front of The Majestic Theater." />
		<div class="youtube" id="6XHz8nvqwuk">
			<img data-original="/images/loks-cracker-thumb.jpg" width="100%" class="thumb lazyload" />
		</div>
	</div>
</div>
<!-- Include the JavaScript only once (should already be in footer)-->
						

FLEXBOX


Title of the Video Goes Here

This could be a description for the video. These videos should have some copy associated with them to help with seo. Let's tr and write some shit for these videos.


View Code

FLEX

<div class="row row-eq-height txt-center">
	<!-- Centered Next to image -->
	<div class="col-xs-12 col-sm-8 no-pad">
		<div class="max-1080">
			<div class="embed-responsive embed-responsive-16by9">
				<div class="youtube" id="J6XsdYpoyg0">
					<img data-original="http://placehold.it/1080x608/117fe8/fff&text=Thumbnail" width="100%" class="thumb lazyload" />
				</div>
			</div>
		</div>
	</div>
	<div class="col-xs-12 col-sm-4 no-pad">
		<h1 class="txt-inherit museo-sans-black">Title of the Video Goes Here</h1>
		<p>This could be a description for the video. These videos should have some copy associated with them to help with seo. Let's tr and write some shit for these videos.</p>
	</div>
	<!-- end Centered Next ot image -->
</div>
							

Fancybox Gallery


Walk the Moon #1 Walk the Moon #2 Walk the Moon #3 Walk the Moon #4

View Code

Fancybox Gallery

<a class="fancybox" href="images/Walk-the-Moon_01.jpg" data-fancybox-group="gallery"><img src="images/Walk-the-Moon_01-thumb.jpg" alt="Walk the Moon #1" /></a>
<a class="fancybox" href="images/Walk-the-Moon_02.jpg" data-fancybox-group="gallery"><img src="images/Walk-the-Moon_02-thumb.jpg" alt="Walk the Moon #2" /></a>
<a class="fancybox" href="images/Walk-the-Moon_03.jpg" data-fancybox-group="gallery"><img src="images/Walk-the-Moon_03-thumb.jpg" alt="Walk the Moon #3" /></a>
<a class="fancybox" href="images/Walk-the-Moon_04.jpg" data-fancybox-group="gallery"><img src="images/Walk-the-Moon_04-thumb.jpg" alt="Walk the Moon #4" /></a> 

<script>
//fancybox
$(document).ready(function() {
	$(".fancybox").fancybox({
		//Use Alt atribute
		beforeShow: function() {
			var alt = this.element.find('img').attr('alt');

			this.inner.find('img').attr('alt', alt);

			this.title = alt;
			/* Disable right click */
			$.fancybox.wrap.bind("contextmenu", function(e) {
				return false;
			});
		},

		// For all options go to http://fancyapps.com/fancybox/
		padding : 4,
		fitToView: true,
		autoSize: true,
		closeClick: true,
		openEffect: 'fade',
		closeEffect: 'fade',
		helpers: {
			title: {
				type: 'outside'
			},
			overlay: {
				css: {
					'background': 'rgba(0, 0, 0, 0.9)'
				},
				locked: false
			}

		},
		mouseWheel: false,
		nextEffect: 'fade',
		prevEffect: 'fade'
	});
});
</script>
							
TOP