Dirty Butter Posted February 25, 2015 Share Posted February 25, 2015 One of many ignorant questions I've asked - I'm working on changing the colors of Foundation to suit myself, so I temporarily changed line 20 in main.php to take out the "min". <link rel="stylesheet" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/css/foundation.css"> I don't understand how "min" works. Once I've made all my cosmetic changes, do I have to make them all again in the "min" file? Or is there an easy way to minify my modified css file and use that? I see lots of entries when I searched for how to minify, but I'm not comfortable that I would do it correctly. Quote Link to comment Share on other sites More sharing options...
bsmither Posted February 25, 2015 Share Posted February 25, 2015 The physical difference between foundation.min.css and foundation.css is nothing other than what the publisher of the file chooses to call it. For a programmer's environment, the difference between the two is that the 'min' version suggests that it has had all whitespace removed, making the file one long line and perhaps 5% to 20% smaller. Which makes for any effort to find and tweak a rule a bitch to do. On the other hand, the Foundation skin calls some ancillary CSS files: cubecart.default.css is one such file and the 'default' is used to indicate this is the default sub-style. You can make your customizations in this file - which will overrule that which is set in foundation.min.css. If you choose to de-minify the CSS file, keep the name unless you also change the <link> in the main.php template to match. A javascript file that has been minified is even more incomprehensible. Variable names are reduced to one letter, and statements are collected, collapsed, and mutated in a way that defies any comprehensive de-minification. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted February 25, 2015 Author Share Posted February 25, 2015 So when I'm through making my changes (I created my own skin name and copied Foundation, changed config name) - I take all the white space out of foundation.css and save it as foundation.min.css. I have Notepad+ and BeyondCompare3 at my disposal. Do you know if either one of those has an option to minify? Quote Link to comment Share on other sites More sharing options...
ayz1 Posted February 25, 2015 Share Posted February 25, 2015 This seems to work OK http://cssminifier.com/ or if you have Notepad++ there are instructions at http://www.redspark-designs.com/15-pro-tips-notepad/ Quote Link to comment Share on other sites More sharing options...
bsmither Posted February 25, 2015 Share Posted February 25, 2015 I want to impress upon you that minifying a file basically serves to accommodate the smart cellphone crowd, where every unnecessary byte is one byte too many -- for those with paltry data plans and memory capacity. If one were to use that as the raison d'être for minification, then minifying all the templates would be eligible for consideration. My browser has a cache. Once I have your CSS file, whether it's 200KB or 145KB, I don't need it again. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted February 25, 2015 Author Share Posted February 25, 2015 Thank you both. I feel better about this now. Will decide what to do when I finish cosmetics. Quote Link to comment Share on other sites More sharing options...
bsmither Posted February 25, 2015 Share Posted February 25, 2015 In an experiment, I deminified foundation.min.css. Mini: 147,730 Zipped: 19,039 Max: 163,463 Zipped: 19,629 I include zipped in case the web server is able to compress the file for delivery. I can live with 600 extra bytes. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted February 25, 2015 Author Share Posted February 25, 2015 Yep! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.