32

AMA: ZURB Foundation Team

almost 7 years ago from , Frontend developer

Hey everyone! We’re super stoked to be doing this AMA with you today! We’re hot on the heels of releasing a groundbreaking new version for Foundation Emails 2! The response has been overwhelmingly positive, and we’re pumped to keep helping people design better responsive emails like they would a web page. Foundation 6 has been out in the wild for a few months and already had two major releases! Last month, we launched Foundation 6.2 which introduces some significant changes to the codebase that make your workflow even easier and keep you on the bleeding edge of the web. Many of these changes are designed to bring the code more in alignment with the next version of Foundation for Apps 2, which we’ll have more to say about soon.

We couldn’t have gotten this far, this fast, without the hard work of our amazing community. The more we hear from you and how to improve your workflow, the better we get at solving your design challenges of the future. It’s going to be a big year for Foundation!

The Foundation team members answering your questions today are:

We love our community and stoked to chop it up about Foundation with you. So get your mechanical keyboards out and start typing. Ask us anything Foundation!

We’ll start answering your questions on March 30th at 8am PDT.

30 comments

  • Justin Schier, almost 7 years ago

    Foundation for Emails 2 is nothing short of a REVOLUTIONARY ACHIEVEMENT. I don't think people quite understand what's going on here. You guys are SLAYING IT and really have finally solved one of the most difficult problems to plague us - HTML email. We are already heavily using Foundation for Emails 2 and are about to do a mailing next week to over a million subscribers and the framework is performing amazingly well. All my Litmus tests look PERFECT, and we aren't holding back with the design. I just wanted to say a heartfelt thank you for finally killing the monster.

    My question: What problems will you attack with Foundation for Emails 3, or are you done?

    6 points
    • Tim HartwickTim Hartwick, almost 7 years ago

      Thanks for the kind words Justin! As you probably guessed, we've been focusing on F4E 2 the past few months and there's still a lot of really cool things we want to introduce to it before we focus too much on F4E 3. We're starting to add more components and getting a rails workflow up and running for F4E 2. However, if Gmail is still an issue by F4E (fingers crossed that it's not) we might look into introducing the sponge grid approach into Inky. We're also hoping to work closer with some of the email testers out there :)

      2 points
    • Rafi BombRafi Bomb, almost 7 years ago

      That feels good to hear Justin - thanks! We're really pumped about the potential of Foundation for Emails holds.

      Inky definitely opens up possibilities for us in terms of extensions, add-ons, and integrations. Besides this short term roadmap for F4E2 we have some other plans as well.

      • Rails integration
      • Inky with spongy grid
      • more UI patterns
      • other integrations (express)
      • Workflow upgrades like S3 image hosting, asset file zipping, send to litmus testing

      If you have any more ideas to tack on, we'd love to see what else we can add to this roadmap!

      3 points
      • Justin Schier, almost 7 years ago (edited almost 7 years ago )

        Super cool :) My two tiny bits of feedback. I'm using Inky.

        1. When I have an image in a 12 col container that's less than 320px wide, on mobile it's always stretched to the full width. Is there some class or modification I need to put on the image so it stays its exact size? I use @2x images, so if it's actually 400px width, I say width="200" in the img tag. I can show you can example offline if you need. I couldn't find this in the docs.

        2. Ideas for the future:

        A. I'm developing many different emails in a single style, so I'm using many files in the src/pages folder. I had to make my own little index.html as a quick way to get to the other emails in the browser. Maybe if there's no index.html, there could be links to the other files in the pages folder. https://www.dropbox.com/s/a12m91901puohaz/Screenshot%202016-03-30%2012.36.53.png?dl=0

        B. I need to have my code in the src folder be in a github repo, and it took some mind-bending to figure out how. This might be good for the how to section. I did the manual F4E Template install by cloning. At the same level, I cloned a new empty repository. I then renamed the F4E Template src folder to src-orig. Lastly, I symlinked my actual src folder in my private repo next door. I can git pull in new changes to F4E when you guys make updates. All the build stuff still works great. It just took some thinking to figure this out.

        C. I started running into total HTML size over 100k on a long email. I'm not going too crazy with the CSS, honestly. There are articles (kind of old, like 2011) that say anything over 100k will be clipped by many email clients. It didn't play out that way in Litmus, but I was wondering if there's anything you can do to reduce total file size, which affects deliverability.

        D. I second that emotion for Rails integration and sending directly to Litmus. It might be nice to be able to dump inlined HTML out from the dist folder in either uglified or beautified format (which I've been having to do as a manual step).

        E. Atom plugin with inky language support.

        0 points
        • Rafi BombRafi Bomb, almost 7 years ago (edited almost 7 years ago )

          I'll answer these in order so we stay on the same page :)

          1. Looking into the CSS, images are set to be width auto in the small breakpoint. This would be a good a good to pitch on the Forum where you can share a code example and get more help.

          2. A. The ZURB Stack comes with Browsersync. One of the features we are using in our test folder on the Foundation for Emails repo is Gulp function that does this. So that means you can use it!

          In this example Gulpfile right after the server location is defined directory: true will enable this function. Then you delete your index.html and Browsersync will build it.

          1. B. This one may need a little more explanation. The foundation-emails-template will provide the boilerplate for the project but all the latest assets are on the main repo and updated through npm. So changes to the Gulpfile, SCSS, and Inky are managed through npm, directly from https://github.com/zurb/foundation-emails/

          You can point the package.json directly to a branch on this repository to update to the latest commits.

          I hope I read your question right, let us know!

          1. C. Seems like the same file size rules apply. There is a character limit and file size. We're seeing people exceed the character count before file size more often.
          • Create emails that are short and to the point.
          • Minify your HTML. The ZURB Stack comes with a setting to minify the HTML if you run npm run build. This will remove white-space which adds to the character count and file size. Our web inliner also has an option to remove whitespace between your characters.
          • Compress the images. The ZURB Stack will do this when you run npm run build. Saving the images as a .jpg usually makes them smaller.
          1. D. KBall had an early version on Inky working with a Rails App and is now working to release this integration within a month. The sending to Litmus, S3 image hosting, and file zipping is a PR that is being worked on, you can follow it the PR progress.
          0 points
  • Surjith S MSurjith S M, almost 7 years ago

    Thanks for doing the AMA,

    What's your take on Bootstrap Framework, which is quite popular?

    Why one should stop using Bootstrap and migrate to Foundation instead?

    is there any other upcoming products from the team like the Email (which is great)?

    ~Surjith

    6 points
    • Kevin BallKevin Ball, almost 7 years ago

      Hi Surjith,

      Bootstrap is a great prototyping framework, where you can get something that looks pretty good out of the box, but even with theming most Bootstrap sites kind of look like Bootstrap. Foundation is much more... "foundational", in that it is designed from the bottom up to allow you to truly implement your own visual identity on top of it. This is one of the reasons why Bootstrap has been more popular for developers, while Foundation has been more popular in the design world - many devs just want something that's going to look decent without having to worry about design, while designers want something that makes it easy to implement their vision.

      That being said, we're planning some features (like better theming) that will make it easier for developers to pick up Foundation out of the box and start working with it.

      With regards to upcoming products, we think there's a long way we can go with Foundation for Sites and Foundation for Emails, but we're getting rolling on Foundation for Apps 2, which will be a rebuild of Foundation for Apps with Angular 2.

      Regards, Kevin

      4 points
    • Kieran RheaumeKieran Rheaume, almost 7 years ago

      (to take with a grain of salt) but this is a recent comparison of the two: http://dannyherran.com/2016/03/state-of-affairs-bootstrap-4-vs-foundation-6/

      1 point
  • Drew McDonaldDrew McDonald, almost 7 years ago

    I know the Inky markup is how Foundation for Emails ticks, does that cause the framework to be bloated translating that table markup?

    Also I don't know what to expect with Boostrap 4, but has Zurb thought about integrating flex box classes for their css grid?

    2 points
    • Rafi BombRafi Bomb, almost 7 years ago

      Good questions! Foundation for Emails uses Inky to help you get away from table markup. There is also a CSS version with table markup. Either way, tables are the only thing all the email clients recognize for layout and structure.

      So Inky wouldn't affect the bloat of emails. A couple things that matter more is:

      • A simple design with singular purpose
      • optimized images (ZURB stack does this)
      • Compress the output/whitespace (ZURB stack does this)

      As far as Flexbox goes - we're all in! When we launched Foundation 6, we added a flex based grid. In 6.2 last month, we added flex modes to many of the components so you can benefit form the flexbox for things like menu's and button groups.

      Basically, we love flexbox! I could say it all day. We're also planning a series of tutorials based around the flex property.

      1 point
  • M. AppelmanM. Appelman, almost 7 years ago

    Geoff: do you even sleep bro? I see you put in so many commits on all of Zurb's repos. You are even commenting on DN posts!

    2 points
    • Geoff KimballGeoff Kimball, almost 7 years ago

      The past few months I've had the luxury of working only on Foundation at ZURB, which gives me quite a bit of time to keep up with the frameworks and supporting libraries, and get paid for it.

      I do open source work in my spare time, most of which belongs to ZURB, but I also have some projects of my own as well.

      But don't worry, I tend to sleep until noon on the weekends ;)

      3 points
  • Andreas Galster, almost 7 years ago

    With the new release of inky do you plan on creating templates that might prove useful for startups, such as verification, signup, receipts, etc.?

    2 points
    • Rafi BombRafi Bomb, almost 7 years ago

      Sure! Templates are a great way to start! Building templates from scratch with Inky has been quite a treat so building some templates is actually fun!

      There are 11 email templates to get started so far!

      Looking ahead, it would be great if we could set up an easy way for people to contribute un-styled templates so everyone can use them.

      If you have some specific designs you need help with, we can support you with them on the forum!

      3 points
  • Max LindMax Lind, almost 7 years ago (edited almost 7 years ago )

    Hey Guys - thanks for joining us!

    • For those unfamiliar, what's the best way to get up and running with any of the Foundation products? (Help docs, ZURB University, etc)
    • Your team does a great job with roadmaps and keeping users in the loop on all upcoming changes... with each new release how does you team pick/choose which features and updates to include?
    • When it comes to design agencies with growing teams, how do you convince those who don't yet use frameworks (and specifically Foundation) that they should?
    • It's safe to assume everything over at ZURB is likely built upon Foundation, but what other tools/services/etc do you rely on day to day?
    • What's your take on services that allow you to build websites without writing any code? (i.e. Webflow)
    1 point
    • Kevin BallKevin Ball, almost 7 years ago

      Hi Maxwell,

      I'm going to tackle just a couple of these questions, and let some of the other guys attack the others.

      • On roadmaps: We've got an internal process for assessing feature possibilities with regards to the vision, moving them into the roadmap, and delivering on them. That being said, we're looking at bringing this process more into the open and having more community voice and involvement in determining what makes it into each release. Watch this space. :)

      • On tools and services. We do most of our backends in Ruby on Rails. We rely on Intercom to streamline our communications with folks. We love Campaign Monitor for handling our email lists and emails.

      • With regards to services that allow you to build websites without writing any code... my sense is that these services are great for the basics. If you're a small business or individual just trying to get online for the first time, great, take one of those services. However, they're always going to be less customizable and they're always going to be behind the cutting edge in what they can do. This is not a criticism of them - it's more by definition - to create a bulk service you HAVE to make choices about what you support, and it takes time to add new feature and availability support. So in my opinion anyone trying to do something innovative or create a unique brand/visual experience is going to need to go to custom.

      Regards,

      Kevin

      2 points
    • Rafi BombRafi Bomb, almost 7 years ago

      Hi Maxwell!

      • There's lot's of routes to get started with Foundation and perhaps that causes some confusion. With Foundation for Emails, we introduced a Get Started section that led directly to a tutorial.

      University courses are a great for getting a lot of learning in fast and getting beyond the docs.

      The docs can be a place to start, especially if you've built a website or 2.

      There's also so really great video tutorials like this grid series from James Stone

      0 points
  • Shane MoloneyShane Moloney, almost 7 years ago

    Hey folks,

    Congrats on all the recent launches, and thanks for all the hard work.

    Question:

    What is the general workflow/approach/process you take when working on Foundation?

    Does it differ much from the workflow/approach Zurb takes when working on client projects/products?

    1 point
    • Rafi BombRafi Bomb, almost 7 years ago (edited almost 7 years ago )

      Thanks for the props! I might be able to answer the first part and maybe a designer here can answer the other.

      We all get to touch different things, we all get to see different parts of the business, and we bring those insights into Foundation.

      Typically, after we have a quick team scrum each morning, we go to GitHub and respond, categorize, tag any new issues that come in from the 3 frameworks. We use Hipchat to discuss any issues if needed.

      I will spend time on the forum helping people, writing lessons and filming classes.

      0 points
  • Laura McCartney, almost 7 years ago

    What are the best and worst things about building stuff for developers?

    1 point
    • Kevin BallKevin Ball, almost 7 years ago

      Hi Laura,

      I'd say the best thing is that sometimes folks will take an idea, get excited, and just go off and build it. We've gotten some amazing features just by someone who's using Foundation scratching an itch and going off and building it.

      Probably the worst thing is that the developer community can be really critical... you'd think that as software developers we'd have a good sense of how hard it is to ship quality software and have some patience, but often times having to work with software just makes folks more impatient.

      Regards,

      Kevin

      2 points
    • Tim HartwickTim Hartwick, almost 7 years ago

      There are so many rewarding aspects of building things for developers - especially open source projects. We love having the community's support shaping the best possible product as well as help crushing bugs! It's super rewarding to hear kind words from others in our industry of how we've improved their workflow in anyway.

      The only downside that I can think of is that it's a little harder to BS on the product... Since Foundation is open source, everyone can see everything. Developers are pretty good at keeping us honest :) Overall though, it's a really rewarding experience!

      1 point
  • Kemie GuaidaKemie Guaida, almost 7 years ago

    What's your motivation to develop and maintain Foundation? Where would you like to see it go? Thanks for both the AMA and Foundation.

    1 point
    • Kevin BallKevin Ball, almost 7 years ago (edited almost 7 years ago )

      Hi Kemie,

      Our mission at ZURB is to change the way people design connected products and services, with a goal of reaching 50 million people. Foundation is a key piece of this - I'd like to see it become a framework that allows you to implement your visual identity and seamlessly take it across all of the different places you have touch points with your customers - websites, applications, email.

      For example, if you think about Email - we traditionally think of email as something to "pull people" back to something else, an application, etc. Partly this is because the tools for building emails are so challenging... But what if it was easy enough and flexible enough that you could treat emails as just another 'surface' of your application? Where you could take the visual styles you've developed on the web, quickly and easily apply them to email, and create another touch point that just "feels" like part of an integrated experience.

      Regards,

      Kevin

      3 points
    • Rafi BombRafi Bomb, almost 7 years ago

      As far as the future? I'm excited that more and more of our community members are involved than ever before. We've had a few successful Release Candidates with people helping test and contribute to features.

      We are taking this to a place where there will be more people form diverse backgrounds contributing to the code, direction, and community surrounding Foundation.

      Basically, we love our contributors!

      1 point
  • Squid Ink, almost 7 years ago

    How much profit did ZURB earned? What's the most profitable product of ZURB?

    0 points
  • Oliver pfeiffer, almost 7 years ago

    Hello, thanks for integrating your development stack and Yeti to FD6. This is a great workflow for us.

    Even Yeti is not always up to date with the newest release (thats always a problem with these build tools when s.o. is depending on the updates of the developer) but the dev stack with the command line is working great.

    Do you have an example integrating Critical CSS in the workflow/gulpfile ?

    And it would be great to have an option (other than Notable) to publish a demo site directly, for example to Netlify - directly or over github. They have a great workflow for static site generators and we can password protect sites for clients!

    thx Oliver

    0 points
    • Rafi BombRafi Bomb, almost 7 years ago

      Hey Oliver! Thanks for the kind words!

      Yeti Launch was built to solve a specific problem that some people ran into around the time Foundation 5 came around. At that time, there were some new build tools we were using like Grunt, Bower, and unfortunately the CLI still needed Ruby to work right. The complexities of modern development with advanced build tools made it challenging for people to get up and running with Sass.

      So we wanted a solution that made it easy to install a Sass version without downloading tons of dependancies and was friendly to to people who are not into the command line.

      Yeti launch is a great tool and it's not quite where we want it yet. Looking ahead, Yeti launch should have automated updating of the app itself and a prompt and option to update the codebase of the projects. We'll have more details on this soon!

      I'm not too knowledgeable about Critical CSS myself but we'll get one of the other team members to chime in.

      In terms of hosting a project to share, Notable Code is the man :) Other services I've seen are Netlify or Bitballoon but they dont have a feedback option as far as I know.

      0 points
      • Oliver pfeiffer, almost 7 years ago

        Well, thats not really the answer I was looking for.

        Yeti is still installing the Sites 6.0.x version (when using the zurb template) and not 6.2.x so we have to update the bower, put a .bowerrc file into and switch jQuery to 2.2.x. Shouldn't be so difficult to keep the dependencies up to date when launching a tool. Yeti should make things more easy and not complicated to start with...... (so I think it is not used by many developers but it could be )

        Would be nice to have a link for 'isProduction' in Yeti so we don't need to 'npm run build'. The 'deploy' option does not create production ready code.

        And Notable is may be not 'the man' for evbdy......

        0 points