To begin, I recommend digging into your download and finding the “_grids.scss” file. This is where you’ll find the SCSS files that will power your grid. We create a parent ghost table which has a width value of 100 and a max-width of our maximum defined email width defined in pixels (600 px). zip and toss everything but the “stylesheets” folder. Container In this tutorial, we’ll use a two-column layout inspired by Nicole Merlin’s responsive email layout.Essentially, it boils down to this. Once you’ve got Sass and Compass set up, grab Zen Grids from GitHub. Codekit and LiveReload are even better, but they’ll cost you. Point it at a folder containing SCSS files and it’ll automatically compile them to CSS. Scout is free, open-sourced, and cross platform. For the rest of us, I recommend simply downloading Scout and calling it a day.
If you’re comfortable with Ruby, Terminals and Shell Scripts, this should all be fairly straightforward. First, you need to make sure you have Sass and Compass installed.
#Codekit responsive email how to#
I’m going to dive in and teach you how to use this sucker, but before we get into that, a little setup is required. In my experiments, I pushed that to four mixins (you need an extra one for nesting), but that’s still not half bad considering the complexity that can be achieved. This is all it takes to build a basic layout. 1 import statement, 2 variables, and 3 mixins. That being said, it’s easy enough to hook Zen Grids up to some of your own media queries and make it responsive. I would call it a fluid grid system because it’s built on percentages. Technically, I wouldn’t call Zen Grids a responsive grid system (though it does bill itself as such) because it really doesn’t come with any media query features built in the way that Bootstrap does. The SCSS files take care of all of the math and allow you to apply the grid mixins when and wherever you want them. Sass is the reason that Zen Grids can be semantic.
#Codekit responsive email plus#
I know this is a downside for many of you, but it’s a solid plus for me. You set up your document how ever you want and it plugs perfectly into your workflow. Zen Grids doesn’t have any of that stuff though. Ugly, non-semantic class names, a crapload of seemingly redundant but somehow necessary divs the list goes on and on. There are plenty of reasons to hate grid systems. There are lots reasons that I think Zen Grids is a really great tool that you should check out, here are a few of them: None of the Stuff That You Hate Here, you’ll take the two steps necessary to connect CodeKit with Local: Toggle on the Use An External Server button Copy your Local site’s Site Host setting, and paste it into the External Server Address box in Codekit 5.
0 kommentar(er)
