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)