Extension, Plugin

Archived
Forum
(read-only)

Minimee

ExpressionEngine 2

Back to this add-on's main page
View Other Add-ons From John D. Wells

     

reset.css won’t minify

Support Request

MikeCJ
MikeCJ

Any idea why adding css.reset within the Minimee tags would bread the site?

Thanks,
MikeCJ

John D Wells
# 1
Developer
John D Wells

Hi Mike,

Could you give a bit more information as to how it’s breaking?  Might also help to see what your template code looks like.

What version of Minimee & EE are you running?

Cheers,
John

MikeCJ
# 2
MikeCJ

With this application of Minimee (putting reset.css within Minimee):

{exp:minimee:css}
  
<link href="http://givemethatmountain.org/stylesheets/reset.css" media="all" rel="stylesheet" type="text/css">  
  <
link href="http://givemethatmountain.org/stylesheets/site-desktop.css" media="screen and (min-device-width: 768px)" rel="stylesheet" type="text/css">

  <!--
link href="http://givemethatmountain.org/stylesheets/ui-lightness/jquery-ui-1.8.9.custom.css" media="screen" rel="stylesheet"-->
  <!--
[if lt IE 9]>
    <
link href="http://givemethatmountain.org/stylesheets/site-desktop.css" media="screen" rel="stylesheet">
    <!
[endif]-->
  
{/exp:minimee:css} 

The fonts are all messed up and the mobile version (I’m using media queries to control which css file is accessed) displays the desktop version.

Thanks,
MikeCJ

John D Wells
# 3
Developer
John D Wells

Hi Mike,

I think I see what’s going on.  A few things:

1. Minimee does not acknowledge HTML comments, so if you want to temporarily comment out an asset, use EE comments instead.

2. When Minimee runs, it does a regular expression match for any filenames that match the correct asset type (CSS or JS files).  It then takes every asset it finds, and minifies & combines them into one file (if combining is turned on). It then takes the first asset it finds in the batch, and uses that tag as the model for the final minimee cache tag

What this means is that your media query is going to be stripped from the eventual output.  It also means that your IE-specific stylesheets are also being included.

For IE-specific stylesheets, I’d recommend wrapping in its own Minimee tag pair.

For the media query, I’d recommend placing them into your CSS rather than as a media parameter; but if you’d prefer the media parameter route, you’d want to do the same as an IE-specific stylesheet, and wrap its own Minimee tag pair.

Cheers,
John

MikeCJ
# 4
MikeCJ

With media parameter removed and @media used in the CSS for this link:

<link href="http://givemethatmountain.org/stylesheets/site-desktop.css" media="screen and (min-device-width: 768px)" rel="stylesheet" type="text/css"

the mobile version is displayed on the desktop.

When I enclose any one of the following CSS files in Minimee tags mobile devices display the desktop version:

<!--[if lt IE 9]>
    <
link href="http://givemethatmountain.org/stylesheets/site-desktop.css" media="screen" rel="stylesheet">
    <!
[endif]-->

 <!--
[if lt IE 9]>
    <
link href="http://givemethatmountain.org/stylesheets/ie.8.css" media="screen" rel="stylesheet">
    <!
[endif]-->

<!--
[if lt IE 8]>
    <
link href="http://givemethatmountain.org/stylesheets/ie.7.css" media="screen" rel="stylesheet">
    <!
[endif]--> 

When I enclose this CSS file in Minimee tags the fonts are messed up on the desktop version:

<link href="http://givemethatmountain.org/stylesheets/reset.css" media="all" rel="stylesheet" type="text/css"

When I enclose this CSS file in Minimee tags the site renders properly but the page loads slower.

<link href="http://givemethatmountain.org/stylesheets/site-mobile.css" media="all" rel="stylesheet" type="text/css"

When I enclose this CSS file in Minimee tags the site renders properly but the page loads slower.

<link href="http://givemethatmountain.org/stylesheets/site-desktop.css" media="screen and (min-device-width: 768px)" rel="stylesheet" type="text/css"

I’m not getting anywhere. Do I have the wrong application for Minimee?

Thanks,
MikeCJ

John D Wells
# 5
Developer
John D Wells

Hi Mike,

Sorry to hear that you’re having difficulties here.  First of all, feel free to hit me up on skype, my handle is ‘johndwells’.

Whenever I’m having trouble getting Minimee to work for me, I tend to do the following:

- keep Minimee enabled, but turn off minification & combination of every asset type
- change the Filename Hash Algorithm to ‘sanitize’

What this will do is effectively leave your CSS/JS untouched, but simply create caches of each file, and with similar naming structure which is helpful for debugging.

And as a general rule, as long as you’re grouping like-minded files together with minimee, it shouldn’t be causing your site to behave any differently than if Minimee were completely disabled.

I’m looking at the source of your givemethatmountain.org site, and most of your assets will all need to be Minimee’d separately, since they each are called upon for different environments.

Please do find me on Skype if you want to walk through some of this.

Cheers,
John

John D Wells
# 6
Developer
John D Wells

Hi Mike,

Did you manage to get Minimee running as expected?  I’m back online this afternoon if you’re still in need of some help.

Cheers,
John