We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 33976 ☆ A M B ☆
    • 571 Posts
    While developping website with MODx i found that lots of tasks were recurrent (same pages [credits, legal, 403, 404, sitemap…], functions [contact forms, blogs…], analytics tools…).

    So i considered to build my own custom "framework/templates", as there are others framworks for CSS/JS and master templates (HTML5 Boilerplate).

    If it seems usefull to me, i thought it might be for others MODxers too.

    The idea would be to share our best practices (snippets, chunks, some TVs here and there) to develop websites or interactives prototypes with Revo and put this in common. The purpose isn’t to do a "do-it-like-this", neither is to build a "do-everything" framework which fullfill every kind of websites, but either to offer a solution matching MODx spirit : easy and flexible (so usable and customizable by everyone).

    On that journey i wish i’ll enhance my workflow, learn more about Revo, share with MODxers and even cross those "developers" beings (yes, i’m more involved in front-end stuff).

    As some sample might be easier to understand my goal, here is one about what comes in my mind for now (based on HTML5 Boilerplate), which needs to be pushed further and enhanced :

    <!-- header.tpl (chunk) -->
    <!-- setting locales for some PHP functions (like strftime) to display correctly in languages != en -->
    [[setlocale]]
    <!doctype html>
    <!--[if lt IE 7 ]> <html class="ie6 no-js" lang="[[++cultureKey]]"> <![endif]-->
    <!--[if IE 7 ]>    <html class="ie7 no-js" lang="[[++cultureKey]]"> <![endif]-->
    <!--[if IE 8 ]>    <html class="ie8 no-js" lang="[[++cultureKey]]"> <![endif]-->
    <!--[if IE 9 ]>    <html class="ie9 no-js" lang="[[++cultureKey]]"> <![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!-->
    <html class="no-js" lang="[[++cultureKey]]">
    <!--<![endif]-->
    <head>
        <meta charset="[[++modx_charset:lcase]]" />
    
      <!--[if IE] >< ![endif]-->
        <title>[[*longtitle:ifempty=`[[*pagetitle]]`]]</title>
        <meta name="description" content="[[*description:notags]]" />
        <meta name="author" content="[[*publishedby:userinfo=`fullname`]]" />
        <meta name="keywords" content="" />
        <base href="[[++site_url]]" />
    
        <link rel="canonical" href="[[++site_url]][[*id:isnot=`[[++site_start]]`:then=`[[~[[*id]]]]`]]" />
    
      <!--  Mobile viewport optimized: j.mp/bplateviewport -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
      <!-- Place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
        <link rel="shortcut icon" href="favicon.ico" />
        <link rel="apple-touch-icon" href="apple-touch-icon.png" />
    
      <!-- CSS : implied media="all" -->
        <link rel="stylesheet" href="[[~[[++admin.css]]]]?v=1" />
    [[*customCSS:notempty=`
        <link rel="stylesheet" href="[[*customCSS]]?v=1" />
    `]]
    
    [[++admin.cssHandled:notempty=`
      <!-- Uncomment if you are specifically targeting less enabled mobile browsers  -->
        <link rel="stylesheet" media="handheld" href="css/handheld.css?v=1">
    `]]
    
    [[++admin.cssPrint:notempty=`
        <!-- print.css -->
    `]]
    
      <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
        <script src="assets/js/modernizr-1.6.min.js"></script>
    
    [[++admin.prod:is=`1`:then=`  <!-- no index while in dev, add nofollow if needed -->
        <meta name="robots" content="noindex" />
    `]]
    
      <!-- main RSS Feed -->
        <link rel="alternate" type="application/rss+xml" title="[[++site_name]] RSS Feed" href="[[++site_url]][[~[[++admin.rss]]]]" />
    [[*customRSS:notempty=`
        <link rel="alternate" type="application/rss+xml" title="[[++site_name]] RSS Feed" href="[[++site_url]][[~[[*customRSS]]]]" />
    `]]
    </head>
    <!-- /header.tpl (chunk) -->
    
    
    
    <body>
    
    
    <!-- headNav.tpl (chunk) -->
        <header role="banner">
            <hgroup>
                <h1 id="siteName"><a href="[[++site_url]]">[[++site_name]]</a></h1>
    [[++admin.tagLine:notempty=`
                <h2>[[++admin.tagLine]]</h2>
    `]]
            </hgroup>
    
            <nav role="navigation">
    [[!WayFinder?
        &titleOfLinks=`pagetitle`
        &textOfLinks=`menutitle`
        &startId=`0`
        &_level=`1`
        &_hideSubMenus=`1`
        &_outerTpl=`outNav`
        &_rowTpl=`rowNav`
        &_debug=`1`
    ]]
            </nav>
        </header>
    <!-- /headNav.tpl (chunk) -->
    
    
    <!-- main content -->
        <div class="mc" role="main">
            <article id="main">
    [[*content]]
            </article>
    [[*customContent:notempty]]
        </div>
    <!-- /main content -->
    
    
    [[++admin.aside:is=`1`:then=`
    <!-- aside.tpl (chunk) -->
        <aside role="complementary">
            
        </aside>
    <!-- /aside.tpl (chunk) -->
    `]]
    
    
    <!-- footer.tpl (chunk) -->
        <footer id="footer">
            <p>© 2010[[If?
                &subject=`[[now:date=`%Y`]]`
                &operator=`>`
                &operand=`2010`
                &then=`-[[now:date=`%Y`]]`
                &else=``]]<!--if current year > 2010 then display "-current year"--> [[++site_name]]</p>
        </footer>
    <!-- /footer.tpl (chunk) -->
    
    
    <!-- js.tpl (chunk) -->
      <!-- Grab Google CDN's jQuery. fall back to local if necessary -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
        <script>!window.jQuery && document.write(unescape('%3Cscript src="assets/js/libs/jquery-1.4.3.js"%3E%3C/script%3E'))</script>
    
      <!-- scripts concatenated and minified via ant build script-->
        <script src="assets/js/plugins.js?v=1"></script>
        <script src="assets/js/script.js?v=1"></script>
      <!-- end concatenated and minified scripts-->
    
      <!-- JS for specific page if needed -->
    [[*customJS:notempty=`
        <script src="assets/js/[[*customJS]]?v=1"></script>
    `]]
    
      <!-- enhancing CSS Selectors for IE < 9 -->
      <!--[if lt IE 9]>
        <script src="assets/js/selectivizr.js"></script>
      <![endif]-->
    
      <!--[if lt IE 7 ]>
        <script src="assets/js/libs/dd_belatedpng.js?v=1"></script>
        <script> DD_belatedPNG.fix('img, .png_bg'); //fix any <img> or .png_bg background-images </script>
      <![endif]-->
    
    [[++admin.prod:is=`1`:then=`
      <!-- yui profiler and profileviewer - remove for production -->
        <script src="js/profiling/yahoo-profiling.min.js"></script>
        <script src="js/profiling/config.js"></script>
      <!-- end profiling code -->
    `]]
    
    [[++admin.ga:is=`1`:then=`
      <!-- Google Analytics stuff -->
        <script>
            var _gaq = [['_setAccount', '[[++gaUA]]'], ['_trackPageview']];
            (function(d, t) {
                var g = d.createElement(t),
                    s = d.getElementsByTagName(t)[0];
                g.async = true;
                g.src = '//www.google-analytics.com/ga.js';
                s.parentNode.insertBefore(g, s);
            })(document, 'script');
        </script>
    `]]
    
    [[++admin.woopra:is=`1`:then=`
        <script>
            (function(){
                var wsc=document.createElement('script');
                wsc.src=document.location.protocol+'//static.woopra.com/js/woopra.js';
                wsc.async=true;
                var ssc = document.getElementsByTagName('script')[0];
                ssc.parentNode.insertBefore(wsc, ssc);
            })();
        </script>
    `]]
    
    [[++admin.piwik:is=`1`:then=`
        <script>
            var pkBaseURL='[[++admin.piwikURL]]';
            document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js'%3E%3C/script%3E"));
        </script>
        <script>
            try {
                var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", [[++admin.piwikID]]);
                piwikTracker.trackPageView();
                piwikTracker.enableLinkTracking();
            } catch( err ) {}
        </script>
        <noscript><p><img src="[[++admin.piwikURL]]piwik.php?idsite=[[++admin.piwikID]]" style="border:0" alt="" /></p></noscript>
    `]]
    <!-- /js.tpl (chunk) -->
    
    
    </body>
    </html>
    
    
    <!-- perf.tpl (chunk) -->
    [[++admin.prod:is=`1`:then=`
    <!--///////////////////////////////////////////////
    ////    MySQL: [^qt^], [^q^] request(s)
    ////    PHP: [^p^], total: [^t^]
    ////    document retrieved from [^s^]
    ///////////////////////////////////////////////-->
    `]]
    <!-- /perf.tpl (chunk) -->
    


    So that’s a start. I’m open for constructives critics, feedbacks (and for teaming up)
      • 3749
      • 24,544 Posts
      Great idea. cool

      BTW, there is a Canonical snippet that might simplify that chunk: http://modxcms.com/extras/search.html?query=canonical.
        Did I help you? Buy me a beer
        Get my Book: MODX:The Official Guide
        MODX info for everyone: http://bobsguides.com/modx.html
        My MODX Extras
        Bob's Guides is now hosted at A2 MODX Hosting
        • 33976 ☆ A M B ☆
        • 571 Posts
        Thanks Bob,

        with the last PackMan release, we now can package (and update) easily others extras. Using existing extras is one of my ideas (we don’t need to "rebuild the wheel" each time, and the MODx community is awsome and talented, so why not using its resources ^^).
          • 18373 ☆ A M B ☆
          • 3,141 Posts
          That is a very nice idea to streamline development.


          That said, your template looks nothing like what I usually make! Doesn’t make mine better or worse, just, different. I’m also seeing you’re using a bunch of system settings to control wether or not certain information is visible. Really like that idea.
            Mark Hamstra • Developer spending his days working on Premium Extras and a MODX Site Dashboard with the ability to remotely upgrade MODX and extras to make the MODX world a little better.

            Tweet me @mark_hamstra, check my infrequent blog at markhamstra.com, my slightly more frequent ramblings at MODX.today or see code at Github.
            • 3109 ☆ A M B ☆
            • 894 Posts
            I am all for this idea but honestly I think HTML5 Boilerplate is a little too much overboard IMHO, I’ve tried using it and it really slows down the site in some instances.

            I am more of a front end developer so if there is any way I can help you guys please let me know as I am interested in learning more about MODx and what better way than to collaborate with its fine community smiley
              Benjamin Marte
              Interactive Media Developer
              Follow Me on Twitter | Visit my site | Learn MODX
              • 5340
              • 1,624 Posts
              Quote from: benmarte at Oct 28, 2010, 08:27 PM

              I am all for this idea but honestly I think HTML5 Boilerplate is a little too much overboard IMHO, I’ve tried using it and it really slows down the site in some instances.

              I am more of a front end developer so if there is any way I can help you guys please let me know as I am interested in learning more about MODx and what better way than to collaborate with its fine community smiley

              I agree with the overhead. I removed quite a few things from it like profiling.

              I have ported boilerplate to match Modx’s folder structure and was thinking of doing a release on GIT. If anyone is interested I’ll speed this up and maybe have something in a few weeks.
                • 33976 ☆ A M B ☆
                • 571 Posts
                Thanks for your feedbacks and interest so far,

                @Mark H. » That’s why i thought being a bunch of people working, commenting and sharing tips/point of view might be a better way than being a 1 guy release. As in MODx, there is not only one way to do the same things. I think if we got different solutions to achieve one goal, we should test them, see the benefits/drawbacks of each and try to choose "the best" (better performance, most semantic…)

                @Benmarte & Cipa » Indeed HTML5 Boilerplate isn’t perfect, but i think it’s a good start (semantic, up to date, nicely degrades…). It doesn’t mean everything should be kept. For example, the profiling tools in my idea, are only available if the website isn’t in "production" (albeit i don’t use it yet).

                I spent my last night trying to figure out how to deal with Github. I’m ready to start, so i’ll to put what i’ve done so far there (and i’ll definitely watch your HTML5 boilerplate for MODx Cipa).

                In case you are interested, you might reach me on Twitter (@rtripault), Skype (melting-media), IRC (#modx@freenode, _romain) and Github.
                  • 27347
                  • 65 Posts
                  I really like the idea of a MODx Revo ’front-end framework’ based on HTML5 Boilerplate. A killer combination as far as i’m concerned.
                  I think the Boilerplate and it’s components will be actively maintained by some very knowledgeable people for a long time to come, so that’s a plus.
                  About the perceived overhead: The boilerplate is delete-key friendly so you can just delete the stuff you don’t want (for example profiling code, dd_belatedpng etc.).
                  Also, release 0.9.5 ships with a nifty ant build script (beta) that can take care of production optimizations http://github.com/paulirish/html5-boilerplate/wiki/Build-script You just have to figure out the best way to incorporate this into a Revolution friendly workflow. I guess it will involve templates on the filesystem.



                    • 25663 MODX Staff
                    • 12,272 Posts
                    I’m 1000% for this effort and would love to see it as a content pack in the Extras repository. Thanks for starting early. The new MODX site uses Boilerplate, too (new release a couple of days ago, FYI).
                      Ryan Thrash, MODX Co-Founder
                      Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
                      • 33976 ☆ A M B ☆
                      • 571 Posts
                      @SiNNuT » thanks for pointing out to this script, sound like a really good toolset to use before production.

                      @rthrash » much thanks for your words. They are motivating

                      So, as everything starts with a first step, here it is : http://github.com/MeltingMedia/MODx-Boilerplate (what an original name, isn’t it ^^)

                      Keep in mind i’m not a developer, so the structure might not fits to the "standards" (feel free to correct me).
                      While reading some more coder stuff in the docs, i was wondering if this wouldn’t be better with a CMP (i smell headhaches coming, but lots of valuable learning too) ?