Menu icon Foundation

Developer

My Posts


  • 4
    Replies
  • UNCSS breaks Reveal

    By Joel Davies

    uncssrevealbugoptimization

    I am sad that UNCSS, while doing a fantastic job minimizing my current site project's CSS (26 KB vs 78 KB), seems to be more trouble than it is worth in its present F6 deployment. Today, after laboriously tracking down dynamically-created classes occurri... (continued)

    Last Reply by kopamam 11 months ago










My Comments

Joel Davies commented on Joel Davies's post 8 months

Welp, never mind! The problem seems to be me!
I was trying to insert an @font-face rule so I could use a Google font, as per this Litmus how-to. Their recommendation was to paste the rule in the head, which I did above the commented-out <!--<style>--> in src > layouts > default.html like this:
<head>
<link rel="stylesheet" type="text/css" href="{{root}}css/app.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>{{subject}}</title>
<style>
@media screen {@font-face {font-family: 'Cabin';font-style: normal;font-weight: 400;src: local('Cabin'), local('Cabin-Regular'),url(https://fonts.gstatic.com/s/cabin/v10/kJXt72Gt1LyFMZcEKAAvlKCWcynf_cDxXwCLxiixG1c.woff) format('woff');}}
</style>
<!-- <style> -->
</head>
Evidently that's a wrong approach -- inserting an uncommented &lt;style&gt; tag there will break the build. Or at any rate, the build ran successfully after I removed that inserted &lt;style&gt;block and put the @font-face at the top of my src > assets > scss > app.scss file:
@media screen {@font-face {font-family: 'Cabin';font-style: normal;font-weight: 400;src: local('Cabin'), local('Cabin-Regular'),url(https://fonts.gstatic.com/s/cabin/v10/kJXt72Gt1LyFMZcEKAAvlKCWcynf_cDxXwCLxiixG1c.woff) format('woff');}}

@import 'settings';
@import 'foundation-emails';

@import 'template/template';

/* etc */
So, object lesson, if you are trying to use a web font, do it at the top of your app.scss file!
 
 
 

Joel Davies commented on Joel Davies's post 11 months

Really, the only F6 class I found so far was .reveal-overlay; all the other dynamic classes were in my own custom JS. I'm on deadline with this project and did not have time to go hunting further.
One way to track them down this might be to load a site with app.css from a watch build, copy the CSS as parsed in the browser, then run a production build, load that app.css, copy that parsed CSS, then do a file comparison between the two sets.

Joel Davies commented on Glenn Philp's post over 1 year

Foundation yetis: I just wanted to add my 2¢ that Glenn Philip's JS at http://foundation.zurb.com/forum/posts/43809#comment_33251 did solve a similar problem I had trying to implement Reveal + AJAX.
The request gets performed, the console shows the target HTML is been acquired, but the HTML does not get injected into the designated Reveal modal. Perhaps this is an issue with JQuery's .ajax() ?
I think at the very least the Advanced Options > AJAX section in the docs should be rewritten; the sample code block seems like it just doesn't work. If it did work, it would be helpful to show folks that they are most likely going to want to have a click handler in there.

Joel Davies commented on Joel Davies's post over 1 year

If you mean...
<container>
<row>
<columns>
<wrapper class="padded">
<spacer size="20"></spacer>
<p class="text-center important-hed">Some content here</p>
<hr>
<row>
<columns>
<center>
<img src="http://www.trcretail.com/email/assets/img/trc-logo-outer-gray-153x60.gif" alt="TRC">
</center>
</columns>
</row>
<hr>
</wrapper>
</columns>
</row>
</container>
...I tried that, but still had the issue with padding being added.
Ultimately, I did a work-around by moving the centered img out of the wrapper-with-padding section. Fortunate that the layout gave me the leeway to do that.
Thanks for your help!
 

Joel Davies commented on Joel Davies's post over 1 year

Thanks, Corey; I have basically what you have in the first example:
<container>
<row>
<columns>
<wrapper class="padded">
<spacer size="20"></spacer>
<p class="text-center important-hed">Some content here</p>
<hr>
<center>
<img src="/assets/img/logo.gif" alt="logo">
</center>
<hr>
</wrapper>
</columns>
</row>
</container>
...and my CSS is essentially the same:
.padded {
.wrapper-inner {
padding-left: 56px;
padding-right: 56px;
}
}
But the padding ADDS to the width of my container. The problematic element seems to be the <center> tag wrapping the img! If I remove that then the padding acts as it should, adding whitespace to the left and right of that section. So then, how do I center that img properly, given that mere centering is such a black art in HTML email?

Joel Davies commented on Joel Davies's post over 1 year

Okay, so looking at gulpfile.babel.js and going by what you are saying, it looks like that functionality is already in there:
// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
function copy() {
return gulp.src(PATHS.assets)
.pipe(gulp.dest(PATHS.dist + '/assets'));
}

That looks to me like if I place my slideshow.css in the top level of /src/assets/ , gulp will give me /dist/assets/slideshow.css -- giving me a link I can code into my layouts variation.
I didn't think to look in the gulpfile! Many thanks; I'll try that out!

Joel Davies commented on Joel Davies's post over 1 year

Yes! I only want to include this "component" CSS on some pages, not all pages. Including it on all pages is what will happen if I @import it in app.css, correct?

Joel Davies commented on Joel Davies's post over 1 year

Thanks for the test! Chrome v49 Mac is my problem child and no, I've not been able to get the page to load in that browser. I speculate it has something to do with the slideshow having to be edge-to-edge responsive; no set width. Ended up scrapping Orbit and replacing it with ye olde Slick slider which, if you use background imgs on your slide divs, can be made full-width responsive.

Joel Davies commented on Himmat Chahal's post almost 2 years

Thanks, Brandon, I'll give that a try.
I have a love/hate relationship with all the command line tools we web developers are supposed to use these days. They are great when they work. An enormous waste of billable hours when they do not!

Joel Davies commented on Himmat Chahal's post almost 2 years

Brandon, what freaking-pain-filled process did you follow to upgrade Foundation to 6.2.0 via Yeti Launch? Best I can do is 6.0.6 via bower update which I could only achive after uninstalling all my node_modules, uninstalling node, then reinstalling node and bower. There's more pain to come?

Posts Followed





Following

    No Content

Followers

My Posts

My Comments

You commented on Joel Davies's post 8 months

Welp, never mind! The problem seems to be me!
I was trying to insert an @font-face rule so I could use a Google font, as per this Litmus how-to. Their recommendation was to paste the rule in the head, which I did above the commented-out &lt;!--&lt;style&gt;--&gt; in src > layouts > default.html like this:
<head>
<link rel="stylesheet" type="text/css" href="{{root}}css/app.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>{{subject}}</title>
<style>
@media screen {@font-face {font-family: 'Cabin';font-style: normal;font-weight: 400;src: local('Cabin'), local('Cabin-Regular'),url(https://fonts.gstatic.com/s/cabin/v10/kJXt72Gt1LyFMZcEKAAvlKCWcynf_cDxXwCLxiixG1c.woff) format('woff');}}
</style>
<!-- <style> -->
</head>
Evidently that's a wrong approach -- inserting an uncommented &lt;style&gt; tag there will break the build. Or at any rate, the build ran successfully after I removed that inserted &lt;style&gt;block and put the @font-face at the top of my src > assets > scss > app.scss file:
@media screen {@font-face {font-family: 'Cabin';font-style: normal;font-weight: 400;src: local('Cabin'), local('Cabin-Regular'),url(https://fonts.gstatic.com/s/cabin/v10/kJXt72Gt1LyFMZcEKAAvlKCWcynf_cDxXwCLxiixG1c.woff) format('woff');}}

@import 'settings';
@import 'foundation-emails';

@import 'template/template';

/* etc */
So, object lesson, if you are trying to use a web font, do it at the top of your app.scss file!
 
 
 

You commented on Joel Davies's post 11 months

Really, the only F6 class I found so far was .reveal-overlay; all the other dynamic classes were in my own custom JS. I'm on deadline with this project and did not have time to go hunting further.
One way to track them down this might be to load a site with app.css from a watch build, copy the CSS as parsed in the browser, then run a production build, load that app.css, copy that parsed CSS, then do a file comparison between the two sets.

You commented on Glenn Philp's post over 1 year

Foundation yetis: I just wanted to add my 2¢ that Glenn Philip's JS at http://foundation.zurb.com/forum/posts/43809#comment_33251 did solve a similar problem I had trying to implement Reveal + AJAX.
The request gets performed, the console shows the target HTML is been acquired, but the HTML does not get injected into the designated Reveal modal. Perhaps this is an issue with JQuery's .ajax() ?
I think at the very least the Advanced Options > AJAX section in the docs should be rewritten; the sample code block seems like it just doesn't work. If it did work, it would be helpful to show folks that they are most likely going to want to have a click handler in there.

You commented on Joel Davies's post over 1 year

If you mean...
<container>
<row>
<columns>
<wrapper class="padded">
<spacer size="20"></spacer>
<p class="text-center important-hed">Some content here</p>
<hr>
<row>
<columns>
<center>
<img src="http://www.trcretail.com/email/assets/img/trc-logo-outer-gray-153x60.gif" alt="TRC">
</center>
</columns>
</row>
<hr>
</wrapper>
</columns>
</row>
</container>
...I tried that, but still had the issue with padding being added.
Ultimately, I did a work-around by moving the centered img out of the wrapper-with-padding section. Fortunate that the layout gave me the leeway to do that.
Thanks for your help!
 

You commented on Joel Davies's post over 1 year

Thanks, Corey; I have basically what you have in the first example:
<container>
<row>
<columns>
<wrapper class="padded">
<spacer size="20"></spacer>
<p class="text-center important-hed">Some content here</p>
<hr>
<center>
<img src="/assets/img/logo.gif" alt="logo">
</center>
<hr>
</wrapper>
</columns>
</row>
</container>
...and my CSS is essentially the same:
.padded {
.wrapper-inner {
padding-left: 56px;
padding-right: 56px;
}
}
But the padding ADDS to the width of my container. The problematic element seems to be the <center> tag wrapping the img! If I remove that then the padding acts as it should, adding whitespace to the left and right of that section. So then, how do I center that img properly, given that mere centering is such a black art in HTML email?

You commented on Joel Davies's post over 1 year

Okay, so looking at gulpfile.babel.js and going by what you are saying, it looks like that functionality is already in there:
// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
function copy() {
return gulp.src(PATHS.assets)
.pipe(gulp.dest(PATHS.dist + '/assets'));
}

That looks to me like if I place my slideshow.css in the top level of /src/assets/ , gulp will give me /dist/assets/slideshow.css -- giving me a link I can code into my layouts variation.
I didn't think to look in the gulpfile! Many thanks; I'll try that out!

You commented on Joel Davies's post over 1 year

Yes! I only want to include this "component" CSS on some pages, not all pages. Including it on all pages is what will happen if I @import it in app.css, correct?

You commented on Joel Davies's post over 1 year

Thanks for the test! Chrome v49 Mac is my problem child and no, I've not been able to get the page to load in that browser. I speculate it has something to do with the slideshow having to be edge-to-edge responsive; no set width. Ended up scrapping Orbit and replacing it with ye olde Slick slider which, if you use background imgs on your slide divs, can be made full-width responsive.

You commented on Himmat Chahal's post almost 2 years

Thanks, Brandon, I'll give that a try.
I have a love/hate relationship with all the command line tools we web developers are supposed to use these days. They are great when they work. An enormous waste of billable hours when they do not!

You commented on Himmat Chahal's post almost 2 years

Brandon, what freaking-pain-filled process did you follow to upgrade Foundation to 6.2.0 via Yeti Launch? Best I can do is 6.0.6 via bower update which I could only achive after uninstalling all my node_modules, uninstalling node, then reinstalling node and bower. There's more pain to come?

Posts Followed

Following

  • No Content

Followers

  • No Content