Clicky

RapidWeaver Stacks, PlugIns, Themes ...
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

Email Templates For RapidWeaver

"The Chief", Joe Workman, has been working on a new RapidWeaver addon for quite some time now.
Email for RapidWeaver is finally here!.
If you or your clients send out email campaigns, this may be just what you've been waiting for – create your next campaign in familiar surroundings – RapidWeaver!

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.

Foundation Email

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!

Comments

Paddy's Stacks

Gary, at WEBdeerSIGN has a collection of very professional templates available that allow you to build freestyle websites based on either the free Foundation theme, or the free Blank Theme from ThemeFlood. The templates are a great way to either learn about RapidWeaver's possibilities or to use as a basis for your new project. Template T4, for instance, faithfully reproduces the RM website using only donationware stacks (with the exception of one slider stack). While WDS' Templates, will not function without Gary's suite of Paddy stacks (which are delivered alongside each template), but the Paddy stacks will work with any theme.

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.

Paddy is an imposing suite of stacks and their functionality is well demonstrated on the T4 demo page. Well worth taking a look at.

Comments

Show more posts

  • Stacks Image 35399
  • Stacks Image 35402
  • Stacks Image 35405
  • Stacks Image 35408
  • Stacks Image 35411
  • Stacks Image 35414
  • Stacks Image 35417
  • Stacks Image 35420
  • Stacks Image 35423
  • Stacks Image 35426
  • Stacks Image 35429
  • Stacks Image 35432
  • Stacks Image 35435
  • Stacks Image 35438
  • Stacks Image 35441
  • Stacks Image 35444
  • Stacks Image 35447
  • Stacks Image 35450
  • Stacks Image 35453
  • Stacks Image 35456
  • Stacks Image 35459
  • Stacks Image 35462
  • Stacks Image 35465
  • Stacks Image 35468
  • Stacks Image 35471
  • weaverthemes
  • Stacks Image 35477
  • Stacks Image 35480
  • Stacks Image 35483

Links to the developers ® All trademarks cited on this page are the property of their respective owners.

x

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.

* indicates required

Contact Information

My Image

rjh web design

265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
Thailand 58130

About Us

We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.

Legal

This site uses Cookies to determine the best method of display in combination with your browser.
We do not harvest or sell personal information.
© rjh web design 2010—16

This website was built with loving care on a Mac using Foundation. For more information, contact me.