Email was released a couple of days ago, but you'll have to search for it. There's no mention of it on Joe Workman's website – his blog is only updated annually – but hey! I found the link for you!
Email has quietly secured its own web page.
So what's all the hype about? Email is a Foundation based set of stacks that will allow you to build fully responsive marketing campaigns using your favourite app – RapidWeaver, in combination with Stacks 3. If you know how to build a simple web page, then you already know how to build a marketing campaign or a newsletter.
In a similar fashion to Foundation the suite includes a Theme and more than 15 stacks. The stacks will allow you to create a single, or multiple column design with the addition of buttons and CTA's.
When setting out to build an email template, you need to check a couple of things first:
When you drag the Styles stack onto your page and open the stack settings, you'll see a to-do list. An 'Implementation List' that instructs you to Set the Email Theme; Disable Advanced General Settings; Set Title To Subject (the subject of your mail); Set Slogan To Description; Use Only Email Stacks.
Yes, should only use the stacks from the Email suite. Why? Although your email will be HTML, the HTML format that mail apps can render has failed to evolve alongside the www since the turn of the century, hence modern stacks will fail to render correctly.
The Email suite consists of the Styles stack, which has a very similar structure to that of the Foundation Styles; One, Two, Three and Four-Column stacks; a Button; a Callout (CTA); a Divider; an HTML and a Markdown stack; a Header; an Image stack; a Link List; a Spacer; a Visibility stack; a Wrapper and of course a Text stack.
Using the above stacks, you won't be able to replicate a client's website exactly (remember HTML for email is still stuck in the 90's), but you will be able to get pretty damned close – a lot closer than any of the online tools from MailChimp etc. will let you get. And working with Email is a lot easier than the online editors too.
And when you're finished, you can upload your template to one of the online mail services and send it out.
Email has gained only positive comments on the forums since its release and is already widely accepted as the mail template 'app' to use!
Don't know where to start? On the Email homepage, you'll find 15 great templates to download free of charge, with the promise of more to come…
MailChimp & Co, here we come!
T4 is also extremely useful as a demo for Paddy.
Whether the Paddy Suite was named because the first stack was to add padding, or whether it's because Gary is in fact Irish, I can't say. What I can say, however, is that the Paddy suite is an impressive set of stacks.
The Paddy stack, as the name implies, adds padding between stack elements – responsive padding. Paddy is compelling because of the versatile settings it presents. Other padding stacks offer either a fixed height set in pixels, or a responsive height set using a percentage of the width of the container they are placed within.
Paddy is different – you may choose a proportional height in % of Browser Height; % of Parent Height; % of Browser Width, or a fixed pixel height. Advanced users can, as an option, apply a Custom Class to Paddy, or add Inline CSS directly. For ease of use, the settings you have chosen are displayed in edit mode. I can see the setting % of Browser Height becoming very useful.
PaddyPlus will also add proportional spacing to your Rapidweaver Project, but is a little different to Paddy. The proportional units may be set as % Browser Height, or % Browser Width, but you are able to add and edit the proportions at two breakpoints. Setting 0 at either of the breakpoints will effectively remove PaddyPlus for the specified viewport. You can apply a Custom Class to PaddyPlus.
PaddyCol is a single column stack that can be set to the Browser Width in percent. A Maximum Width can be defined in pixels. An interesting concept – for instance: If you set the Browser Width to 100%, the Maximum Width to 960px and a Breakpoint of 640px, the column's outer padding will be removed at a viewport width of 640px and the column expands to full screen width. The reverse, obviously, is also possible – padding may be added at specific breakpoints.
Paddy2Col is a 2 column stack with advanced features. It has no gutters or padding, but will allow you to easily build complicated layouts. The column division is set in %. Paddy2Col has two breakpoints that allow you to decide exactly when the columns break to be displayed above each other. In addition, via a push/pull function, the order of the stacks may be altered after the break, i.e. column 2 can be set to appear above column one. A Custom Class may be applied to Paddy2Col.
Paddy3Col adds three equal width columns to your stacks page – with a single breakpoint, but without padding or gutters. Again, you can add a custom class to the stack. Paddy3Col is the ideal accompaniment to Paddy2Col as together the most complicated responsive layouts become possible – take a look at the demo page.
PaddyColPad is the stack that should be implemented into the Foundation Site Styles! To date, I have used Blueball's Alt Width stack on nearly every site I built. Why, because it allows me to set the padding for each breakpoint.
And this is exactly what PaddyColPad does. Let's say you have a page/stack/column that has 10% padding left and right on a desktop monitor. The padding is often too large when viewed on a tablet and definitely much too large for a mobile device. PaddyColPad allows you to set e.g 5% for tablets and 3% for mobiles – just what the doctor ordered! The padding can be set in % (default) or px and you can add a custom class.
PaddyVis is probably the simplest visibility stack available. When dropped into your project, it has two stacks containers. The upper content will be displayed above your defined breakpoint, the lower content is displayed below the breakpoint. The containers may be left empty and combined with a second instance of the stack for more complicated setups. The settings are displayed within the stack, so you'll know at a glance which content will be displayed when.
PaddyVisPlus is the more advanced version of Vis. It has three containers, allowing you to display different content for each breakpoint. Otherwise the setups just as simple as Vis.
PaddyHeight lets you define the Maximum and Minimum Heights of the content placed within it. A Custom Class may also be set.
PaddyNotes. Sometimes your page setup can get so complicated that it's useful to make notes of what has been done. PaddyNotes is just the stack for the job. Drop it into your project, add a title, add your notes (in Markdown) then hide them until you need to refer to them again. Gary's Templates, for instance, contain complete setup instructions within PaddyNotes. Don't worry – your notes will never be published!
PaddyBalls is a page loader animation. Two dancing balls that morph into squares. Drop Balls into the top of your Stacks page and define the colour of the background and of each ball. That's it.
PaddyShad is a versatile shadow stack. Unlike other shadow stacks, you can not only set the Colour and the Width of the shadow, but you can also set a second Width for a breakpoint and a Custom Class.
PaddyButt. The standard Stacks Button is simple to set up, but doesn't allow much customisation. PaddyButt changes that! Drop the S3 Button into PaddyBut and customise away to your heart's content. Set the Static Colour and the Hovered Colour for top and bottom and the Static and Hovered Text Colours. Set the padding for both the Height and the Width and the Border Radius. You may also choose Ghost Button and if that's still not enough customisation, set a Custom Class or define an Inline CSS Style directly within the stack settings!
Finally, PaddyWidth allows you to define a set width in pixels for stack contents above and below two break points. As always the advanced user may set a Custom Class. Inline CSS Styles may also be added directly within the stack's settings.
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Do you have a question regarding RapidWeaver?
Would you like help with your new project?
Would you like us to build your new RapidWeaver website?
Don’t miss a post!
Sign up for our monthly newsletter.
A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—16