Menu icon Foundation

Developer | Boulder, Co

My Posts


  • NEW
  • Foundation for Emails in Dada Mail v10

    By Justin J

    announcement app

    Howdy - this is just an announcement, but I'm pretty excited, Last year, I took the plunge in using Foundation for Sites in an app I've worked on since 1999 called, Dada Mail. Dada Mail is a self-hosted mailing list manager (announce and discussion lists... (continued)


  • 6
    Replies
  • PlainText Emails

    By Justin J

    plaintext

    I'm wondering if there's any consideration for plaintext emails in the Foundation for Emails workflow. Emails that I send out have both a plaintext and HTML versions, so I need to be authoring both at the same time and I wouldn't mind using some of the pa... (continued)

    Last Reply by Justin J almost 3 years ago


  • 3
    Replies
  • Best way to inline custom styles

    By Justin J

    inlining

    I'm looking into learning about the finer points of the email framework. Currently, I'm trying to set up some custom styles. I've placed my stylesheet inside the, ./src/layouts/default.html file. Once I run,     npm run build The styles ... (continued)

    Last Reply by Sameer sharma over 1 year ago


  • 2
    Replies
  • Using the Yeti Image in my own App

    By Justin J

    yetiMarketing

    Hello! I'm about to release a brand new version of my app, which almost exclusively focuses on the front-end design and UX, which itself was made possible by adopting Foundation for my front end framework. It was an overwhelming amount of work, as this... (continued)

    Last Reply by Justin J over 3 years ago



  • 9
    Replies
  • Beginner Mixins - "no mixin named" error

    By Justin J

    mixins

    Hello, Unfortunately, I'm not getting to far, trying to figure out mixins. I've set up my Sass environment as described under, "Creating a Libsass Project" and everything seems to work well when using grunt and making my changes in the scss/_setti... (continued)

    Last Reply by Justin J almost 4 years ago




My Comments

Justin J commented on Justin J's post almost 3 years

Hi David, maybe you could start a new thread about your issue, then? They're free ;)

Justin J commented on Justin J's post almost 3 years

I don't really want a html to plaintext utility - my app already has that.
 
What I want to do is to work with the HTML versions of my message as well as custom plaintext ones. I've found that just trying to strip out the HTML to make a plaintext version sometimes results in some ugly looking plaintext.
 
Here's what I've done - and it's super easy:
 
I've modified my gulpfile.babel.js and added a function for plaintext,
 
function plaintext() {
return gulp.src('src/pages//*.txt')
.pipe(gulp.dest('dist'));
}
All that does is copy my plaintext files from src/pages to /dist. I can get fancier, later.
 
Then I added that to my task list,
gulp.task('build',
gulp.series(clean, pages, plaintext, sass, images, inline));
And my watch list,  
gulp.watch('src/pages/
/*.txt').on('change', gulp.series(plaintext));
And that's not too bad. I'd like to get some of the panini templating utilities happening, which I think isn't too hard to do now, now that I know how to prevent minifying.
 
(apologies if my terminology is a little off)
 
 

Justin J commented on Justin J's post about 3 years

I appreciate your response, Corey, I'll study this when  have time, Cheers,

Justin J commented on Justin J's post about 3 years

Thanks, Evan!

Justin J commented on Jason kalawe's post about 3 years

This is not meant to be criticism, but I'll echo that trying to upgrade a codebase that's based on v5 to v6 basically means a pretty in-depth rewrite. I've tried once with a project that has around 300+ screens and it seemed impossible. When you dive into the docs, you'll find anything that's not basically formatting is pretty different and requires different structure of your HTML: top bar, side bar - even breadcrumbs; they'll all break pretty badly.
I don't know why Zurb wouldn't say as much when v6 went out - at least give it a good spin - or prepare people for it. A migration strategy would be nice, even if it's, "There is no migration strategy".
 
 

Justin J commented on Justin J's post over 3 years

@Chris Oyler , if you look at the differences in the docs between v5:

http://foundation.zurb.com/sites/docs/v/5.5.3/components/reveal.html

and v6:

http://foundation.zurb.com/sites/docs/reveal.html

You'll see there's no closeOnClick plugin option in v5

So, I'll have to revisit this when I move this project to v6 of Foundation.

I don't think F6 has really fixed this bug, they've just made it outdated, as modal doesn't load content via a call to Ajax anymore (so the modal will never be there in the way, unable to be removed, as content is being fetched)- you gotta do it yourself, and also initialize the loading graphic/visual cue - whatever you want that to be.

Justin J commented on Justin J's post over 3 years

Stephen, I would just look at spin.js, (http://spin.js.org/) which does what you are trying to also do, but allows you to set a target and allows you to manually start/stop.

I'll have to look if F6 has made inroads on some of the problems I'm facing - notably that there's no way to call off a modal, once you've called it, by clicking outside of the modal window itself.

I ended up shipping with colorbox support, and just adding some code to make the colorbox window responsive. First, I set up some paramaters - these are also passed to colorbox when invoked,

var responsive_options = {
    width: '95%',
    height: '95%',
    maxWidth: '640px',
    maxHeight: '480px'  
};

Then made the following onresize callback, after the colorbox is loaded:

  $(window).resize(function(){
      $.colorbox.resize({
        width: window.innerWidth > parseInt(responsive_options.maxWidth) ? responsive_options.maxWidth : responsive_options.width,
        height: window.innerHeight > parseInt(responsive_options.maxHeight) ? responsive_options.maxHeight : responsive_options.height
      });    
  });

Justin J commented on Justin J's post over 3 years

Thank you, I appreciate all the hard work the Zurb team has put into Foundation!

Justin J commented on Justin J's post over 3 years

Here's an example of the behavior I'm seeing,

https://youtu.be/1U-0QKZcCr0

Nothing fancy (I think) going on in the table, just:

https://gist.github.com/anonymous/17be834c3947b2f746d5

(if there's a better code sharing service that supports foundation, just lemme know, and I'll post an entire working example there)

Foundation 6 looks great, and I'm anxious to give it a whirl,

But, I've been bitten my share of times jumping on the very latest bleeding edge, so I'll be holding back for a few sub point releases until things settle down, the missing docs about going from 5->6 get released, all the tooling is in place (I've also been working with FoundationPress) - so on and so forth.

This particular project also needs to get out of the door yesterday, and has over 300 views, so migration from 5->6 would take quite a few cups of coffee itself ;) (not your problem, obv.!)

One nitpick on the zurb site going to v6 - the docs on v5 are kinda hidden, and you have to sorta pole around to find them - no real good reason for that, I don't think?

Also, a lot of the ink stuff was completely broken at the day of the v6 release (links, downloads - even the inliner). That's particularly interesting for me, but kinda gave me a few headaches! :)

Justin J commented on Justin J's post almost 4 years

Reinstalling a fresh copy? That's exactly what I had done. If you follow the thread, the fix was to put the mixin in scss/app.scss, not scss/_settings.scs.

I then lamented on how the docs weren't clear.

I deal with bug reports all the time. The big thing is to be able to recreate the bug.

Here's how I can recreate the problem - Can you verify that you tried the following, and have it did not give back the error I'm also reporting?

 # These first lines are right from the docs:  
foundation new project_name --libsass
cd project_name
grunt build
# add the mixin: 
echo '.custom-button-class {  @include button($padding, $bg, $radius, $full-width, $disabled, $is-input);  }' >> ./scss/_settings.scss
#compile: 
grunt

Posts Followed


Following

    No Content

Followers

My Posts







My Comments

You commented on Justin J's post almost 3 years

Hi David, maybe you could start a new thread about your issue, then? They're free ;)

You commented on Justin J's post almost 3 years

I don't really want a html to plaintext utility - my app already has that.
 
What I want to do is to work with the HTML versions of my message as well as custom plaintext ones. I've found that just trying to strip out the HTML to make a plaintext version sometimes results in some ugly looking plaintext.
 
Here's what I've done - and it's super easy:
 
I've modified my gulpfile.babel.js and added a function for plaintext,
 
function plaintext() {
return gulp.src('src/pages//*.txt')
.pipe(gulp.dest('dist'));
}
All that does is copy my plaintext files from src/pages to /dist. I can get fancier, later.
 
Then I added that to my task list,
gulp.task('build',
gulp.series(clean, pages, plaintext, sass, images, inline));
And my watch list,  
gulp.watch('src/pages/
/*.txt').on('change', gulp.series(plaintext));
And that's not too bad. I'd like to get some of the panini templating utilities happening, which I think isn't too hard to do now, now that I know how to prevent minifying.
 
(apologies if my terminology is a little off)
 
 

You commented on Justin J's post about 3 years

I appreciate your response, Corey, I'll study this when  have time, Cheers,

You commented on Justin J's post about 3 years

Thanks, Evan!

You commented on Jason kalawe's post about 3 years

This is not meant to be criticism, but I'll echo that trying to upgrade a codebase that's based on v5 to v6 basically means a pretty in-depth rewrite. I've tried once with a project that has around 300+ screens and it seemed impossible. When you dive into the docs, you'll find anything that's not basically formatting is pretty different and requires different structure of your HTML: top bar, side bar - even breadcrumbs; they'll all break pretty badly.
I don't know why Zurb wouldn't say as much when v6 went out - at least give it a good spin - or prepare people for it. A migration strategy would be nice, even if it's, "There is no migration strategy".
 
 

You commented on Justin J's post over 3 years

@Chris Oyler , if you look at the differences in the docs between v5:

http://foundation.zurb.com/sites/docs/v/5.5.3/components/reveal.html

and v6:

http://foundation.zurb.com/sites/docs/reveal.html

You'll see there's no closeOnClick plugin option in v5

So, I'll have to revisit this when I move this project to v6 of Foundation.

I don't think F6 has really fixed this bug, they've just made it outdated, as modal doesn't load content via a call to Ajax anymore (so the modal will never be there in the way, unable to be removed, as content is being fetched)- you gotta do it yourself, and also initialize the loading graphic/visual cue - whatever you want that to be.

You commented on Justin J's post over 3 years

Stephen, I would just look at spin.js, (http://spin.js.org/) which does what you are trying to also do, but allows you to set a target and allows you to manually start/stop.

I'll have to look if F6 has made inroads on some of the problems I'm facing - notably that there's no way to call off a modal, once you've called it, by clicking outside of the modal window itself.

I ended up shipping with colorbox support, and just adding some code to make the colorbox window responsive. First, I set up some paramaters - these are also passed to colorbox when invoked,

var responsive_options = {
    width: '95%',
    height: '95%',
    maxWidth: '640px',
    maxHeight: '480px'  
};

Then made the following onresize callback, after the colorbox is loaded:

  $(window).resize(function(){
      $.colorbox.resize({
        width: window.innerWidth > parseInt(responsive_options.maxWidth) ? responsive_options.maxWidth : responsive_options.width,
        height: window.innerHeight > parseInt(responsive_options.maxHeight) ? responsive_options.maxHeight : responsive_options.height
      });    
  });

You commented on Justin J's post over 3 years

Thank you, I appreciate all the hard work the Zurb team has put into Foundation!

You commented on Justin J's post over 3 years

Here's an example of the behavior I'm seeing,

https://youtu.be/1U-0QKZcCr0

Nothing fancy (I think) going on in the table, just:

https://gist.github.com/anonymous/17be834c3947b2f746d5

(if there's a better code sharing service that supports foundation, just lemme know, and I'll post an entire working example there)

Foundation 6 looks great, and I'm anxious to give it a whirl,

But, I've been bitten my share of times jumping on the very latest bleeding edge, so I'll be holding back for a few sub point releases until things settle down, the missing docs about going from 5->6 get released, all the tooling is in place (I've also been working with FoundationPress) - so on and so forth.

This particular project also needs to get out of the door yesterday, and has over 300 views, so migration from 5->6 would take quite a few cups of coffee itself ;) (not your problem, obv.!)

One nitpick on the zurb site going to v6 - the docs on v5 are kinda hidden, and you have to sorta pole around to find them - no real good reason for that, I don't think?

Also, a lot of the ink stuff was completely broken at the day of the v6 release (links, downloads - even the inliner). That's particularly interesting for me, but kinda gave me a few headaches! :)

You commented on Justin J's post almost 4 years

Reinstalling a fresh copy? That's exactly what I had done. If you follow the thread, the fix was to put the mixin in scss/app.scss, not scss/_settings.scs.

I then lamented on how the docs weren't clear.

I deal with bug reports all the time. The big thing is to be able to recreate the bug.

Here's how I can recreate the problem - Can you verify that you tried the following, and have it did not give back the error I'm also reporting?

 # These first lines are right from the docs:  
foundation new project_name --libsass
cd project_name
grunt build
# add the mixin: 
echo '.custom-button-class {  @include button($padding, $bg, $radius, $full-width, $disabled, $is-input);  }' >> ./scss/_settings.scss
#compile: 
grunt

Posts Followed


Following

  • No Content

Followers

  • No Content