Joomla 3 Bootstrap Responsive template workshop for Joomla Webdesigner Magazine

This Joomla 3 template is created for a workshop in the Dutch Joomla Webdesigner Magazine 2015.

The workshop explains how to use the possibilities of Joomla 3 in your template. It makes use of Bootstrap and the 'Joomla User Interface' (JUI) Library.

The result is a simple one page responsive website with less then 50 lines of custom CSS.

In this repository you will find the code needed for each of the steps in the workshop.

Step 1

View code changes: https://github.com/sanderpotjer/jbr/commit/7aa1456099ce1a54805fdba99a4e7aba7227b0e2

Step 2

View code changes: https://github.com/sanderpotjer/jbr/commit/c2210ed035061c29719f85d0d2fd0ae9578034c6

Step 3

View code changes: https://github.com/sanderpotjer/jbr/commit/26f1c3160e708657e86dc4af1611d58bfa91feab

Step 7

View code changes: https://github.com/sanderpotjer/jbr/commit/517ad7be340af19527f770658a9d6af1599fa549

Step 8

<img alt="Joomla Bootstrap Responsive" src="templates/jbr/images/joomla.jpg" />
<h1>Responsive websites met Joomla & Bootstrap</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>

Step 9

<div class="span3">
  <img src="templates/jbr/images/avatar.jpg" class="img-circle" alt="Dit ben ik">
</div>
<div class="span3">
  <address>
		<strong>JBR Webdesign</strong><br>
		Straatnaam 12<br>
		1234 AZ Plaats<br>
	</address>
	<address>
		<abbr title="Mobiel">M:</abbr> (+31)6 12345678<br/>
		<abbr title="Twitter">T:</abbr> <a href="#">@jbrwebdesign</a><br/>
		<abbr title="Twitter">E:</abbr> <a href="#">[email protected]</a>
	</address>
	<address>
		<abbr title="Kamer van Koophandel">KvK:</abbr> 12345678<br/>
		<abbr title="BTW Nummer">BTW:</abbr> NL123456789B01<br/>
	</address>
</div>
<div class="span6">
	<iframe width="100%" scrolling="no" height="220" frameborder="0" marginwidth="0" marginheight="0" src="http://maps.google.nl/?ie=UTF8&amp;t=p&amp;ll=52.378953,4.906769&amp;spn=0.167661,0.547943&amp;z=10&amp;output=embed"></iframe>
</div>

Step 10

<p>Ut tellus est, mattis vel tincidunt a, pulvinar sed sapien. In hendrerit cursus lectus, non consectetur quam facilisis eu. Quisque vulputate lectus nec felis blandit placerat. </p>
<p><a href="#contact" class="btn btn-block"><span class="icon-mail-2"></span> Neem contact op</a></p>

Step 11

<p><span class="badge badge-info">Joomla 3</span> <span class="badge badge-warning">Bootstrap</span></p>

Step 13

View code changes: https://github.com/sanderpotjer/jbr/commit/312672abca5fdac53f801b643ace4569a5f45847

Step 15

View code changes: https://github.com/sanderpotjer/jbr/commit/15057f6f8cbc29e20f209417f56b98815e5c1159

Step 17

View code changes: https://github.com/sanderpotjer/jbr/commit/898b35f9f60b30c6cd67ad7003f274a49f8099c4

Step 18

View code changes: https://github.com/sanderpotjer/jbr/commit/f149efaa87f82b9de03c65643b5718758ad6adc7

Step 19

View code changes: https://github.com/sanderpotjer/jbr/commit/70fd6b72653c6f89884cf8877d8a211fce616062