Clicky

RapidWeaver Stacks, PlugIns, Themes ...
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

Fancy Introduction To RapidWeaver

Just a few days ago, I mentioned that the one time Tsooj Media stack, FancyIntro would soon be reclothed as a Stacks4Stacks product. Well, two days ago it flattered into my mailbox.
Of course, I immediately took out my magnifying glass and inspected it! During my inspection FancyIntro was updated, so this review took a little longer than expected.

Now if you were expecting FancyIntro to be a larger, more luxurious version of Curtains (think VW Passat/Phaeton), think again. FancyIntro is an entirely different stack. More of a Mercedes AMG.

Curtains can display a line of text and opens it's curtains horizontally. FancyIntro can display two lines of text, or two images – or one image plus a single line of text (or stacks content), and opens vertically. However, if you're expecting FancyIntro to open two curtains and reveal the underlying content, you'll be disappointed. Instead, a line travels across the page from left to right, dividing the upper and lower section, then expands vertically to create a coloured page overlay. The page overlay then fades out to reveal the underlying webpage.

Having just taken Curtains through its paces and expecting similar results, it took me a couple of minutes to work out exactly how FancyIntro works. However, once you've put away the curtain concept, FancyIntro is very easy to use.

The default setting displays a white to grey gradient and two lines of text. A mauve coloured line then travels across the page, expands to fill the page and then fades to reveal the content.
Both the initial background and the line have colour settings for top and bottom, so that the line can expand to a gradient too. Obviously, the gradients don't need to be so blatant as below.

FancyIntro
I soon tried dragging two 'halved' images into both the upper and lower content wells. In the latest version of FancyIntro this is possible (the 1.0 version duplicated the upper image). Of course, with an image in both sections, no accompanying text is possible. If images are to be present in both upper and lower containers, it is recommended that they are kept as small as possible. In fact an image size of max 150px is recommended by S4S.
SVG images can be loaded as warehoused images, but be warned – if you have stripped out the pixel sizes, they will scale to fill the screen width.

FancyIntro
Stack settings

General Settings
Overlay Fill Top/Bottom. Whilst the colour palette displays transparency settings, they are ignored by FancyIntro.
Line Fill Top/Bottom
Breakpoint. FancyIntro is hidden below the breakpoint.
Line Height. Set the height of the dividing line in %.
Start Delay
Line Slide Speed
Line Grow Speed
Fade Speed. All of the speed settings are in ms and would seem to be unlimited. Hence, with inappropriate settings, you could sit all day, waiting for the dividing line to travel across the page.
Challenge Mode. The same as Asynchronous Mode in Curtains.
Hide period. Sets a hide cookie for Days (default), or Hours.

Upper Content. Styled Content (default), Dropped Image, HTML, Markdown, None, Stacks, Warehoused Image.
Offset. In %
Text Colours. Text / Shadow
Text Sizing / Spacing
Text Alignment
Text Styling

Lower Content analogue to above.

FancyIntro is less gimmicky than Curtains and is ideal for splash screens that make way for an underlying web page. Announcements such as special offers, upcoming events, or just an attractive 'welcome' message.

Comments

Press The Right Buttons In RapidWeaver

Already a month old, I've just been able to test Press from 1LD. Press is a button stack that works with any RW theme. 'But there are dozens of button stacks for RW', I hear you say and you are correct. Press, though, is probably the biggest hit since ButtonMaker graced us with its presence a few years ago.

Press is an extremely versatile button stack that will allow you to create just about any button that you can imagine. Flat buttons are currently the mode (don't worry, fashions change and flat will be replaced by something else soon – and we'll find the new 'modern look' just as cool). 1LD acknowledges the current trend, so obviously, when you drag your first Press stack into a project, your new button will be flat and black.

Want flat with a very subtle gradient, or pill formed with a less subtle gradient, perhaps a patterned background? Not to forget Ghost buttons, of course – they're still semi fashionable; Press can do them all and more.

1LD - Press
And Press doesn't stop at simple buttons, it can build button groups too. If you need to build a menu bar of your own, design the basic button that you'd like, drag a Press Group stack to the page, drag your button into it and duplicate it inside the Group as often as you need it.

1LD Press Group
Stack settings
If I go through all of the settings available in the two Press stacks, you'll still be reading next week.
Press has similar settings to previous 1LD stacks recently reviewed here. The settings groups are:

General
Button Text
Button Icon
Button Initial State
Button Hover State
Button Active State
Animations
Advanced (Custom Classes)
Each of the above groups contains extensive settings.

