boilerX
Last updated Apr 30th, 2019 | Page history | Improve this page | Report an issue
Support the team building MODX with a monthly donation.
The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.
Backers
Budget
$301 per month—let's make that $500!
Learn moreWhat is boilerX?¶
HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.
boilerX makes getting up and running with HTML5 Boilerplate a click away and is configurable using System Settings. Upon installation boilerplate assets are automatically placed in your assets folder.
Installation¶
Install via Package Manager.
Make sure to remove "sample." from the names of the boilerX elements. This way, when installing the packages any changes you may make won't be overridden.
Example Template¶
boilerX comes with an example Template that simply includes several chunks in the correct order.
[[$bx-head-open]]
[[$bx-head-append]]
[[$bx-head-close]]
[[$bx-container-open]]
[[*content]]
[[$bx-container-close]]
[[$bx-bottom-open]]
[[$bx-bottom-close]]
boilerX Chunks¶
bx-head-open
The bulk of the header, includes CSS and modernizr as well as meta tags.
bx-head-append
Blank, meant to be an easy way to include CSS stylesheets, JavaScript, or meta tags before the closing head tag. This would be a good place to include MetaX.
bx-head-close
Simply closes the body tag.
bx-container-close
Blank, meant to be used for a wrapper div if needed.
bx-container-close
Blank, meant to close anything including in the bx-container-open Chunk.
bx-bottom-open
Deffered JavaScript and Google Analytics tracking code. bx-bottom-close
bx-bottom-close
Closes the body and html tags.
System Settings¶
Name | Description | Default |
---|---|---|
Google Analytics ID | Optional, if not set will comment out tracking code | UAXXXXXXXX1 |
CSS Path | Path to your main.css stylesheet | assets/components/boilerx/css/main.css |
Normalize CSS Path | Path to your normalize.css stylesheet | assets/components/boilerx/css/normalize.css |
jQuery version | Version of jQuery to use with HTML5 Boilerplate | 1.9.1 |
Modernizr.js Path | Path to you modernizr.js path | assets/components/boilerx/js/vendor/modernizr–2.6.2.min.js |
Meta Author | Sets meta authors tag | Site Authors |
Meta Description | Sets the meta description tag | Not Another Wordpress Site |
Meta Viewport | Sets iOS viewport settings | width=device-width,initial-scale=1 |
IE Edge Mode | Sets IE Edge mode tag | IE=edge,chrome=1 |
IE Chrome Frame | Version of IE to start displaying Chrome Frame | 7 |
Show Comments | Whether or not to show tips using comments in markup | true |
Example Markup¶
Default output generated by the sample.BoilerXTemplate. Replicates HTML5 Boilerplate 4.2.0 markup (h5bp-html5-boilerplate-defe483)
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>MODX Revolution - Home</title>
<meta name="description" content="Site Description">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="assets/components/boilerx/css/normalize.css">
<link rel="stylesheet" href="assets/components/boilerx/css/main.css">
<script src="assets/components/boilerx/js/vendor/modernizr-2.6.2.min.js"></script>
<!-- Use this chunk to append to your head tag -->
</head>
<!-- Use these body classes to target any combination of specific templates, ids, children, and class_keys -->
<body class="t-2 id-1 p-0 ck-modDocument">
<!--[if lt IE 8]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/components/boilerx/js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="assets/components/boilerx/js/plugins.js"></script>
<script src="assets/components/boilerx/js/main.js"></script>
<!-- Change UAXXXXXXXX1 to be your site's ID by setting bx.ga-id System Setting to auto-enable tracking -->
<!--script>
var _gaq=[ ['_setAccount','UAXXXXXXXX1'],['_trackPageview'] ];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script-->
</body>
</html>