forked from foundation/foundation-sites
/
case-swizzle.php
82 lines (73 loc) · 4.13 KB
/
case-swizzle.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<? $page_title = "Swizzle Case Study" ?>
<?php include("includes/_header.php"); ?>
<!-- Grid BG -->
<div id="gridBgShort" class="container hide-on-phones">
<div class="white-fade"></div>
<div class="row">
<div class="one columns"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div>
</div>
</div>
<!-- /Grid BG -->
<div id="insideContainer" class="container">
<div class="row hide-on-phones">
<a href="index.php" class="back two columns hide-on-phones">← Home</a>
<!-- / Nav -->
</div>
<div class="row">
<div class="twelve columns">
<nav class="on-page hide-on-phones">
<ul>
<li class="current"><a href="case-swizzle.php">Swizzle</a></li>
<li><a href="case-soapbox.php">ZURBsoapbox</a></li>
<li><a href="case-foundation.php">Foundation</a></li>
<li><a href="case-reel.php">Reel</a></li>
<li><a href="case-zurbjobs.php">ZURBjobs</a></li>
</ul>
</nav>
<h1 class="light-weight">Get Swizzle</h1>
</div>
</div>
<div class="row">
<div class="eight columns">
<div class="frame"><img src="images/case-swizzle.jpg"></div>
</div>
<div class="four columns">
<h4>Beautiful and Built<br />in the Browser</h4>
<p>We were thrilled to see this site for Swizzle, an online service and design studio in Canada. Built on Foundation it's not only beautiful, but scales in incredibly smart ways. <a href="http://www.getswizzle.com">Check it out</a> on your desktop or mobile device to see what we mean, or read below what Laura Hutchinson from Swizzle said about how Foundation helped, and what they have in store next.</p>
</div>
</div>
<br /><br />
<div class="row">
<div class="four columns">
<h5>Built in the Browser</h5>
<img src="images/case-swizzle-1.jpg">
<p>Using Foundation we were able to quickly implement the desktop and mobile site. It was easy to setup the shell how we wanted because the overall width is customizable, and it was fun to experiment with different layouts on the fly using the built-in responsive grid.</p>
</div>
<div class="four columns">
<h5>Device-Specific Navigation</h5>
<div class="frame"><img src="images/case-swizzle-2.jpg"></div>
<p>We used Foundation's mobile visibility classes to hide the top navigation from mobile devices, and replace it with a menu link (the menu link is hidden from desktops with the visibility classes too). The link anchors to the footer navigation which uses a bit of CSS to change the layout.</p>
</div>
<div class="four columns">
<h5>Next Steps: Client Friendly</h5>
<div class="frame"><img src="images/case-swizzle-3.jpg"></div>
<p>What's next is to switch our client portal over to using Foundation. We've got lots of forms in our client portal, and until now they've been a real headache to style. We're also going to use Reveal for some great interactive features.</p>
</div>
</div>
<br><br>
<div class="row">
<div class="twelve columns">
<a class="hide-on-phones nice blue button right" href="case-reel.php">Case Study: Reel →</a>
<!-- <a class="left hide-on-desktops" href="mobile.php">← Mobility</a> -->
<a class="right show-on-phones" href="case-reel.php">Case Study: Reel →</a>
</div>
<br><br>
<nav class="ten columns show-on-phones">
<ul>
<li><a href="#">Documentation</a></li>
<li><a href="#">On Github</a></li>
<li><a class="nice small blue button src-download" href="files/foundation-download-<?= $version ?>.zip">Download</a></li>
</ul>
</nav>
</div>
<?php include("includes/_footer.php"); ?>