Clicky

RapidWeaver Stacks, PlugIns, Themes ...
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

NewsFlash – Duck Soup

Since the Weaver's Space Conference people have been impatiently awaiting the demo file that Marten Claridge promised to make available during his presentation 'Designing Every Element'.

I've just been able to take a look at at the pre-release version of what Marten will be delivering and I'm flabbergasted!

'Duck Soup' isn't simply a single project page, it is a whole set of projects with over 150 different amazing modules that you can paste into your own projects to achieve instant design perfection. The modules are built exclusively with BWD stacks and should work with virtually any theme.

I hear that Duck Soup will be released very soon (perhaps even before Thanksgiving) and I personally can't wait!

Comments

RapidWeaver Twerks Again!

If you purchased ShakeIt fron Tsooj Media, now is the time to update! Will Woodgate just released a new version of ShakeIt. The interface is now cleaner and – more importantly – ShakeIt is now pure CSS, so it's 100X faster!

ShakeIt is one of those attention-grabbers that I personally am not fond of. That, however, is my own humble opinion and should not influence you if you need to Shake, Rumble, Vibrate or Pulse any element on your page

ShakeIt does exactly what the name implies — it causes a stack to wobble about and beg for attention. It can shake, or pulse a stack, or a set of stacks (using CSS ids) either constantly, or upon interaction with the mouse, i.e. when hovered. There are ten different animations to choose from.
The animation is endless – so I personally would confine the effect to display only when hovered. But again, that's just personal taste.

If you intend to animate an image stack with ShakeIt, some of the animations will cause the image corners to be cropped when moving. To avoid this, make sure that your image has enough padding.

Stack settings

Shake – Stacks (default), Custom CSS Selector(s)
Shake Trigger – Shake Constantly (default), Shake Constantly, Pause on Hover, Shake on Hover
Shake Effect – Ten options – ranging from subtle (Little) to totally Crazy!

Don't let yourself be influenced by my personal taste. If ShakeIt is the stack that you need, to grab your visitor's attention, go for it!
If you are prone to epileptic seizures, you might prefer to avoid the demo page!

Comments

Quick Menu For RapidWeaver

The past twelve months have seen a couple of menu stacks arrive on the RapidWeaver scene. Weavium just added an interesting new stack that will make your choice even more difficult than before. The fifth stack in the Weavium line-up is called Quick Menu.

Quick Menu – WeaviumQuick Menu is one of those stacks that makes you wonder why no one came up with this solution before now. A menu stack that appears, or disappears when and where needed and can trigger whatever you want it to trigger.

Here's an example: I have a single page website and would like a context menu to appear for each section. With Quick Menu I can add a menu of my choice to either side of the page with markers before and after each section and with each section a new menu will fade into view.

A product section, for instance, with a couple of rows of images could display a menu to call up product information for each item.
And when you scroll to the next section, the menu fades out, ready for the next products…

A group of social buttons when a contact form is visible on the page, or that contains a trigger for the contact form's lightbox alongside the social buttons.

Quick Menu can also be set to be permanently in view, or to appear when a marker on the page is scrolled to and then remain visible until the bottom of the page is reached. Quick Menu can also contain hidden menu buttons.
In this case, there is a 'View All' button which triggers a Quick Menu lightbox that displays a complete list of menu items.
Quick Menu is highly configurable, so that each button can have its own colour and it goes without saying that each button can have its own icon.

Quick Menu – Weavium
Quick Menu consists of three stacks – the main stack that supplies the menu's global settings, a Menu Item stack that allows configuration of each separate item and a Marker stack.
The first thing that struck me about the settings panel, is that there are no unnecessary settings included – so no background colour, no margins, or padding. The second thing that I observed is that Weavium, like a number of other developers that produce great stacks, don't make use of tool tips; so you'll either need to experiment, or read the manual.

Stack settings

Show/Hide – Display – Always, On Scroll To, Between Markers
Responsive – Hide Menu (for the standard breakpoints)

General
Horizontal Position – Left, Right
Vertical Position – Top, Centre, Bottom
Top Offset – px
Padding – Top Offset for the lightbox menu
Z-Index – Default setting 1 quadrillion
Background – Lightbox background colour
Hide View All Button – deactivates the lightbox

Items
Default BG (colour)
Default Content (colour)
Item Size
Item Radius (interesting to note that whilst the menu radius is altered top and bottom, the lightbox radius only top right)
Icon Size
Text Size
Text Weight – Normal, Bold
Font – Selection of 15 web fonts

Items > Open
Max Width – px
Item Padding – Vertical, Horizontal
Item Radius – sets the radius of all four item corners
Icon Size
Text Size

Close Button
Size
Icon Size
Radius
Icon Colour
Background [colour]

Quick Menu Item Stack
Hide (shows when opened)
Item Action – Link (default), Scroll to Top, Scroll to Bottom, Scroll to Marker, Java Function
Icon Font – Font Awesome, Ionic, Material, Custom
Custom Colours

Quick Menu Marker Stack
Marker ID

Quick Menu is an interesting new stack that is well worth a look at. Check out the demo page to see its possibilities.

Feature Section For RapidWeaver

