Clicky

RapidWeaver Stacks, PlugIns, Themes ...
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

Shattering Popups for RapidWeaver

Landing pages are a great way to get a visitor to click a Call To Action. With Marathia's latest free stack, you'll really grab your visitor's attention.
ShatterPopup – Maratia's Stacks

It's slowly becoming a tradition that Marathia presents us with a free stack at Christmas. ShatteringPopup is Jeroen's latest present; a popup with a fullscreen overlay that opens as an animated mosaic and closes the same way when your visitor clicks anywhere on the page.
The overlay can be set to either a colour, or an image.

It's recommended that ShatteringPopup is set to a maximum width of 320 px, so that it can be viewed in its entirety on mobile screen. The size is set via the mosaic tile size, but sadly the popup script that ShatteringPopup is based on is not responsive.

The non-responsiveness, however, is not a problem. Your popup appears in the centre of the screen and, due to the animation, it simply can't be overlooked.

ShatteringPopup – Marathia's Stacks

The setup is simple, with settings for the tile Size and Number of tiles (you must set an even number), Border Colour, Width and Radius and , of course, the background colour or image settings.

Grab your free copy of ShatteringPopup now. Oh, and if you missed Jeroen's previous Xmas specials – XmasLights Stack from 2012, the Blink! and Marquee! Stacks from 2015, the Antiquify Stack from 2016 and the Nebula Stack and Shards Stack from 2017 – they're still available as free downloads

Comments

Soundboard for RapidWeaver

If Weavers wish to add a series of audio clips to their pages, they could obviously use a sophisticated stack such as PlayLister, a cool stack from Stacks4Stacks. However for a collection of short clips, PlayLister would be overkill in most cases.

Let's say that you want to add short teasers from your group's latest album, or a collection of bird songs…
Soundboard, the latest stack from Stacks4Stacks, is the ideal solution. Just drop a soundboard stack into your page, link to MP3 files you've added as resources, or files stored online, add images/buttons and/or captions as necessary and you're good to go.

Soundboard has a simple user interface and is intended for more uncomplicated setups where advanced features such audio controls, dynamic playlists, sequential playback and extended captioning aren't required. SoundBoard lists your MP3 tracks as attractive buttons and make them instantly available for playback in HTML5 format. Soundboard works in practically any modern web browser and on mobile devices.

The buttons are presented in a responsive CSS grid. You can either apply the same background styling to all buttons or customise button backgrounds individually on a button-by-button basis. The completed result is a tidy and particularly user-friendly interface. To play an MP3 track, simply click or press its button. To stop the MP3 track playing, press the button a second time, press an adjacent button, or click anywhere on the page.

Soundboard – Stacks4Stacks
Stack settings
Soundboard Grid Width – XS, SM, MD, LG, XL – %
Item Margin
Border Colour
Border Radius
Border Weight
Button Opacity – Status #1 (playing), Status #2
Button Padding
Fill Style – Inherit, Colour Fill, Vertical/Horizontal/Diagonal/Radial Gradient, Single Image, Tiled Image
Lebel Align – Left, Centre, Right
Label Colour - Status #1 (playing), Status #2
Label Style – B, I, Upper Case, Underlined
Label Size
Transition Speed

Soundboard was designed specifically for RapidWeaver, you won't find the code anywhere else on the web. It is, without a doubt, the ideal stack for publishing short audio clips.

Comments

Horizon for RapidWeaver

The age old problem. We have masses of content to be integrated onto a page, but how do we do so and retain some semblance of design. The obvious solution, of course, is some sort of tabbed content, or an accordion. Tabs and accordions, however, are not always ideal and seldom look really attractive, on top of which – some visitors don't realise that there is more content hidden behind the tabs, so what about a slider?

JW's Weaver's Space has gained a new stack – Horizon a stack that scrolls content into view when required.
We've seen sliders before, but Horizon is different, it can scroll content horizontally either when your visitor slides the scrollbar (or drags on mobile devices), or automatically. Automatically means that your content can scroll constantly (and pause on hover), or – especially subtle – scroll as the page is scrolled.
If Horizon is set to scroll manually, a badge can be displayed "Scroll Me" (or a text of your choice) so that even the least experienced visitor gets a hint that there's more content available.
Horizon will accept any stack [combination] that you care to throw at it, but it is also TotalCMS-ready, i.e. it has options to add a Blog List, a Gallery, or a Post Gallery.

Horizon – Joe Workman
Stack settings
Horizon Container
Start Position – %
Enable Scroll Hint
Hint Text
Collapse in Edit Mode

Horizon Scrollbar
Scrollbar – Default, Hide, Styled
Show on Hover
Scrollbar Height – Height, Gap (px)
Scrollbar Colours

Horizon Cards
Height – Auto, px, %
Width – Auto, px, %
Width – %
Min/Max – px
Margin
Padding

Animation – None, On Page Scroll, Loop, Loop on Hover

Horizon is a great way to display masses of information and even the most inexperienced visitor can hardly miss that there's more content to view.

Comments

Intrinsic: Building a Responsive Layout

You just purchased Intrinsic from S4S and are going to build a killer layout!
But wait, that looks a lot more complicated than you thought it would!

I assure you it isn’t; Here’s a layout that I put together quickly to demonstrate how Intrinsic works…

We’re building for the modern web – right? So what did we learn just last week?
Mobile First!

Let’s build a project together…
Drag an Intrinsic stack into your stacks page and begin filling it with content.

