Clicky

Paddy's Stacks
My Image

All the latest RapidWeaver Stacks reviewed,
plus the most important community news …

Stay up to date with current RapidWeaver developments

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.

blog comments powered by Disqus

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

Subscribe to Ninja News
or ask a question

Hi, I’m the Ninja Bot. What’s your name?
image/svg+xml
Nice to meet you, [1-1]. Could you tell me your mail address?
image/svg+xml
[1-1], would you like to subscribe to the monthly Ninja Newsletter?

Yes, I would like to receive your monthly newsletter.

No thanks, I’m good for now. I have a different issue.

image/svg+xml
Thanks for your support, [1-1]. Is there anything else I can do for you?
image/svg+xml

[1-1], thanks for subscribing. If you made a further request, I’ll get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I would like to subscribe to the Ninja Newsletter

Message

[4]
I’m sorry tohear that, [1-1]. How may I help you then today?
image/svg+xml

[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I don’t want to subscribe to the Ninja Newsletter right now.

Message

[6]

Thanks again for contacting us. Your request was successfully submitted.

Contact Information

rjh logo

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—17

Powered by rjh-design

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

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.

View previous campaigns.

Subscribe to the Ninja Newsletter

* indicates required