How do I introduce a stack that looks so simple, but is as feature rich as 1LD's Feature Section? All Feature Section does is to present a card, or a selection of cards that feature your business, or your products. But Feature Section has so many setup possibilities that I can almost guarantee that it will never look the same on any two websites.
Feature Section - 1LD

Your aim: to present your business, or your products. Feature cards with snippets of information about your company, your employees, or the services you offer. Feature Section is a great way to do just that in a professional manner –
An animated (or not) grid of cards that present your product with an Icon, or an image – an employees portrait, for instance –above each card (or not) and a short, informative text.
Each Feature Card has a container for a headline, plus a container for your text. As you can see in the example on the left, you can also add HTML to the text section – the image in the example was positioned with a link to a warehoused image.

So how does it come together?
When you drop a Feature Section stack onto your page, you'll be presented with a grey card, a centred smiley icon, a Feature Title and a text. In preview mode both the card and the icon already change their colours when hovered.

Format the first card by leaving the Feature Section stack active and altering the background colour, the icon colour and the Icon position. Then change the background and Icon colours for the hovered state.

Once you have your first card formatted, you can drag copy it to duplicate it, or add a fresh card by clicking the + child button; then decide how many columns your grid should have on each viewport. You can then set about adding hover animations to your cards – if you wish.

The settings within the main Feature Section stack are global settings that determine the appearance of all the cards within the grid.
The Feature Card stack simply has settings for the icon, or inset thumbnail image and has settings for a link.

Feature Section - 1LD
Stack settings

General Settings
Max Width – Determines the max width of the grid
Card Alignment – Defines how the cards are aligned. Top, Centred, Bottom, Stretch. With 'Stretch' each of the cards in a row has the same height
Desktop Cols; Tablet Cols; Mobile Cols – The number of columns to be displayed below each breakpoint
Gutters – Horizontal, Vertical

Cards
Background – None, Colour, Gradient, Image
Padding
Radius
Borders – Off, On
Border Width
Border Colour
Shadow – Off, On

Card Icons
Alignment – Left, Centre, Right
Icon Size
Icon Colour
Hide Inner Icon
Background Size
Background Colour
Padding
Radius

Card Content
Text Alignment – Left, Centre, Right
Padding
Title Font – 13 standard fonts plus Custom
Title Size, Title Spacing, Title Colour
Content formatting as above

Hover Effects
Transition Speed
Hover Scale – 0—1.5
Rotate (Icon) – -360—360º
Translate – -50—50px (distance the card moves up/down when hovered)
Hover BG Ripple – Card colour change on hover (default)
Ripple Origin – Top Left, Top Right, Centre, Bottom Left, Bottom Right
Ripple Colour – Card colour on hover
Hover Shadow
Hover Icon Background
Hover Icon Colour
Hover Title – default
Hover Title Colour
Hover Text – default
Hover Text Colour

My personal opinion: Because Feature Section has so many customisable options, it is a great way to present product details, short biographies, or company details. Each card can be linked to another page, or page section and make Feature Section an extremely versatile stack. I like it!
If you need inspiration, open up the demo file that comes with the stacks – it has numerous examples.

Comments

OneLiner – Resizing Text in RapidWeaver

Setting Headline sizes can be frustrating. What looks good on a large screen will often add unwanted line-breaks on mobile devices. There are a couple of stacks that allow you to set responsive sizes for different breakpoints, but again, what looks great on an iPad can look terrible on an Android tablet.

Jeroen (Marathia's Stacks) also became frustrated when formatting single lines of text for responsive sites. The result of his frustration: OneLiner.

OneLiner is a stack that allows you to set the width of a line of text to appear just as you want it on any screen. OneLiner's default setting will allow your text to fill its container width, however, it also has settings that allow you to define exactly which percentage of the container your text should fill. Example: Three single lines of text.

Marathia - OneLiner

Now if you analyse at this text, you're going to notice that the second and third lines of text are going to appear much too small on a mobile phone to be legible.
For this reason OneLiner allows you to override its' settings above, or below a set breakpoint and define a fixed text size.

Marathia - OneLinerIn this second example, I have set OneLiner to display the second line of text at 18px on mobile phones and the third line at 16px.
Instead of shrinking to fill the container width, the text now displays at a set size that is legible. Line-breaks appear within the text as soon as a word no longer fits on a line.

OneLiner also has further useful settings. Obviously, you can set h1–h6 and paragraph tags for your text, but you can also override the text formatting entirely by setting the font, font colour and alignment.

Stack settings

Tag – None (div) – (default) h1– h6
Set Custom Text Style – Bold, Italic, Underline
Align – Left, Centre, Right
Set Spacing – Letter, Word, Line
Font Family – Theme Default, Web Safe Fonts, Custom
Capitalise – Normal, All Upper Case, Initial Caps
Size Correction – Text width in %

Advanced Settings
Disable – Small Screen, Large Screen
Max Screen Width – Breakpoint
Align – Justification above/below disabled settings
Fixed Font Size – Above/Below disabled settings
Content – Custom, Site Slogan, Site Title, Site Footer

OneLiner is a cool stack that solves the frustrating problem of headline sizes elegantly and quickly.

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.