Press Group contains settings for the Shared Button Styles – Group Radius, Button Margin and Button Padding.
Press group and the contained buttons are responsive, adjusting to all screen sizes. The only thing I miss is an option to display a hamburger on mobile devices.
You can read the full instructions for Press here.

1LD Press Group

Comments

NewsTicker For Rapidweaver Updated

After Joost's departure from the Stacks world, Tsooj Media has been formally integrated into Stacks4Stacks. The first stack to appear on the S4S page is NewsTicker.

A News ticker, or a marquee displays a running line of text – useful for displaying large amounts of information in the compactest possible space. You see marquees regularly, displaying the latest stock prices, or breaking news. The <marquee> tag was never actually an official HTML tag and is not supported by all browsers.

NewsTicker is a stack that was originally developed by Tsooj Media. It uses a combination of jQuery and CSS and works with all browsers. Originally NewsTicker wasn't fully responsive, the text would break and form multiple lines on narrower screens, making it difficult to read.

Will has rewritten NewsTicker. It is now fully responsive, and scrolls infinitely, it will now accept Styled Text, HTML, or Markdown and the colour options have been expanded. NewsTicker can now load with the text visible on the page, there is a new option for Line height and multiple NewsTicker stacks can be placed on the same page. All that's missing for a Nasdaq feed is an option for an API.

NewsTicker
Stack settings.

NewsTicker: General Settings
Content Type: Styled Text (Default), HTML and Markdown
Direction Left: (Default), Right
CSS Class: (editable)
Start Delay: In ms
Duration Default: 10000ms
Gap Default: 50px
NewsTicker has two option boxes – Pause On Mouse Over and Start Visible.

NewsTicker Styling
Styling: Custom Styling, Inherit Theme Styles
Font Style: Normal, Bold, Italic, Bold+Italic
Font Size: Default 15px
Line height: Default 2.5 em
Font Colours and Link Colours: Normal, Hover

Tips: NewsTicker breaks out of its container and runs across the whole page. If you wish to restrict it to a specific width, Useful Stack (available free from S4S) will come to your aid.
Always place NewsTicker in a containing stack e.g. Useful Stack, or a column stack, otherwise it may not be visible on the page.
Don't place NewsTicker in the same container as and immediately preceding a Headline! If you do, the headline develops an eratic marquee effect too! (I'm assuming that this is an oversight which will soon be fixed)

Comments

Flexible Columns in RapidWeaver With Blueprint

A blueprint is a reproduction of a technical drawing, documenting an architectural or an engineering design, using a contact print process on light-sensitive sheets. The process was developed in the 19th century.
Fast-forward to 2017 and a blueprint is an extremely flexible system of columns in RapidWeaver developed by BWD.

Andrew Tavernor has done it again! If Andrew excels at one thing, it is extending the possibilities available in RapidWeaver (his support is also second to none). Blueprint is another set of stacks to prove the point.

If you need a column that has 45% page width within a Foundation project (or any other project), instead of adhering to the strict 12-column layout, Blueprint will come to your aid. Two columns with 85%, divided into 60/40% columns – no problem for Blueprint. Tired of not being able to view your SVG's in RW preview…
…read on.

Blueprint is currently a set of three stacks. ONE, Sidebar and Blueprint SVG.
ONE is a single column stack. O.K. there are dozens of those available for RapidWeaver, but it isn't until you investigate further that you realise just how incredible ONE is.
Blueprint will free you from the constraints of Foundation and Bootstrap (better known to Weavers as Foundry), by allowing you to define column widths in % instead of 1, 2, 3, etc. columns of a twelve column layout grid. But Blueprint doesn't stop there.
Let's say, you'd like to float an image caption over an image within a text block, whilst indenting the text. A simple undertaking with just three ONE stacks: Starting at the top – position your text and image within a ONE stack and go to Add Spacer in the settings panel and define the Width and Height of the space. This will move your content to the left or the right within the ONE stack, depending on the setting you chose.
Next add your image caption to a ONE stack and set the stack width to say, 10%. If your first stack contains more than a couple of lines of text and a larger image,drop the 'caption' stack into a third ONE stack (for the runaround). Just like Sections Pro, this third stack will automatically adapt to its content width.
Now go to the Overlap settings of the 'caption' stack, set it to Move Up and set the overlap in pixels.


Blueprint ONE


The Screenshot above is made entirely with the standard Stacks elements and Blueprint ONE. A setup such as the one above will, of course, require some tweaking for the mobile layout.Blueprint

Sidebar – the christening was perhaps made before the full potential of the stack was realised – is a two column stack that is, of course, ideal for sidebars, but is also flexible enough to build complex column layouts that would otherwise be impossible – especially with Foundation, or Bootstrap.


