Using Flexibility for MODX: What's What

How does Flexibility for MODX work?

This article was written when flexibility used Foundation 3 it has now been updated to use Foundation 4.
I haven't looked at the new version yet so I don't know if these notes are out of date or still relevent.
I imageine the structure should be similar, but with different css, read at your own risk....

Flexibility is a site template package written by Menno Pietersen for MODX to help you kick start a website project.

Flexibility uses Foundation a css framework. The idea behind Foundation and hence Flexibility is of a framework that can be used to rapidly develop a prototype for a new website. (Some examples of prototypes sites). And that the website is responsive so that it works equally well on mobiles, tablets or desktop computers.

Also Flexibility bundles various MODX components that would commonly be used to build a website. Since everything is installed in one go the first step is to have a look around.

Installation and configuration

First follow the installation instructions. Take note of the information about the slider, (this is also relevant if you take snapshots in the cloud and create new clouds from your own version).

Flexibility comes with 8 default pages under web in the Resource tree

• Site settings
• Search results
• Thank you
• Home
• About
• Gallery
• Basic page - with sub pages
• Contact

The first thing to note is that you can configure quite a few things on the first "page" (document) in the Resource tree: Resources > Site Settings >Template Variables

Here you can set a few site-wide settings that are used with the default template/layout:

• Email address - the email address for the contact form
• Logo - the logo/main banner for the site
• Slider items - the images and captions that will appear in the image slider
• Footer boxes - the number of footer boxes
• Footer content boxes - the content of the footer boxes

And for each default page, besides the default content area, there are also template variable settings:

• Sidebar option - for content to the right of the main content area which you can leave blank if you don't want a sidebar
• Slide option - do you want the slider to appear on this page?
• Gallery option - do you want a gallery on this page?
• Contactform option - do you want a contact form on this page?
• Sub-content box options - you can select to have 0, 2, 3 or 4 content boxes below the main content and above the footer boxes and add their content here
• A Lightbox - this inserts a button that, when clicked, brings up a modal div with the contents you have input into this template variable's input box.

The components

At first glance there's a lot of components in Flexability and I wonder if getting to grips with the framework is going to be any faster than starting from scratch! But that's probably because I am not familiar with it yet, and once I am familiar I will probably be much quicker using it (I hope).

The css and javascript files for Flexibility reside in the assest/templates/flexibility folder. The minimised css file for Foundation comes in at 80kb so equivalent to a medium sized image. That seems large to me as if I was to start from scratch a css file for a responsive site might come in at 25kb uncompressed... so will the benefit in development time justify the extra load? (I wonder if there is some way to reduce the css file after the site is finished? ie some utility to go through all the pages of your site find all the used classes then strip out the unused classes from your css file, that would be cool!)

The components of Foundation are:

• A grid

  For layout. I'm not usually a fan of grids they just seem to add lots of unnecessary css that never gets used and restrict what you can do. I will give this one a go though to see if I have been missing something.

  The system does seem very straight forward. It's a twelve column grid system that can be nested. It works in rows, a row div has the class row. In the rows you have a twelve column space made up by divs that span a few columns so that they all add up to twelve. So a column div has two classes, a class describing the number of columns it spans eg three (a number between 1 & 12 as a word) and the class columns.

  So for example you might get something like this:

  <div class="row">
      <div class="three columns"> column 1 ...</div>
      <div class="three columns"> column 2 ...</div>
      <div class="six columns"> column 3 ...</div>
  </div>
  		

  "Gutters are created simply with padding on the columns"

  The outer row controls the width of your content. This is controlled by max-width, width and min-width css values in the .row css declaration.

  You can leave a column blank by using the offset-by-NUMBER class eg offset-by-two will leave the two preceding columns to the left of it blank.

  There are also other classes:

  • to centre columns: centered
  • to have the order on screen different to the order in the source code: push-NUMBER/pull-NUMBER
  • to convert the columns to a four column layout for mobiles:mobile-NUMBER
  • to make table like "block grids" that will not stack

  The full instructions can be found on Zurb's grid page

  I usually start with the graphic design and build the css up from there, it is going to be interesting trying to procure the design so that it will fit to the grid system.

• Typography

  Foundation also provides classes for general typographic formatting such as lists, code, blockquotes print styles and more.

• Buttons

  Lots of nice css styled buttons - all you have to do is add a class or classes to your div, button element, input type="submit" or li item. For example class="small success radius" will give you a small green button with rounded cornres and associated rollover and click styles.

  All the options can be found on the the button page

