Published using Google Docs
MODx Truss.docx

MODx Truss – Template framework for MODx

  1. What is MODx Truss?
  2. What is 960gs?
  3. Features of MODx Truss
  4. Installation Instructions
  5. Understanding the template framework
  6. Using templates to create articles
  7. Configure basic colors and fonts
  8. How to configure MODx Truss
  9. Layout Options
  10. Widget Placement

What is MODx Truss?

Simply put it is a quick start template framework for rapid web development for MODx Framework based websites. Its highly modularized template helps in creating website with any kind of design you like. It is loaded with 960gs, collapsible module positions, jQuery, colors and font configuration and much more. MDx Truss is simple easy yet a powerful template framework for MODx Framework. 

What is 960gs?

960 Grid System:  The 960 Grid System is an effort to streamline web development work flow by providing commonly used dimensions, based on a width of 960 pixels. More info on the 960 Grid System please check http://960.gs.  There are two variants: 12 and 16 columns, which can be used separately or in tandem. The only this we restrict right now is the 16 column layout.  You can also create your custom width based grid.  The website to create the custom grid css is http://grids.heroku.com/

More videos on 960gs: http://www.youtube.com/watch?v=96dPGw3NSsg

Later we will explain how to include the custom grid in the templates.  It’s really simple.

Currently we have added 960, 1024, fluid & custom(2080) to choose from.

Features of MDx Truss

  1. 960 grid system: The framework is based on the popular 960gs framework. The framework is not limited to 960px. We have included 1024px, 2180px, fluid width’s to choose from. More over you can also add your custom width grid in customgrid.css
  2. Modularized position for template: The templates framework holds 16 module positions. These modules/widgets can be enabled and disabled on any type of layout you choose. Again, the template framework is not limited to 16 positions. Feel free to add more positions as needed.
  3. Multi Layout: 6 template layout to choose from.
  4. Table-less layout: Simply no tables, pure CSS based layout for better SEO and usability. The default installation is W3C XHTML and CSS3 Valid.
  5. Typography:  User readability is enhanced with great typography.  Feel free to add more as needed.
  6. Formalize CSS: Uniform Looks for forms.
  7. Color Options:  Color configuration for body text, background, title etc can be selected in the configuration by simply selecting desired colors via color picker.  No need to remember the hex values, if you do then simply enter the color codes.
  8. The base configuration includes Google web fonts to choose from. We have added some basic top trending fonts to choose from. You can add more fonts you like.
  9. Twitter integration: Display any number of tweets using Rss.
  10. Flickr Integration: Display Flickr images in LightBox.
  11. Accordian & Tab Support
  12. Google Analytics: All you need to do is enter your Google Analytics UA ID
  13. IPhone/iPad Android & general mobile compatibility: The template supports any handheld device. We will be adding more features for mobile later.
  14. jQuery Mobile Enabled

We plan to add more features in future. Help us improve with comments and suggestion.

Layout position of chunk

Installation Instruction

  1. Download the package from
  2. Login to your website manager and install the package using the package management.
  3. Install Color Picker:
    Site : http://www.omycode.fr/modx-extras/colorpicker.html
    Download : http://www.omycode.fr/assets/filemanager/files/colorpicker_1.0-beta.zip
    Github : https://github.com/omycode/ColorPicker
    Installation
            Unzip the archive
            Copy the directory colorpicker into {modx_path}/assets/components/
            Copy the file colorpicker.php into {modx_path}/core/model/modx/processors/element/tv/renders/mgr/input/
            Copy the file colorpicker.tpl into {modx_path}/manager/templates/default/element/tv/renders/input
  4. Create an article in root MDx Config. Copy paste the contents from the file MDxConfig.txt. Follow the images below to configure the config article.
  1. Use Template:mdx_config
  2. Check Published
  3. Resource Alias: theme
  4. Check Hide from menus

Note: The page refreshes when the mdx_config template is applied to the article.

Next under page settings:  uncheck Rich Text and select Content Type: CSS

Next Template Variable: Configure your base Fonts Google fonts for title and body text fonts for your website:  

Next Tab:  mdx_base_color to set your base colors for text backgrounds and links.

Save the file.

  1. It is important to switch on the friendly URL’s and Alias path.

You should be able to view the theme.css via your browser. i.e http://yourdomain.com/theme.css . If you don’t,  Enable your friendly URL’s and Enable the alias. Also rename the “ht.access”   to  “.htaccess”

  1. You need to download and install the below packages.

  1. Mobile Detection: http://modx.com/extras/package/mobiledetection
  2. Create New Snippet and name it chunkListParser and insert the code from the file chunkListParser.txt
  3. Create New Snippet and name it getChunks and insert the code from the file getChunks.txt


  1. Start creating articles. Select the desired layout and the widgets/modules you would like to display.  That’s all.

Understanding the template framework:

Templates:

Once the package is installed, under Elements >> Templates you have the base templates as in the picture below.

The “mdx_base” template is a 3 column layout.  Left column + main content + Right column.

The “mdx_baseLeft+Main” template is a 2 column layout with Left + main content column.

Similarly the other templates are self explanatory.  

Template variables:

The templates variable(TV) as shown in below picture play an important role in configuring the templates. The TV’s display the widgets needed for your website. For eg the top header, cpanel, header top, left-right column widgets and footer and so on.

The Google web fonts can be configured by editing the mdx_baseGoogleFont and mdx_baseGoogleFontTitle.

Chunks

The template is modularized in different chunks. Furthermore the chunks are categorized for clear understanding of the position and widgets wit holds. For instance the mdx_baseHeadmin contains the code for the head declaration<head></head>.  The chunk contains the css java script title and so on …. Basically what ever needed for the head code. Similarly the chunks have also been used to display certain data that needs to be displayed in the left or right widget. The cpanel and header logo’s module also is coded in the respective chunks.  These chunks are called via the TV’s in the templates for you to display on your website. You can certainly add more widgets as needed.

Snippets

We have used the following 3 Snippets:

Mobile Detection: Used to display the website on mobile and handheld devices.

ChunkListParser:  To display the TV’s.

getChunks: To retrieve the chunks created.

Video’s for the following topics: (Coming Soon)