Responsive template questions:
Foundation is currently on version 5 but just recently. I’m assuming that the responsive templates use version 4, can someone verify?
Does percussion load the distribution versions of the Foundation CSS and JS files or have they been altered by percussion?
Is there a plan to create a nav widget for the responsive templates that is responsive? Why not re-write the nav widget to emit foundation compatible html?
After comparing Percussion’s Foundation css file to a few distribution Foundation css files, It appears that the Foundation framework used in Percussion v3.3.4 is based on Foundation 3. Not sure of the minor version but the css appears to have been modified and differs from the distribution version.
Since the css and js files are minified it’s difficult to compare them. Can anybody shed some light on what modifications were made and what issues these changes addressed?
Hi Stuart,
Sorry, it took a little snooping around to get the exact version of Foundation that we’re using: 4.3.1. No modifications were made to the base JS and CSS files from this distribution, and so there are a number of Foundation classes / etc. you can take advantage of.
I highly recommend posting the question regarding our plans to link our navigation widget up with the Foundation menu CSS classes as an Idea on these forums, as I imagine a number of customers would find a lot of value in this. In the meantime, it should be possible to use jQuery to add the required classes to elements of the nav widget (we’ve toyed with this locally and it seems to work) in order to have it link up with Foundation’s menu CSS.
I was having some trouble with my theme styles and realized that when using the responsive templates, the Foundation css file is loaded after the selected theme css file. I was seeing the reverse (as I would expect) with the old templates in v3.2.4.
Is this by design or am I doing something wrong. If this is the expected behavior one would have to edit the injected Foundation css file to override any Foundation styles.
Hey Stuart,
Rather than rely on CSS load order, my preference would be to override defaults with a more specific selector. For example, you could append the ID of the containing region to all rules, such as:
#perc-resp-container .row {}
I’ve been thinking about your last suggestion for several days. I’ve experimented with this method and decided that it is acceptable if one is not trying to leverage the advantages of SASS and Foundation. I think one should definitely rely on CSS load order. That’s the whole point of the site theme concept. i.e. Percussion makes it look as such, if you want to change it, create a site theme.
The largest advantage of using Foundation is the ability to include overrides for whichever components one would like to modify. Design-specific styles can be easily constructed using custom styles based on Foundation mixins and by extending Foundation styles.
Percussion is loading around 180k of Foundation CSS which must be used as-is due to the load order of the stylesheets. The designer has to then create additional classes using different or more specific selectors to target the same DOM elements to accomplish the desired effect, thus increasing the page weight.
The obvious solution would be to just replace the Foundation CSS in the cm directory. This would work except for multiple site setups where one needs different styles.
What are the odds that we can get the load order fixed?
Stuart,
I appreciate your feedback. We will be looking at site optimization in 2014. Based on our conversations with customers and prospects, just getting a mobile ready site was a challenge for many, which is why we launched the responsive templates. The next logical step after one has mobile support is to start to look at how to optimize those sites for size and performance. It sounds like you are already at that step. I can understand that you might be frustrated that we haven’t implemented Foundation in a particular way. We’re keeping a close eye on how customers are using this new feature so that we can improve the product, so your feedback is valuable.
As an aside, I’ve been very impressed with Yottaa and the work they do on mobile optimization. If you are concerned about mobile performance, I would recommend them as a best-of-breed solution that complements Percussion nicely.
Thanks for the insight Dan.
I think that although site optimization is very important, the main point here is the way Percussion is emitting the head section code. I am of the opinion that any user designated resources should be loaded after the system has done it’s thing, or “last-of-type” if you prefer. i.e. insert any user defined meta tags as last in the meta tag grouping. The way things are now, the last thing Percussion does is load a whole CSS framework. The result as you know is that any matching selectors from this framework will always be applied if there is a conflict with another stylesheet. The old “last in wins” rule.
Well, actually the last thing that gets loaded is normalize.css which should be loaded before any stylesheets. This one will make you scratch you head when you can’t figure out why a certain style is not being applied and you fire up your developer tools and realize that normalize.css is stomping on your (or Foundation’s) CSS.
I realize that this is not something that can be fixed without changes to the system but I would hope that the head content structure and load ordering is a high priority item. By fixing this issue you would be allowing users to design their sites by leveraging the Foundation framework (if they choose) instead of working around it.
Thanks again
I will be creating my first responsive templates using Percussion and wanted to confirm whether the issues above have been resolved from 8 months ago.
-Do the responsive templates currently use Foundation 5?
I ask this because I have already built out my redesigned site using Foundation 5 and will be incorporating this code into the responsive templates.
-Can the Foundation CSS file load BEFORE my custom CSS file?
A lot of my CSS simply overwrites the core Foundation CSS and agree it’s one of the strengths of Foundation.
Thanks