Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added SilverStripe templates

  • Loading branch information...
commit 657f650e03897a1c4fbb4c931068a8f129d391d3 1 parent 2084a71
Ryan Wachtl authored
6 README.md
View
@@ -1,17 +1,13 @@
SilverStripe Zurb Foundation Theme
=================================
-Compass starter files for a SilverStripe theme using Zurb Foundation.
+A SilverStripe theme based on Foundation.
Installing
=================================
-Clone to your themes directory
-
`git clone https://github.com/ryanwachtl/silverstripe-zurb-foundation-scss.git foundation`
-(optional) Force update Foundation to latest
-
`[sudo] gem install zurb-foundation`
`compass install -r zurb-foundation foundation/upgrade --force`
2  config.rb
View
@@ -14,7 +14,7 @@
output_style = :compact
# To enable relative paths to assets via compass helper functions. Uncomment:
-# relative_assets = true
+relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false
18 css/app.css
View
@@ -610,12 +610,12 @@ ul.flyout li.active a, .nav-bar li ul li.active a { background: #4d4d4d; border:
/* Note: If your slider only uses content or anchors, you're going to want to put the width and height declarations on the ".orbit>div" and "div.orbit>a" tags in addition to just the .orbit-wrapper */
/* Timer ---------------------- */
div.orbit-wrapper div.timer { width: 40px; height: 40px; overflow: hidden; position: absolute; top: 10px; right: 10px; opacity: .6; cursor: pointer; z-index: 31; }
-div.orbit-wrapper span.rotator { display: block; width: 40px; height: 40px; position: absolute; top: 0; left: -20px; background: url('/images/foundation/orbit/rotator-black.png?1357090533') no-repeat; z-index: 3; }
+div.orbit-wrapper span.rotator { display: block; width: 40px; height: 40px; position: absolute; top: 0; left: -20px; background: url('../images/foundation/orbit/rotator-black.png?1357090533') no-repeat; z-index: 3; }
div.orbit-wrapper span.rotator.move { left: 0; }
div.orbit-wrapper span.mask { display: block; width: 20px; height: 40px; position: absolute; top: 0; right: 0; z-index: 2; overflow: hidden; }
-div.orbit-wrapper span.mask.move { width: 40px; left: 0; background: url('/images/foundation/orbit/timer-black.png?1357090533') repeat 0 0; }
-div.orbit-wrapper span.pause { display: block; width: 40px; height: 40px; position: absolute; top: 0; left: 0; background: url('/images/foundation/orbit/pause-black.png?1357090533') no-repeat; z-index: 4; opacity: 0; }
-div.orbit-wrapper span.pause.active { background: url('/images/foundation/orbit/pause-black.png?1357090533') no-repeat 0 -40px; }
+div.orbit-wrapper span.mask.move { width: 40px; left: 0; background: url('../images/foundation/orbit/timer-black.png?1357090533') repeat 0 0; }
+div.orbit-wrapper span.pause { display: block; width: 40px; height: 40px; position: absolute; top: 0; left: 0; background: url('../images/foundation/orbit/pause-black.png?1357090533') no-repeat; z-index: 4; opacity: 0; }
+div.orbit-wrapper span.pause.active { background: url('../images/foundation/orbit/pause-black.png?1357090533') no-repeat 0 -40px; }
div.orbit-wrapper div.timer:hover span.pause, div.orbit-wrapper div.timer:focus span.pause, div.orbit-wrapper span.pause.active { opacity: 1; }
/* Captions ---------------------- */
@@ -626,15 +626,15 @@ div.orbit-wrapper div.timer:hover span.pause, div.orbit-wrapper div.timer:focus
/* Directional Nav ---------------------- */
div.orbit-wrapper div.slider-nav { display: block; }
div.orbit-wrapper div.slider-nav span { width: 39px; height: 50px; text-indent: -9999px; position: absolute; z-index: 30; top: 50%; margin-top: -25px; cursor: pointer; }
-div.orbit-wrapper div.slider-nav span.right { background: url('/images/foundation/orbit/right-arrow.png?1357090533'); background-size: 100%; right: 0; }
-div.orbit-wrapper div.slider-nav span.left { background: url('/images/foundation/orbit/left-arrow.png?1357090533'); background-size: 100%; left: 0; }
+div.orbit-wrapper div.slider-nav span.right { background: url('../images/foundation/orbit/right-arrow.png?1357090533'); background-size: 100%; right: 0; }
+div.orbit-wrapper div.slider-nav span.left { background: url('../images/foundation/orbit/left-arrow.png?1357090533'); background-size: 100%; left: 0; }
-.lt-ie9 div.orbit-wrapper div.slider-nav span.right { background: url('/images/foundation/orbit/right-arrow-small.png?1357090533'); }
-.lt-ie9 div.orbit-wrapper div.slider-nav span.left { background: url('/images/foundation/orbit/left-arrow-small.png?1357090533'); }
+.lt-ie9 div.orbit-wrapper div.slider-nav span.right { background: url('../images/foundation/orbit/right-arrow-small.png?1357090533'); }
+.lt-ie9 div.orbit-wrapper div.slider-nav span.left { background: url('../images/foundation/orbit/left-arrow-small.png?1357090533'); }
/* Bullet Nav ---------------------- */
ul.orbit-bullets { position: absolute; z-index: 30; list-style: none; bottom: -40px; left: 50%; margin-left: -50px; padding: 0; }
-ul.orbit-bullets li { float: left; margin-left: 5px; cursor: pointer; color: #999999; text-indent: -9999px; background: url('/images/foundation/orbit/bullets.jpg?1357090533') no-repeat 4px 0; width: 13px; height: 12px; overflow: hidden; }
+ul.orbit-bullets li { float: left; margin-left: 5px; cursor: pointer; color: #999999; text-indent: -9999px; background: url('../images/foundation/orbit/bullets.jpg?1357090533') no-repeat 4px 0; width: 13px; height: 12px; overflow: hidden; }
ul.orbit-bullets li.active { color: #222222; background-position: -8px 0; }
ul.orbit-bullets li.has-thumb { background: none; width: 100px; height: 75px; }
ul.orbit-bullets li.active.has-thumb { background-position: 0 0; border-top: 2px solid black; }
BIN  images/orbit-demo/demo1.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  images/orbit-demo/demo2.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  images/orbit-demo/demo3.jpg
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 templates/BreadcrumbsTemplate.ss
View
@@ -0,0 +1,8 @@
+<% if Pages %>
+ <% if InSection(home) %><% else %>
+ <li><span><a href="home/">Home</a></span></li>
+ <% end_if %>
+ <% loop Pages %>
+ <% if Last %><li class="current"><span>$Title.XML</span></li><% else %><li><a href="$Link">$MenuTitle.XML</a></li><% end_if %>
+ <% end_loop %>
+<% end_if %>
3  templates/Includes/BreadCrumbs.ss
View
@@ -0,0 +1,3 @@
+<ul class="breadcrumbs">
+ $Breadcrumbs
+</ul>
19 templates/Includes/Navigation.ss
View
@@ -0,0 +1,19 @@
+<div class="row">
+ <div class="twelve columns">
+ <ul class="nav-bar">
+ <% loop Menu(1) %>
+ <li class="<% if LinkingMode == current %>active<% end_if %><% if Children %> has-flyout<% end_if %>">
+ <a href="$Link" title="Go to the $Title.XML page">$MenuTitle.XML</a>
+ <% if Children %>
+ <a href="#" class="flyout-toggle"><span> </span></a>
+ <ul class="flyout">
+ <% loop Children %>
+ <li><a href="$Link" title="Go to the $Title.XML page">$MenuTitle.XML</a></li>
+ <% end_loop %>
+ </ul>
+ <% end_if %>
+ </li>
+ <% end_loop %>
+ </ul>
+ </div>
+</div>
9 templates/Includes/SideBar.ss
View
@@ -0,0 +1,9 @@
+<% if Menu(2) %>
+ <% if Children %>
+ <ul class="side-nav">
+ <li>$Title</li>
+ <li class="divider"></li>
+ <% include SidebarMenu %>
+ </ul>
+ <% end_if %>
+<% end_if %>
12 templates/Includes/SidebarMenu.ss
View
@@ -0,0 +1,12 @@
+<% if Children %>
+ <% loop Children %>
+ <li class="<% if LinkingMode == current %>active<% end_if %>">
+ <a href="$Link">$MenuTitle.XML</a>
+ <% if Children %>
+ <ul>
+ <% include SidebarMenu %>
+ </ul>
+ <% end_if %>
+ </li>
+ <% end_loop %>
+<% end_if %>
16 templates/Layout/Page.ss
View
@@ -0,0 +1,16 @@
+<div class="row">
+
+ <div class="<% if Menu(2) %>nine<% else %>twelve<% end_if %> columns">
+ <h3>$Title</h3>
+ $Content
+ $Form
+ $PageComments
+ </div>
+
+ <% if Menu(2) %>
+ <div class="three columns">
+ <% include SideBar %>
+ </div>
+ <% end_if %>
+
+</div>
43 templates/Layout/Page_results.ss
View
@@ -0,0 +1,43 @@
+<div class="row">
+ <div class="twelve columns">
+ <% if $Query %>
+ <p class="searchQuery">You searched for &quot;{$Query}&quot;</p>
+ <% end_if %>
+
+ <% if $Results %>
+ <% loop $Results %>
+ <!-- Feed Entry -->
+ <div class="row">
+ <div class="two columns mobile-one"><img src="http://placehold.it/80x80&text=[img]" /></div>
+ <div class="ten columns">
+ <h3><a href="$Link">$Title</a></h3>
+ <% if Content %>
+ $Content.FirstParagraph(html)
+ <% end_if %>
+ </div>
+ </div>
+ <!-- End Feed Entry -->
+ <% if $Last %><% else %><hr /><% end_if %>
+ <% end_loop %>
+ <% else %>
+ <p>
+ <%-- Example of a translatable string (see http://doc.silverstripe.org/i18n) --%>
+ <% _t("Page_results.ss.NORESULTS", "Sorry, your search query did not return any results.") %>
+ </p>
+ <% end_if %>
+
+ <% if $Results.MoreThanOnePage %>
+ <ul class="pagination">
+ <li class="arrow <% if $Results.NotFirstPage %><% else %>unavailable<% end_if %>"><a href="">&laquo;</a></li>
+ <% loop $Results.Pages(10) %>
+ <li class="<% if $CurrentBool %>current<% end_if %>"><a href="$Link">$PageNum</a></li>
+ <% end_loop %>
+ <li class="arrow <% if $Results.NotLastPage %><% else %>unavailable<% end_if %>"><a href="">&raquo;</a></li>
+ </ul>
+ <% end_if %>
+
+ <div>
+ <p>Page $Results.CurrentPage of $Results.TotalPages</p>
+ </div>
+ </div>
+</div>
204 templates/Page.ss
View
@@ -2,113 +2,156 @@
<!--[if IE 8]> <html class="no-js lt-ie9" lang="$ContentLocale"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="$ContentLocale"> <!--<![endif]-->
<head>
- <meta charset="utf-8" />
<% base_tag %>
+ <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title><% if $MetaTitle %>$MetaTitle<% else %>$Title<% end_if %> &raquo; $SiteConfig.Title</title>
$MetaTags(false)
- <% require themedCSS('app') %>
+ <link rel="stylesheet" href="{$ThemeDir}/css/app.css">
<script src="{$ThemeDir}/javascript/foundation/modernizr.foundation.js"></script>
</head>
+
<body>
+
<div class="row">
<div class="twelve columns">
- <h2>$Title</h2>
- <p>This is version 3.0.6 released on July 20, 2012.</p>
- <hr />
+ <nav class="top-bar contain-to-grid">
+ <ul>
+ <li class="name"><h1><a href="home/">$SiteConfig.Title</a></h1></li>
+ <li class="toggle-topbar"><a href="#"></a></li>
+ </ul>
+ <section>
+ <ul class="left">
+ <% if $CurrentMember %>
+ <li><a href="Security/Logout">Logout</a></li>
+ <% else %>
+ <li><a href="Security/Login">Login</a></li>
+ <% end_if %>
+ </ul>
+ <% if $SearchForm %>
+ <ul class="right">
+ <li class="search">
+ <form id="SearchForm_SearchForm" action="/home/SearchForm" method="get" enctype="application/x-www-form-urlencoded">
+ <input type="search" name="Search" placeholder="Search" id="SearchForm_SearchForm_Search">
+ </form>
+ </li>
+ </ul>
+ <% end_if %>
+ </section>
+ </nav>
</div>
</div>
+ <% include Navigation %>
+
+ <% if InSection(home) %>
<div class="row">
-
- <div class="eight columns">
- <h3>The Grid</h3>
-
- <!-- Grid Example -->
- <div class="row">
- <div class="twelve columns">
- <div class="panel">
- <p>This is a twelve column section in a row. Each of these includes a div.panel element so you can see where the columns are - it's not required at all for the grid.</p>
- </div>
- </div>
+ <div class="twelve columns">
+ <div id="featured">
+ <img src="{$ThemeDir}/images/orbit-demo/demo1.jpg" />
+ <img src="{$ThemeDir}/images/orbit-demo/demo2.jpg" />
+ <img src="{$ThemeDir}/images/orbit-demo/demo3.jpg" />
</div>
-
+ </div>
+ </div>
+ <% end_if %>
+
+ <div class="main" role="main">
+ <div class="inner typography">
+ $Layout
+ </div>
+ </div>
+
+ <% if InSection(home) %>
+ <div class="row">
+ <div class="twelve columns">
<div class="row">
- <div class="six columns">
- <div class="panel">
- <p>Six columns</p>
- </div>
+ <div class="three mobile-two columns">
+ <img src="http://placehold.it/250x250&text=Thumbnail" />
+ <h6 class="panel">Description</h6>
</div>
- <div class="six columns">
- <div class="panel">
- <p>Six columns</p>
- </div>
+ <div class="three mobile-two columns">
+ <img src="http://placehold.it/250x250&text=Thumbnail" />
+ <h6 class="panel">Description</h6>
+ </div>
+ <div class="three mobile-two columns">
+ <img src="http://placehold.it/250x250&text=Thumbnail" />
+ <h6 class="panel">Description</h6>
+ </div>
+ <div class="three mobile-two columns">
+ <img src="http://placehold.it/250x250&text=Thumbnail" />
+ <h6 class="panel">Description</h6>
</div>
</div>
-
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="twelve columns">
<div class="row">
- <div class="four columns">
- <div class="panel">
- <p>Four columns</p>
+ <div class="eight columns">
+ <div class="panel radius">
+ <div class="row">
+ <div class="six mobile-two columns">
+ <h4>Header</h4><hr/>
+ <h5 class="subheader">Risus ligula, aliquam nec fermentum vitae, sollicitudin eget urna. Donec dignissim nibh fermentum odio ornare sagittis.
+ </h5>
+ <div class="show-for-small" align="center">
+ <a href="#" class="small radius button">Call To Action!</a><br>
+ <a href="#" class="small radius button">Call To Action!</a>
+ </div>
+ </div>
+ <div class="six mobile-two columns">
+ <p>Suspendisse ultrices ornare tempor. Aenean eget ultricies libero. Phasellus non ipsum eros. Vivamus at dignissim massa. Aenean dolor libero, blandit quis interdum et, malesuada nec ligula. Nullam erat erat, eleifend sed pulvinar ac. Suspendisse ultrices ornare tempor. Aenean eget ultricies libero.
+ </p>
+ </div>
+ </div>
</div>
</div>
- <div class="four columns">
- <div class="panel">
- <p>Four columns</p>
- </div>
- </div>
- <div class="four columns">
- <div class="panel">
- <p>Four columns</p>
- </div>
+
+ <div class="four columns hide-for-small">
+ <h4>Get In Touch!</h4><hr/>
+ <a href="#">
+ <div class="panel radius callout" align="center">
+ <strong>Call To Action!</strong>
+ </div>
+ </a>
+ <a href="#">
+ <div class="panel radius callout" align="center">
+ <strong>Call To Action!</strong>
+ </div>
+ </a>
</div>
</div>
-
- <h3>Tabs</h3>
- <dl class="tabs">
- <dd class="active"><a href="#simple1">Simple Tab 1</a></dd>
- <dd><a href="#simple2">Simple Tab 2</a></dd>
- <dd><a href="#simple3">Simple Tab 3</a></dd>
- </dl>
-
- <ul class="tabs-content">
- <li class="active" id="simple1Tab">This is simple tab 1's content. Pretty neat, huh?</li>
- <li id="simple2Tab">This is simple tab 2's content. Now you see it!</li>
- <li id="simple3Tab">This is simple tab 3's content. It's, you know...okay.</li>
- </ul>
-
- <h3>Buttons</h3>
-
+ </div>
+ </div>
+ <% end_if %>
+
+ <div class="row">
+ <div class="twelve columns">
+ <% include Breadcrumbs %>
+ </div>
+ </div>
+
+ <footer class="row">
+ <div class="twelve columns">
<div class="row">
<div class="six columns">
- <p><a href="#" class="small button">Small Button</a></p>
- <p><a href="#" class="button">Medium Button</a></p>
- <p><a href="#" class="large button">Large Button</a></p>
+ <p>&copy; Copyright no one at all. Go to town.</p>
</div>
<div class="six columns">
- <p><a href="#" class="small alert button">Small Alert Button</a></p>
- <p><a href="#" class="success button">Medium Success Button</a></p>
- <p><a href="#" class="large secondary button">Large Secondary Button</a></p>
+ <ul class="link-list right">
+ <% loop Menu(1) %>
+ <li class="<% if LinkingMode == current %>active<% end_if %>">
+ <a href="$Link" title="Go to the $Title.XML page">$MenuTitle.XML</a>
+ </li>
+ <% end_loop %>
+ </ul>
</div>
</div>
-
</div>
-
- <div class="four columns">
- <h4>Getting Started</h4>
- <p>We're stoked you want to try Foundation! To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
-
- <h4>Other Resources</h4>
- <p>Once you've exhausted the fun in this document, you should check out:</p>
- <ul class="disc">
- <li><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</li>
- <li><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</li>
- <li><a href="http://twitter.com/foundationzurb">@foundationzurb</a><br />Ping us on Twitter if you have questions. If you build something with this we'd love to see it (and send you a totally boss sticker).</li>
- </ul>
- </div>
-
- </div>
+ </footer>
<%-- move to mysite/code/page.php --%>
<script src="{$ThemeDir}/javascript/foundation/jquery.js"></script>
@@ -124,5 +167,12 @@
<script src="{$ThemeDir}/javascript/foundation/jquery.foundation.mediaQueryToggle.js"></script>
<script src="{$ThemeDir}/javascript/foundation/jquery.foundation.tabs.js"></script>
<script src="{$ThemeDir}/javascript/foundation/app.js"></script>
+ <% if InSection(home) %>
+ <script type="text/javascript">
+ $(document).ready(function() {
+ $("#featured").orbit();
+ });
+ </script>
+ <% end_if %>
</body>
-</html>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.