Blueprint Sidebar

The screenshot above demonstrates a possible use as the name states – a sidebar – a container for a menu. No more messing around with various column settings, trying to get approximately the width you'd like, but not quite because of those damned invisible columns in the background.
Set the Aside Position to Left. Set the Width to 5%. Define a Maximum Width and you're good to go! Take a closer look at http://bit.ly/vertitab

But Sidebar feels perfectly at home when functioning as a normal two column stack. A contact form, for instance. 70% of the page width, with 45/55% columns:

Blueprint Sidebar
Childsplay with Sidebar, but an hour's work with standard Foundation stacks – and then still not perfect. Not that I'm dissing Foundation, it's the only theme that I currently use, but with the addition of Blueprint, life suddenly gets so much easier. And – Sidebar stacks can be nested to create extremely responsive three, or four, (or five…) column stacks.

Annoyed that you can never see, or exactly position your SVG's in RW edit mode? Blueprint SVG to the rescue!
Open your SVG in a text editor, copy the content between (and including) the <svg> tags and drop the text into Blueprint SVG. The result: Not only can you suddenly see your SVG, you can also edit the stroke and fill colours from within the stack settings – apart from being able to just set the size and alignment.

A tip: if you're having problems with your SVGs, take a look at this page. You can drop in your SVG files and it will convert them to 'clean' SVGs without the added data that some illustration apps add.

I could probably write a book about Blueprint. Instead, I advise that you RTFM i.e. that you download and dismantle the demo project and take a look at the instruction videos that Andrew has kindly put online.

Blueprint is another game changing set of stacks from BWD.
Whilst the stacks are free to download, please don't forget to make a donation. Andrew spends up to 18 hours a day and more developing and supporting BWD stacks. He also pays ever rising annual fees to host them.

Comments

Kube For RapidWeaver

It's been a long time since I reviewed a theme, so when Christoph from Rapid Ideas announced that his Kube-based theme White Space has been updated to version 1.5 and now comes with ten stacks, I thought it was time change that.

Kube is a modern, minimalistic framework that – according to the Kube's own blurb – is easy to use.

Starting up with Kube is ridiculously fast — you can start in under a minute.

White Space, then, is a minimalistic theme that is easy to use – and it is the minimalism that makes the theme attractive.
There are three things to note about the White Space theme:
• The stacks that are delivered with White Space are built specifically for the Kube framework and will not work without the theme.
• Most, of the stacks from your stacks library will work well with White Space.
• Kube will only render correctly with modern browsers.

White Space Theme / Kube
The stacks
As I said above, White Space is now accompanied by ten Kube based stacks.
Kube Auto Columns is a nifty little stack that will allow you to define up to four columns. You just need to drop a paragraph stack into it and your text automatically flows into equal length columns.
Kube Button in its default form is a rounded ghost button. The rounding can be deactivated, as can the ghost setting (Outline). It has settings for Size, plus active and hover states. The button's width is set in percent.
Kube Message is a message box that is displayed when the page is opened. When the message box is closed, the page content slides up to fill the space it took.
Kube Modal has a standard rectangular button (the colour is set in the theme settings) that triggers a modal lightbox. The lightbox will house text, images, video and other stacks. However, tests showed that the video continues to play when the modal is closed.
Kube Offcanvas is an off canvas stack that pushes the page content to the side when it is triggered. It can be triggered by a button or a text link. You will need to follow the instructions very carefully to link the trigger.
Kube Quotes is, well, a quote stack. Add your quote in the upper container and its origin in the lower container. The quote is displayed with a grey bar at its left edge.
Kube Simple Grid is an interesting grid stack that may contain up to eight columns. The width of each column may be set individually using the 12 column framework that Kube is based on. The Grid stack allows a complicated page structure to be built very easily.
Kube Tabs is, as the name states, a minimalistic Tab stack. New tabs are added by adding a child stack. The tab container height is flexible (i.e. it adjusts to the height of the content) and the tabs will also accept text, images, video and other stacks. The tabs morph into an accordion style on mobile.
Kube Toggle is a toggle box that is also triggered by its own, standard Kube button. Once again, you can drop just about anything into it.
Kube Video Container is a responsive iFrame container for video playback. It may be set to autoplay in the theme settings.

It's been a while since I used a prefabricated theme, but I took a look at both the standard RW Blog Page that White Space puts together and the Contact Form. Both look appealing and the demo pages that Christoph has placed online all look very good.
It would be great if some of the stacks could be adapted for global usage.

If you are looking for a minimalistic theme for a modern browser, it's well worth taking a look at White Space.
And for a short while it still costs the same as version 1.0.

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.