• Navigation

  More neat and tidy styles for navigation, sub navigation menu, pagination, and breadcrumbs all with the simple additions of classes that can be found here.

  Dropdown for mobile: On the navigation front Flexability (Version 3.0.6) uses a hidden div with a second Wayfinder call that builds a <select><options> dropdown menu for the mobile interface. When the media query detects the appropriate size the desktop menu bar is hidden and the select dropdown is un-hidden. The way Wayfinder templates are used to build the mobile menu are described in a blog post on Menno Pietersen website.

  Also, the Nav Bar menu for the desktop layout seems to have lost the ability to show third level menu items (or never had it). The menu items that have sub pages are given class has-flyout, on level one these get a down arrow but on level 2 the down arrow is missing. When you roll over 1st level flyout items a menu of their sub pages flies out, but when you mouse over the sub-menu pages that have pages beneath them nothing happens. There is a solution to this on github (I've not tried this out yet). Otherwise apparently level 3 sub-menus will be added in Foundation 4, or you could use the Top Bar ...

  So, there is the Top Bar which provides the same functionality as a Nav Bar but with more customizeability and it does show sub-pages! I'm not sure what the difference is except that they are styled differently and the Top Bar works better. It tackles the mobile sizing in a different way keeping with <ul> and <li> tags and creating a nice dropdown and sideways sliding menu. But you could if you wanted use the same technique of a second wayfinder call to create a select-option dropdown menu for mobiles.

• Forms

  Am i repeating myself? Yes, it's more styles for form layouts, field sets, pre/post fix labels, search, error states, radio buttons, and select elements, with details here.

• UI Elements

  Go to the elements page for helpful classes for alerts, labels, tooltips, accordians, panels, Inline lists, tables, progress bars, image thumbnails, pricing tables, and embedded video!

  The accordian didn't quite work when I first set it up, and when I did get it working the transitions where very abrupt so I changed the code in the jquery.foundation.accordion.js to suite my needs.

• Tabs

  I ran into problems with Tabs. The reason being that Foundation's tabs use the hash (pound) # symbol in a <a href=""> as the link text for the tab. The first problem this causes is when MODX is using Friendly URLs as explained in rtfm: "The problem with using named anchors with MODX and friendly URLs enabled, is that the <base href=""> tag, which is required to maintain relative urls, will confuse browsers, thinking that any anchors point to the base href page which would usually be your homepage." So as soon as I click my tab it goes to the homepage, not what I want.

  The solution to this is to add the link to the current page [ [~[ [ *id ] ] ] before the # symbol, and hey presto clicking the tab no longer goes to the home page.

  But, it introduces a second problem: the content for that tab is no longer revealed, it just shows the initial content for the first tab. The reason for this is that the javascript that reveals the content searches for the hash with this code:

    target = $tab.children('a').attr("href")
    hasHash = /^#/.test(target)
  		

  It's testing to see if the location string begins with a # but now it doesn't, so it doesn't work. This can be solved in a couple of ways that might involve: 1) not using Friendly URLs 2) getting rid on <base url=""> 3) by removing the carat ^ symbol.

  I don't want to do 1) and 2) because Frienly URLs is good in every way and i want to "maintain relative urls" (because I'm not sure what might happen to the links on my site if I remove it) so it looks like number 3.

  This does mean however that you are hacking Foundation's code which means you have to do it every time there is an update. It also means I have to re-concatanate and minify all the Foundation .js files into foundation.min.js or use SmartOptimizer. All for one lousy caret!

  I like the SmartOptimizer solutions because it means I will be able to hack any other files if necessary without too much grief.

• Orbit

  Orbit is a jQuery image slider. I've written a little bit more about it in a related blog post

• Reveal - a jQuery modal popup plugin
• Clearing - for displaying images of different sizes (its a bit like the Flickr image viewer if you are familiar with that)
• Magellan - a static menu that stays in position as you scroll down the page
• Joyride - a way of creating a guided tour of a web page, the best way to see it is to look at and example: http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin

Modernizr

Foundation uses Modernizr - (a JavaScript library that detects HTML5 and CSS3 features in the user browser) for the HTML5 Shiv*, touch classes and JS media queries.

*HTML5Shiv is a JavaScript workaround, to enable styling of HTML5 elements in versions of Internet Explorer prior to version 9, which do not allow unknown elements to be styled without JavaScript

Is it all sounding a little bit bloated?

The various javascript components are all included in foundation.min.js - but they are commented so if you don’t use a particular library you can remove it from the file ( for example I can’t see me using Joyrider very often so that will most likely be deleted on each implementation)

A list of all the javascript components can be found here: http://foundation.zurb.com/docs/v/3.2.5/javascripts.php

Or, my solution will be to use smart optimizer for javascript and css files so I can work on the individually but immediately have a single call to a cached version on-line.

Things I have added for my template site

Foundation is great for developing wire frames, and developing the look and style of the site, but what about functionality. I think there are going to be components that are common to a lot of my clients so I have added the following packages to my template site:

• Articles for blog posts - it takes quite a bit of playing with the default css to get it how you want it. So I have formatted my version the way I like it so I can then more easily adapt it for my clients ( There was a bit of code in the Flexibility header for the description meta tag [ [ *introtext:empty=`[ [ *content:strip_tags ] ]`:limit=`200` ] ] that broke the Articles pages, I had to change it to just [ [ *introtext ] ]
• SmartOptimizer - to concatanate all the css and javascript files so that as few calls as possible are being made to the server to increas speed and hence help SEO.
• Sitemap - good practice for SEO
• Ace - for editing elements

Cautionary note: if you download your own copy and start playing with it as I did you might duplicate the header and footer chunks and start editing them with your own ideas. Then you might find that there is a new version out and think: "OK I shall update my install, it will be safe because I have duplicated the chunks that I wanted to change". But you could be wrong like I was, because the chunks I duplicated were static resources so when the originals got updated so did my new versions as they were the same file. Doh!. Luckily by the power of the MODX Cloud and automatic updates I had copies of my work.

Sass and Compass

I've written another separate blog post about Foundation's use of Sass and Compass

Conclusion

It looks good! But I have not yet used it on a commercial level, when I do I will have a better idea of the possibilities. I will report back then.