Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:12Length:1.1 hours
  • Overview
  • Transcript

2.2 The Sass Version

Before using the Sass version, you need to install Node.js. Let’s see how that works.

Related links:

2.2 The Sass Version

Before using the asses version you need to install Node JS. For that, you can go to the official website and downloading installer appropriate for your operating system, but if you are using Mac OS you should consider using a package manager like Homebrew and this will allow you to install Node JS in a more appropriate way. Either method is fine really. When I first installed Node on my computer I used the official installers and it works just fine. Every now and then it gives me some permission error. But that can be fixed. I'll show you how in just a little bit. Now, after you install Node, you need to do the following. First, you need to install the Foundation CLI or command line interface. To do that, you would say, npm install globally foundation-cli. If this will give you an error, just add sudo in front. Now, I'm not gonna install this because I already have it installed. But after you install it, you need to set up a blank foundation for emails project. For that, you need to navigate to the folder that you wanna be working on. In my case, it's called foundation emails or SAS and it's on my desktop because it doesn't matter where it is. And you need to navigate to that folder using your terminal. Now, all I'm using the visual studio code which has a built in terminal. So I don't have to do that but if you are using an external terminal, then you need to navigate to that folder using CD or Change Directory command. So once you are in your working directory you would say, foundation new-- framework emails, hit answer. It's gonna ask you, what's the project called? I'm just gonna say tutsplus. And now, it's doing everything. It's downloading the project. Templates, installing dependencies, basically, everything we need to get going. And this will take a minute. Well, a few minutes later and we are seeing some progress here. And currently, we're all set. So this log process took about I think, four minutes, in my case but we now have a tutsplus folder. With everything we need basically. So let's quickly go over the structure here. If we go into SRC, we can see a couple of folders here. First of all, assets will have our image and SaaS files. Layouts will have a starter html that's gonna wrap all of our emails. Pages contains our html files, basically the body of the emails. And finally, partials can contain a reusable components that we can then inject Into various parts of your email. Now, if we take a look at layouts here, you can see a default HTML. But this is basically the starter HTML that's needed to make everything work. You can see that it has some placeholders here. And these, for example, body, will be replaced by what you have in pages. So if we open the basic_html here, you're gonna see a subject, and this will be replaced, right here on the top where it says subject. And the rest will be placed inside the body placeholder that you just saw. So now let's see this thing in action. Well, to see it in action all you gotta do is type the command npm start In your terminal. But before I do that actually, because I created a subfolder, we need to navigate to that. So I'm gonna say cd tutsplus or change directory tutsplus. And now if I do a listing, I can see that I'm in the correct directory. So then I can say npm start. So this actually opened my browser here on local host 3,000 which is the address created by browser. You actually see it in the terminal here. You can click it, you can open it locally, or you can click this link, this is the external link, which can be accessed by other computers or devices on your network. So this is very cool. It's created by Browsersync so any change you made to the source file will automatically be. Refreshed on this computer and on every other device that's connected to this server, really good. The page that you see here is a default page and you can browse the various templates here. Here is the basic one, for example. Here's a hero template. And you can make changes to these. So if I go to the basic template, which is this. And let's see if I replace Susan Calvi here with Adi Purdia and I save, notice that we have some new entries in the terminal, some tasks were run and it says reloading browsers. So now if we switch back to our browser, we can see the refreshed page really good. And this also works with the CSS, so if we go to, where is it, assets, s, CSS. If we go to our app here, we can actually add custom CSS if we want to. So for example, we can say paragraph, color red. Let's do important, just in case we run into issues. And it changes the color red. The page is automatically refreshed, not only here, but on every other device that's connected. Really cool. You can test everything really easily. And this is what I was taking about when I said that Measuring an email gives us really good tools. That's gonna speed up what the whole process. As you saw here just by typing the CL command, you can start the server, browsers, compile SaaS. You can do a whole bunch of other tasks, as well. So really good stuff. Now, you might have seen in this basic HTML, let me just pull this down. You might have seen here some unusual markup. For example, this wrapper or container or row, columns. What is this stuff? Well, this is actually called Inky. And Inky is a templating language that will convert simple HTML tags into the table markup. Required for the HTML emails. So instead of writing all of those tables, and having a huge headache afterwards, you can simply use Inky. If we take a look at the official documentation here, let's actually get one for the Grid, their documentation also gives you an option to view the code in the Inky language. So this is what it looks like in normal HTML and this is what it looks like in Inky. So this container is transformed into this table. Notice the difference in the quantity of code. It's much, much easier to write stuff in Inky. And by using the SaaS version you can transform Inky mark up into HTML mark up. So it's the only way it's gonna work. If you grab the CSS version, well Inky will not be available. Now, this workflow has also a build system that allows you to Grab your finished your finished HTML and inline it automatically. So to do that, let's stop this task for now. You would do npm run build. And this will do pretty much the same thing that the previous command was doing but with a few differences, one of them being that it's minifying images and it's also running some additional task like inline and built. Now, we'll take a look in our main folder, we have an additional folder called dist for distribution. And what this is doing basically, it's transforming the HTML from what we saw before into this inlined HTML. So just like before you can now grab this HTML, you can test it using Litmus or Email On Acid. You can send it afterwards using MailChimp or Campaign Monitor. And we can call it a day,now this is basically how we can use foundation to create emails. I think it's a now time to step back and take a closer look at this whole thing and try to analyze the details of it more. And we'll start in the next lesson by having a look the existing email templates that Zurb provides us with. See you there.

Back to the top