Class agenda

• What is Bootstrap?
• How King County uses Bootstrap
• Custom code
• Bootstrap components
  • Typography
  • Icons
  • Images
  • Labels
  • Thumbnails
  • Calendar
  • News feed
  • Grid

Who this class for

Developers who know HTML, CSS and JavaScript.

Content owners who want more control of their pages.

People who are about to migrate.

Who this class is not for

Regular content editors (minimal contact with Sitecore)

How to use Sitecore?

Using Twitter Bootstrap

TRY IT: Use TBS code to create a panel with a heading.

• Log into http://edit.kingcounty.gov/sitcore
• Navigate to sites/help/training/2014-09-15
• Right-click and choose duplicate
• Rename your-site to your name
• Add a 2-column addon to your page
• Click Edit HTML and copy the code from panels into the the editor
• Save and preview your page
• Extra credit: add a panel with a colored background

Using Twitter Bootstrap

Solution

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

Custom code

King County policy on custom code

• Strongly urge to not use custom code
• Creates major problems with global changes and updates
• Breaks consistent look and feel
• Pages take longer to download
• Bootstrap offers hundreds of solutions
• If you use custom code on your page, you are responsible for it.

Custom code workflow

Where to put custom code?

• Media library
• Globals section
• Recommended in customHead and customScript sections
  • CustomHead for CSS
  • CustomScript for javascript

Typography

Typography

TRY IT: Create an addon and add a blockquote and anchor buttons

EXTRA CREDIT: Add a a portal list

Typography

								<blockquote>To infinity and beyond</blockquote>
<a target="_blank" href="http://www.google.com" role="button" class="btn btn-default">Link </a>


<div class="portal-list">
	<h2>List title</h2>
	<ul>
  	<li><a target="_blank" href="#">Lorem ipsum</a></li>
  	<li><a target="_blank" href="#">Phasellus iaculis</a></li>
  	<li><a target="_blank" href="#">Nulla volutpat</a></li>
	</ul>
</div>
							

Icons

Font Awesome Version 4.1.0

TRY IT: Insert a facebook icon to a button link

EXTRA CREDIT: Color your icons

Icons

								<a target="_blank" href="http://www.google.com" role="button" class="btn btn-default">
	<i class="fa-facebook-square"></i> Like me
</a>
							

Images

By default all images are responsive

Make images not responsive by adding class .img-non-responsive

Images

TRY IT: Add an image that floats to right of text

Images

								<img src="http://lorempixel.com/250/250/animals/color/" class="pull-right">
<p>Lorem ipsum dolor sit amet, consectetuer 
	adipiscing elit. Aenean commodo ligula eget dolor.
</p>
							

Calendar

Calendar

TRY IT: Add a calendar to an addon

Make sure to add JavaScript snippet to customCode section

King County styleguide

Calendar

								<div id="my-cal"></div>
<script>
$('#my-cal').eventsCalendar({
  calNum: '69gk-ky9a'
});
</script>
							

News Feed

News Feed

TRY IT: Add a news feed to an addon

Make sure to add Javascript snippet to customCode section

News Feed

								<div id="my-news"></div>
<script>
$('#my-news').deliciousNewsFeed({
	title: 'My News Feed'
});
</script>
							

Thumbnails

TRY IT: Add a row of thumbails to an addon

EXTRA CREDIT: Add a title, text and buttons to thumbnail

Thumbnails

								<div class="row">
  <div class="col-xs-6 col-md-3"><a target="_blank" href="#" class="thumbnail"><img src="http://placekitten.com/171/180"></a></div>
  <div class="col-xs-6 col-md-3"><a target="_blank" href="#" class="thumbnail"><img src="http://placekitten.com/171/180"></a></div>
  <div class="col-xs-6 col-md-3"><a target="_blank" href="#" class="thumbnail"><img src="http://placekitten.com/171/180"></a></div>
  <div class="col-xs-6 col-md-3"><a target="_blank" href="#" class="thumbnail"><img src="http://placekitten.com/171/180"></a></div>
</div>
							

Labels

TRY IT: Add a label

Labels

								<p>
	Example heading 
	<span class="label label-default">New</span>
</p>
							

12-column grid

Twitter Bootstrap uses a 12-column grid system

12-column grid

Grid automatically stacks at mobile.

Desktop view

Mobile view

12-column grid

Use visibility classes to toggle visibility of sections at certain sizes

12-column grid

TRY IT: Create a div with text and hide it from mobile view.

12-column grid

								<div>
	<p> Lots of text I don't want anyone using on an mobile device to see</p>
</div>