Skip to content
This repository has been archived by the owner on Feb 25, 2018. It is now read-only.

Get started!

Jump to bottom
smooth-graphics edited this page Jul 13, 2011 · 6 revisions

Great, I think you've already looked to this repository and perhaps you already downloaded this package. If not, do it now.

  • Download the package from github
  • Extract the .zip/.tar.gz-package to your project. You'll now have a folder of the package.
  • You will need the "If"-snippet avaiable via package manager in MODX Revolution for full functionality. Please install this package to use MODX-Boilerplate

Folder + file structure

I created a MODX directory structure. So you'll get some files in the root of the package which should make their way into the root directory of your MODX setup (where index.php is located). Additionally you need the templates folder in your /assets/ directory. MODX Revolution doesn't specify the name and order of folders but it makes sense to have a templates directory inside the /assets/-folder. If you use more than one template use subfolders in your templates-folder (in my structure I called it 'main').

Since there isn't a MODX-extra-package available yet, I created three .html files named 'site_header.html', 'site_template.html' and 'site_footer.html'. These files contain all HTML/JS/MODX template code you'll need to setup your site in a MODX installation.

To get this working, open all three files and copy the whole code of each file into a new chunk you create in MODX manager. It's best to preserve filename (without .html ending) in MODX-chunk-naming.

So you'll finally have a chunk named 'site_header' which contains the header section of your website. You have a MODX-template containing the code of 'site_template.html' and another chunk called 'site_footer' containing the footer of your website.

HTML

  • If you are using templates, you may have to integrate it within that templating system
  • Link to the full URLs for CSS and JS files with MODX 'base_url' and the base_href html-tag, especially if you are using templates, and the paths have sub-directories like : /omg/awes/index.php The class to use on elements with transparent PNG background images is .png_bg. If you want to use something else, make sure you edit DD_belatedPNG.fix('img, .png_bg'); with the class you want to use.
  • Edit the Google Analytics snippet at the bottom with the analytics ID for your project (i.e. replace 'UA-XXXXX-X' with yours).
  • If you are wondering about the ?v=2 stuff, read https://github.com/paulirish/html5-boilerplate/wiki/Version-Control-with-Cachebusting

CSS

  • Put all the styles you need in your project within the style.css file, right after the comment line that begins with 'Primary Styles'
  • If you want to use CSS3 @media-queries to support multiple devices and smartphones, please create additional stylesheet-files with the additional(!) CSS-code. Please don't copy all the styles of style.css into your other files.

Javascript

  • Consider rolling the JavaScript for all the plugins you use into the plugins.js file within js/plugins.js folder
  • If you are using a third-party JavaScript library (e.g. for your shopping cart system, events), consider putting those files under 'libs' folder. NOTE: This is not for small jQuery plugins which should go to plugins.js!
  • Use script.js to put any script you use to invoke plugins or third-party tools. This way, it will be cached and does not need to be added to the page load

Server-side configuration

For now you can only use this on Apache servers. If you are using others than Apache, please rewrite the .htaccess and provide it to this package!

  • .htaccess - Apache

If you actually know what goes within this file, consider going through the file you need and verifying it does all you require it to.

Other things you should do

  • create your own favicon.ico and your own apple-touch-icons to get an individual symbol on Apple smartphones and in your browser- and favorite-bar. Make sure you cover all icon-sizes (think of new apple products)
  • configure your robots.txt file to prevent search engines crawling all folders and files. To hide a folder simply add the relative path to the file.

Video tutorial

Menno Pietersen created a video tutorial for beginners

part 1

http://designfromwithin.com/using-the-fantasic-modx-boilerplate-part-1/
http://vimeo.com/22047799

part 2

http://designfromwithin.com/using-the-fantasic-modx-boilerplate-part-2/ http://vimeo.com/22462187

Clone this wiki locally