Clicky

RapidWeaver Stacks, PlugIns, Themes ...
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

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

Kalendar for RapidWeaver

Websites that display calendars have two core functions: They show upcoming events and they display event details. Ideally, the calendar should be aesthetically pleasing with an uncluttered user interface. Beyond good looks, the design should help you tell different kinds of events apart and present a bird’s eye view of them at any screen width.

Kalendar from Weavium not only fulfils all of the above, it also offers tons of styling options and supports 20+ different languages. Kalendar can display public calendars from Google, Outlook, or any other calendar that has an iCal address, and event details written in markdown will automatically be converted. And, of course, Kalendar looks great on mobile devices too.

You can, of course, also create calendars and events within RapidWeaver and publish them directly.
Kalendar can load calendars from multiple sources at the same time and if you feel so inclined, you could display a Google, an iCal (sorry, Apple Calendar) and a manually published calendar etc. at the same time.

Kalendar – Weavium
Kalendar is extremely simple to set up; just add the iCal-URL of the calendar that you wish to display; configure the colours, fonts, sizes and breakpoints – and in typical Weavium fashion, there's hardly anything that can not be configured – and you're good to go.

I already have two calendar solutions for RapidWeaver, but the next time I need to publish a list of events, Kalendar will most likely be my 'go-to' solution, most especially due to the configurability (i.e. markdown) of the events.

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

Intrinsic: CSS Grids for RapidWeaver

The 'experts' currently agree unanimously that CSS Grids are the future of web design. In a couple of years time, those same experts will most likely come up with a different description of where the web is heading, but currently CSS Grids is IT!
But how are we supposed to take advantage of CSS Grids in RapidWeaver?

At the end of last year, Will Woodgate began work on a stack named Intrinsic. Today, the final version of Intrinsic has been released and it's going to alter your concept of page layout.

During the 90s, if we wanted to build a more complicated layout, we were forced to use tables. Then CSS came along and seemingly solved all our layout problems, we discovered, however, that CSS wasn't up to the task of positioning those more complicated elements. Flexbox is great, but only for one dimensional layouts, it doesn't really help with those 2D layouts, so now we've moved on to CSS Grids.
Intrinsic from Stacks4Stacks will build the most intricate CSS Grids for you!

Intrinsic is a little more complicated than your average stack. It can assist you in building complete responsive pages, but you'll need to study the way that it works. There's new terminology that you may need to learn, but once you get to grips with Intrinsic's layout, you'll find that it's actually quite straightforward.

Here's an extremely simple example:

Intrinsic – Stacks4Stacks
And here are the settings that were necessary:

intrinsic – Stacks4Stacks
In the example above, I have defined a two-column layout. Column one is 600px wide; column two is set to 'auto'. I have named the Grid Items (the stack containers shown in red) 'one, two, three, side and footer'.
The Grid Template Areas is set to 'one side', 'two side' 'three side' 'footer footer'. The resulting layout displays the Grid Items one, two and three below each other, with the 'side' Item to the right of them. the 'footer' fills the two last columns.

The Grid Template Areas describe your layout. Intrinsic supports up to twelve columns and unlimited rows. When you drag a new Intrinsic stack into your page, the Grid Template Areas contains the description for a twelve column layout.

Each Grid Item must have a unique alphanumeric ID. Either letter/number combinations or short words. Numbers must be combined with at least one letter.
'A B' 'C B' 'D B' 'E E', for example, or 'one side' 'two side' 'three side' 'footer footer' would both result in the layout shown above (I personally prefer the short names, because they help identify the Grid Items more easily).

You'll notice in the screenshot above that the breakpoint is set to 'Screens > 0px Wide'. Each time you add a Grid Breakpoints Child Stack, you can redefine your layout above the breakpoint that you set in the stack settings.

MUCH more complicated designs than the example above can be built with Intrinsic. Just take a look here at one of Will's demo pages. The page is fully responsive, as is the example on the S4S Intrinsic page.

Intrinsic Grid Items can contain any stack that you want to throw at them.
Spend a little time to discover how Intrinsic works and you'll completely rethink the way that your pages can be played out!

NOTE: to view the Intrinsic demo file, you'll need to download the demo version of the Themeflood RWSkinz theme.

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

Expandable Grid For RapidWeaver

Hide your content, Weavium wants it! Their latest stack, Expandable Grid, is a yet another attractive new take on the age-old accordion – reams of information within a confined space.

Expandable Grid allows you to build a grid with as many columns as you feel is practical on your page, with each row set to a height of your desire. Each of the grid sections can contain icons or images alongside a title. When the section is clicked, it expands to the full width of your grid to display whatever you dropped inside it. The rows below the expanded section slide down and the inactive sections gracefully fade with a white overlay
As we have come to expect from Weavium, the stack is highly customisable and I fell in love with it immediately.

Expandable Grid – Weavium

Stack settings
General Columns – Desktop, Tablet, Mobile
Column Height – px, Desktop, Tablet Mobile
Column Gutter – px
Breakpoint – Tablet, Mobile
Max Width – px

Items
Hide All Icons
Hide All Titles
Vertical Align – Top, Centre, Bottom
Horizontal Align – Left, Centre, Right

Radius
Padding – Vertical, Horizontal
Title Size
Title Weight
Icon Size – Background, Icon
Icon Radius
Icon Spacing
Content Padding
Content Width
Inactive Opacity
Hover Move
Hover Grow

Colours & Fonts – What did you expect, but all the default Weavium customisability?

Extendable Grids – Weavium
Once again, each of the child stacks is fully customisable via its own Stacks' settings panel.

Expandable Grid – a brilliant stack that's effortless to configure and makes it a pushover to design attractive product catalogues, portfolios, FAQs, etc. in confined spaces.

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.