Wireframing with SilverStripe CMS
and Content-first approach

Presented by Pali
Meetup Austria, Vienna, 30. 11. 2013

Best practices

 1. Do not install foundation as global gem!

Use bundler.io for creating project specific gemsets. If you install foundation gem globally, you can be in trouble quickly. Simple gem upgrade will probably update your foundation gem too and simple one line css change in your project built on top of older foundation version becomes a nightmare! 
Guy V. B. - thank you for pointing me on bundler...

[Update on 05.12.2013] Starting from version 5 of Foundation is recommended to install foundation via bower. I just tried it and it looks much cleaner than installing it via bundler as a project specific gem. Major advantage is, that you have version specific javascript files available too and you can control dependencies on other libraries like jquery, modernizr, ...

Example (bower.json):

{
  "name": "maxstarter",
  "private": "true",
  "dependencies": {
    "foundation": "~5.0.2",
    "susy":"~1.0.9",
    "jquery-mmenu": "*",
    "modernizr": "*",
    "jquery": "*",
    "fancybox": "*"
  }
}

2. Turn ON only javascript components, which you really need.

// PHP; Page_Controller.php
Requirements::block("framework/thirdparty/jquery/jquery.js");
Requirements::combine_files(
  'page.js',
  array(
    "themes/main/bower_components/jquery/jquery.min.js",
    "themes/main/bower_components/foundation/js/foundation.js", //all foundation OR custom build - see bellow
    //"themes/main/bower_components/foundation/js/foundation/foundation.js", 
    //"themes/main/bower_components/foundation/js/foundation/foundation.abide.js",
    //"themes/main/bower_components/foundation/js/foundation/foundation.accordion.js",
    //"themes/main/bower_components/foundation/js/foundation/foundation.alert.js",
    //"themes/main/bower_components/foundation/js/foundation/foundation.clearing.js", 
    //"themes/main/bower_components/foundation/js/foundation/foundation.dropdown.js",
    //"themes/main/bower_components/foundation/js/foundation/foundation.interchange.js", 
    //"themes/main/bower_components/foundation/js/foundation/foundation.joyride.js", 
    //"themes/main/bower_components/foundation/js/foundation/foundation.magellan.js", 
    //"themes/main/bower_components/foundation/js/foundation/foundation.offcanvas.js", 
    //"themes/main/bower_components/foundation/js/foundation/foundation.orbit.js", 
    //"themes/main/bower_components/foundation/js/foundation/foundation.reveal.js", 
    //"themes/main/bower_components/foundation/js/foundation/foundation.tab.js", 
    //"themes/main/bower_components/foundation/js/foundation/foundation.tooltip.js", 
    //"themes/main/bower_components/foundation/js/foundation/foundation.topbar.js"
  )
);
Requirements::set_combined_files_folder(ASSETS_DIR."/_compiled");
Requirements::customScript("
  $(document).foundation();
");

3. Be smart, prepare for next project

If you need to create some custom stuff, do it smart, so you can reuse it later. Create some nice set of includes with new SS variable/parameter support, e.g.:

<% include TopBar AllowChildren='false' %> 
<% include InlineList Float="left",LoopThis=$Menu(1) %>

InlineList.ss example:

<ul class="inline-list <% if Float %>$Float<% end_if %>">
    <% loop LoopThis %>
        <% if Link %>
            <li<% if LinkOrSection == section %> class="active"<% end_if %>>
                <a href="$Link" title="$Title.XML">$MenuTitle.XML</a>
            </li>
        <% else %>
            <li>$MenuTitle.XML</li>
        <% end_if %>
    <% end_loop %>
</ul>

Comments

No comments on this article.

komentárový systém: Disqus