In my project, I have a header stack — an image with a title and a menu bar. I added the image as a background image to a Sections Pro stack and the title in a Sections Box. The menu is below the sections box and I dropped the lot into an Intrinsic Grid Item. Problem number one!
 The Intrinsic stack already has a background colour defined. Two backgrounds won’t work. If you wish to see your Section, you’ll need to deactivate Intrinsic’s BG in the main stack!

Once that’s done, you’ll notice that Intrinsic also has 0.75rem padding on all sides. We want our banner image to be full width, so the padding will have to go!

Next up, in a Grid Item that I’ve given the ID h1, I’ve added a Grummage stack with a Header stack, and a 2 column Grummage containing paragraph stacks.
The Grummage stack reduces our Intrinsic content to the site width defined in the Foundation setup.

I’ve then added the following Grid Items and filled them : for paragraphs one to four with the IDs p1 — p4. For images i1 — i4. In the I Grid items I’ve added a text stack for the caption — set to align at the bottom of the Item and I’ve added a background image via the Fill Style dropdown.

Now comes the Grid Item for your footer.

The preview will still look chaotic because we haven’t added a layout yet!

In Grid Template areas, we now need to add the following:
'header'
'h1'
'p1'
'p2'
'p3'
'i1'
'i2'
'p4'
'i3'
'i4'
'footer'
If you now preview, you’ll see that the mobile layout is almost finished. There’s just a tiny problem with the height of the images.
The problem arises because we haven’t given the rows a height. That’s fine for the text content – ‘auto’ works just fine, however it doesn’t work for the image items which only contain a caption with a BG [image], but the BG height hasn't been defined..
This means that we now have to set the size for each of the rows in our layout. 
The first five rows work just fine with auto, so we can add “auto auto auto auto auto “ to set the height. Make sure there is a space between each one.
We want our images to have a min height of 300px on mobile. The max height can be set to “auto”, so now we add FOUR instances of “minmax(300px,auto)”.
Once again – don’t forget the space between each ‘row’.
 Now add “auto” (with spaces) between the first two images rows for the headline ‘p4’ and once again at the end for the footer.
And Voila! We have a simple Mobile layout!

Our content is all in place, so all we need to do now is add a layout description for screens larger than 640px or 768 px (up to you). 
We want the images spaced around the header ‘p4’, so In suggest you grab a piece of paper and draw the following:

Intrinscic – Stacks4Stacks – scheme

This shows you your layout scheme…
So now we can begin work. Our layout has three columns.
The Header and the Grummage with the two columns should fill the layout width, so for them we add:
‘header header header’
‘h1 h1 h1’
This tells Intrinsic that the two Grid items span all three columns.
Now we add a new line:

‘p1 p2 p3’
to place those three items in the same row.
For our four images and header, we just worked out on paper that we need :
'i1 i1 i2'
'i3 p4 i2'
'i3 i4 i4'
And to complete the layout we need:
‘footer footer footer’
Don’t forget any of the spaces OR the single quotes, or you layout won’t work!
Once again we need to format the row height to accommodate the images.
This time we have fewer rows because p1,2 and 3 are displayed on the same row.
The images can be larger to, so this time we remove the ‘auto from the Grid Row Height and add:
auto auto auto minmax(400px,auto) minmax(400px,auto) minmax(400px,auto) minmax(400px,auto) auto
Your desktop layout is now more or less complete. If you go through the Grid Items one by one, you can now add background colours, add, or remove padding and take a look at the options in general – there are many, but now, at least we have a responsive layout.

And now you've come this far, you can define a layout for a third breakpoint.
Quickly sketch out on paper just how you'd like it! Have fun!

BTW – If you visit this page with what you’ve just learned, you’ll find a few more helpful tips.
I know, if you suffer from code phobia like me, it looks scary, but I assure you — after the work you just did, it isn’t!

Please note that DISQUS operates the forum below.
When you sign in to comment, RWNinja will provide your email, first and last names to DISQUS. That information, along with your comments, will be governed by DISQUS’ privacy policy. By commenting, you are accepting the DISQUS terms of service.
Comments

Filter Grid for RapidWeaver

There are a couple of stacks available that will filter RapidWeaver content; some more, some less complicated. One Little Designer has just released what is probably the least complicated filter stack available today.

Filter grid does exactly what it says on the tin. A grid of content that is filterable. Drag Filter Grid into a Stacks page and your first row of content is almost finished. All that's missing is your content. Drag any combination of content into a Filter Grid Column, add comma separated tags and you're ready to fly!
The possibilities are endless: Portfolios, travel catalogues, product catalogues, if it needs to be filtered, Filter grid is the simplest solution!

Filter Grid – 1LD

Stack settings
Hide Grid Tags – Hide the coloured tags below each grid
Max Width
Columns – Desk, Tablet, Mobile
Column Min Height – Desk, Tablet, Mobile
Gutter – Desk, Tablet, Mobile
Tag Block – px
Tooltip Text – px – the tags can display tooltips
Tooltip Radius
Tooltip Padding


Dropdown Toggle
Select Text – Select, Deselect – localisation
Width – px
Text – px
Icon
Radius
Padding

DropDown List Items
Max Width
Radius
Text – px
Radio – px
Colour Blocks – px
Block Radius
Padding

Colours & Fonts
Default 1LD font options
Colour selectors for
Toggle
Text
Item BG
Radio
Tooltip

Filter grid is child's play to set up, does not require PHP and is very effective. See it on a site near you soon!

Please note that DISQUS operates the forum below.
When you sign in to comment, RWNinja will provide your email, first and last names to DISQUS. That information, along with your comments, will be governed by DISQUS’ privacy policy. By commenting, you are accepting the DISQUS terms of service.
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.