Foundation 4 template for MODX Revolution

☆ A M B ☆
350 Posts

Menno Pietersen Reply #1, 13 years, 6 months ago

After creating the Foundation-MODX template (https://forums.modx.com/thread/74033/foundation-modx---responsive-html5-template-for-modx-revolution) and getting some great feedback, I wanted to wanted to update the template to Foundation 4.
So here it is!

Foundation4-MODX is a MODX Revolution< template based on Foundation 4 by Zurb (http://foundation.zurb.com/).
This is a very minimal MODX Revolution template, with this template you can quickly install to start using the fantastic Foundation 4 framework.

Download the Foundation 4 MODX template:
https://github.com/DESIGNfromWITHIN/Foundation4-MODX/archive/master.zip

Flexibility 4 MODX on GitHub
https://github.com/DESIGNfromWITHIN/Foundation4-MODX/

Read the blog post on DESIGNfromWITHIN
http://designfromwithin.com/blog-webdesign-development/2013/04/02/foundation-4-template-for-modx-revolution/

I would love to hear your feedback, I am planning for some more advances versions of the template with included navigation, page options and search...

MODX Ambassador (NL) | Responsive web design specialist, developer & speaker
DESIGNfromWITHIN, MPThemes and Any Screen Size
Follow me on Twitter | Read my blog | My code on GitHub

☆ A M B ☆
1,780 Posts

Frogabog Reply #2, 13 years, 6 months ago

It installed nicely on a dev cloud install, and seems to be happy. Too bad the templates weren't associated with Foundation 4. I had a project in the works to make them available for Foundation 3. I'm glad you're not yet packaging it up for Flexibility BTW...

My main concern is (as always), Foundation 4 is not compatible with IE 8 this time. IE 7 was a push to expect compatibility with Foundation 3, but it hasn't been too long since 3 was released, and now IE8 is incompatible as well. I'm not convinced there aren't still many many XP users out there. IE 8 is as good as it gets for them (let's not debate the browser issue. Like it or not, so many people still just click on the blue E never knowing there's any other option).

With the column classes having changed, it's not exactly simple to back code it without a blowing up the css with redundant styles.

Mobile First is what Foundation 4 is all about. Love the concept, but the clients aren't going to go for it just yet. I'm torn, loving Foundation is great... till you try on Bootstrap and all the IE issues disappear entirely (menus, primarily).

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster

☆ A M B ☆
350 Posts

Menno Pietersen Reply #3, 13 years, 6 months ago

Hi Frogabog!

Thanks for your feedback. I understand what your mean, let me tell you how I approach this IE support issue.

I specialize in Responsive Web Design, and therefore create modern websites with the latest techniques.
Clients that ask for Responsive design should realize that also needing IE8- support is a conflict of interest.

I let them know, go for the best/latest OR support old stuff..
Google uses the first (http://googleappsupdates.blogspot.co.uk/2012/09/supporting-modern-browsers-internet.html) and I do to.

In short, I simply advice my clients to ignore the IE issue and focus on the future... Or find a other designer/developer...

MODX Ambassador (NL) | Responsive web design specialist, developer & speaker
DESIGNfromWITHIN, MPThemes and Any Screen Size
Follow me on Twitter | Read my blog | My code on GitHub

170 Posts

Fildefer57 Reply #4, 13 years, 5 months ago

Regarding IE8, Foundation 4 works fine BUT with the small (mobile) design, which means it is functional (it's called progressive enhancements ;-) ), anyway for those using the sass version of foundation a fix has been created to get the large (desktop) design layout.

One must include the following :

/* The Grid ---------------------- */
.lt-ie9 .row { width: 940px; max-width: 100%; min-width: 768px; margin: 0 auto; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row.large-collapse .column, 
.lt-ie9 .row.large-collapse .columns { padding: 0; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row .row.large-collapse { margin: 0; }

.lt-ie9 .column, .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }
.lt-ie9 .column.large-centered, .columns.large-centered { float: none; margin: 0 auto; }

.lt-ie9 [class*="column"] + [class*="column"]:last-child { float: right; }
.lt-ie9 [class*="column"] + [class*="column"].end { float: left; }

.lt-ie9 .large-1, 
.lt-ie9 .row .large-1 { width: 8.33333%; }

.lt-ie9 .large-2, 
.lt-ie9 .row .large-2 { width: 16.66667%; }

.lt-ie9 .large-3, 
.lt-ie9 .row .large-3 { width: 25%; }

.lt-ie9 .large-4, 
.lt-ie9 .row .large-4 { width: 33.33333%; }

.lt-ie9 .large-5, 
.lt-ie9 .row .large-5 { width: 41.66667%; }

.lt-ie9 .large-6, 
.lt-ie9 .row .large-6 { width: 50%; }

.lt-ie9 .large-7, 
.lt-ie9 .row .large-7 { width: 58.33333%; }

.lt-ie9 .large-8, 
.lt-ie9 .row .large-8 { width: 66.66667%; }

.lt-ie9 .large-9, 
.lt-ie9 .row .large-9 { width: 75%; }

.lt-ie9 .large-10, 
.lt-ie9 .row .large-10 { width: 83.33333%; }

.lt-ie9 .large-11, 
.lt-ie9 .row .large-11 { width: 91.66667%; }

.lt-ie9 .large-12,
.lt-ie9 .row .large-12 { width: 100%; }

.lt-ie9 .row .large-offset-1 { margin-left: 8.33333%; }
.lt-ie9 .row .large-offset-2 { margin-left: 16.66667%; }
.lt-ie9 .row .large-offset-3 { margin-left: 25%; }
.lt-ie9 .row .large-offset-4 { margin-left: 33.33333%; }
.lt-ie9 .row .large-offset-5 { margin-left: 41.66667%; }
.lt-ie9 .row .large-offset-6 { margin-left: 50%; }
.lt-ie9 .row .large-offset-7 { margin-left: 58.33333%; }
.lt-ie9 .row .large-offset-8 { margin-left: 66.66667%; }
.lt-ie9 .row .large-offset-9 { margin-left: 75%; }
.lt-ie9 .row .large-offset-10 { margin-left: 83.33333%; }

.lt-ie9 .pull-2 { right: 16.66667%; }
.lt-ie9 .pull-3 { right: 25%; }
.lt-ie9 .pull-4 { right: 33.33333%; }
.lt-ie9 .pull-5 { right: 41.66667%; }
.lt-ie9 .pull-6 { right: 50%; }
.lt-ie9 .pull-7 { right: 58.33333%; }
.lt-ie9 .pull-8 { right: 66.66667%; }
.lt-ie9 .pull-9 { right: 75%; }
.lt-ie9 .pull-10 { right: 83.33333%; }

.lt-ie9 .push-2 { left: 16.66667%; }
.lt-ie9 .push-3 { left: 25%; }
.lt-ie9 .push-4 { left: 33.33333%; }
.lt-ie9 .push-5 { left: 41.66667%; }
.lt-ie9 .push-6 { left: 50%; }
.lt-ie9 .push-7 { left: 58.33333%; }
.lt-ie9 .push-8 { left: 66.66667%; }
.lt-ie9 .push-9 { left: 75%; }
.lt-ie9 .push-10 { left: 83.33333%; }
*/
/* Nicolas Gallagher's micro clearfix */
/* 
.lt-ie9 .row { *zoom: 1; }
.lt-ie9 .row:before, .row:after { content: " "; display: table; }
.lt-ie9 .row:after { clear: both; }

Solution comes from : https://gist.github.com/zurbchris/5068210

Hope this help.

Philippe

twitter : https://twitter.com/ComAmazili
Facebook Page : https://www.facebook.com/Amazili
Website : https://amazili-communication.com