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.
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.
You never heard of Weaver's Kingdom? You must have, it's been online for weeks now and is the rebranded Archetypon from Lucas Tsolakien.
Tickertape is considered useful, because it can display large amounts of text within a very compact space. It is often used to display upcoming events.
Typed takes the idea to a new level. Instead of a constant stream of text running across your screen, Typed types text, deletes, or untypes it and then types a fresh text in its place.
My first thought was "Duh! Not another one!", but then I took a look at a couple of examples and changed my opinion.
Lets say you have a number of different products or services available. You could type a list such as:
We Design Websites
We Design Logos
We Design Print Products etc, etc.
Or you could position your text "We Design" and let Typed fill in the blanks at intervals of a second or two.
You've got your message across and, because it's animated, it gets noticed and – it saves a lot of space.
When you drop Typed onto a Stacks page, you'll see a text container with a + button to add child stacks.
Type your text alternatives into the containers and add, or delete child stacks as needed.
In the settings panel, you can set the Typing Speed and the Start Delay. You may choose to Shuffle your texts and set the Back Speed [untype] and the Back Delay.
You will probably want the text display to Loop [repeat], but this option may also be deactivated.
Typed 'types' your text across the screen, so by default it displays a cursor. Show Cursor can also be deactivated.
The next settings are for the text formatting. Override Styles, [Text] Colour, Bottom Border [underline] and Border Colour.
Note: I haven't actually been able to test Typed for myself, so I'm unable to say what the final setting Detach does.
Typed re-invents and modernises tickertape and makes it a lot more appealing than it used to be.
Take a look at the demo sites at the bottom of Lucas' product page and see for yourself.
Listify is a set of three stacks that will help you build professional lists within your Stacks pages. The basic stack, Listify, is a container for individual List Items. You can either click the stack's + button to create a List Item child, or drag in a List Item stack. The third stack is Listify Group; a container that allows you to create groups of list and automagically builds responsive columns to contain them.
The clever thing about Listify is that you can drop anything into it that you please…
Lets take a basic list. Drop Listify into a stacks page and add a List Item.
The List Item Displays an Icon and a Text Field. Enter your text, add a new List Item – as many as you need – and you have bulleted list.
If you need a headline, you can either enlarge the text in the first Item (see the image below), or you can add a container to the Item and drop in a Header stack (hover over the image below). You can, of course drop in an image, or a button into the List Item Stacks and switch off the default icon and text display.
Each List Item may be formatted individually, or – by leaving the default settings – the completed list may be configured as a whole. Once you've studied the settings panel you'll find that the configuration is really simple.
Tip. If you wish to set up individually formatted List Items, begin with one Item. Once you have finished the basic formatting, duplicate the Item and then reconfigure. You'll find it a lot easier than setting up each Item from scratch.
The basic Listify stack provides the settings for the overall look and feel of your list. The List Fill Mode determines the width of your list – either Full Width (of the container it is placed in), or Pixel Width. The List Radius is set to a default of 5px whilst with the List Padding and the List Margins are set to 10px T, B, L & R.
The Background is set to Off by default, but may contain a solid Colour, a Gradient, or an Image.
Both the Borders and the Shadow are Off by default.
List Items (Shared Styles). The following settings will affect every List Item within the Listify stack:
Indent Direction (Left/Right), Item Indentation (px), Align Content (Left. Centre, Right, Separate (Icon & Text)), Item Spacing (default 5px), Item Radius (default 5px), Item Margin, Background and Border.
List Item Fonts gives you a choice of 13 standard Google Fonts, or (just to prove that 1LD listens to their customers) Custom. Text Size (px) and Text Colour.
List Item Icons (Shared Styles). Here you get to set the standard formatting for the icons: Vertical and Horizontal Positioning, Icon Padding and Spacing, Icon Radius and Icon Size. The Icon Background can once more contain a solid Colour, Gradient, or Image. Oh, and the Icon Colour itself, of course!
The default Icon is a Google Material Icons star. The icons are set individually for each List Item, with a choice of GMI's, Font Awesome, or Ion Icons.
Listify Item. The individual Items may be Linked to an external source. The next setting is Item Level. Each Item may be set to up to 10 (in words TEN!) Sub Levels! Excuse the overuse of exclamation marks (points if you're American) but this is amazing!
Next you have the option to Override Shared Styles. If this option is activated, each List Item may be individually styled. With the exception of Custom Stack Content and the Icon setting, the list of formatting options that follows is identical to those already listed above, including the individual visibility settings for the three screen sizes.
Finally, we come to the List Group stack.
As already stated, if you drop two, three, or more individual Listify stacks into a Group, your list is automatically columnised.
The List Group Stack also has some interesting features, though.
The List Alignment is set to Centred by default, but may also be set to Top, or Bottom. Then you'll find a setting Wrap List for Mobile Tablet (Portrait) and Desktop. Then there are settings for the group's Background – again None, Solid Colour, Gradient, or Image, Group Radius and Group Padding. The whole group may, of course be hidden at different screen sizes.
Hover over the image above, and you'll see just how flexible Listify really is – and that's without having added button stacks, or images!
Kool, or wot?
It's Easter Monday and Tommy has just placed an Easter Egg on his Stacks Page. Tivoli. And it's free.
Actually, this is a stack that I wanted a long time ago after seeing the effect on a web page. However, the developers that I spoke with didn't seem to be interested in the idea so, not wanting to bother myself with the necessary CSS, I abandoned the idea.
The page in question was a page consisting mainly of text and it very slowly – almost imperceptibly – changed colour as you were reading.
And this is exactly what Tivoli will do for your RapidWeaver text blocks.
Drop the stack onto a stacks page, drop in some text content and set the colours that you'd like.
When you visit Tommy's demo page, you'll find that the examples he provides are a bit stark. He has to emphasise the stack's possibilities.
But think "Pastel Colours" and the possibilities of Tivoli become more obvious.
A text bock with a pale yellow background imperceptibly morphs into pastel blue, whilst the text slowly changes from blue to teal. Your visitor's eyes will automatically be drawn to this block of text – your CTA can no longer be ignored, that button just yearns to be clicked!
Tivoli is a work in progress and Tommy promises future updates.
If you want more than one block to change colours, you'll need to set a unique ID for each stack.
Ani Flow has the cryptic settings Lunch Break and Running. To be perfectly honest, I've been unable to discern what the setting does.
Timing and Delay set the length of time that the colours are displayed and the transition time – the settings are in seconds. The higher the settings, the more subtle the effect, but be my guest, set the minimum of 1 in each case and have your CTA flash like a neon sign.
You can set the base colours of the stack and its text content and then you can set four colours for each to transition through.
Further, there is a setting for an Inner Shadow. If your text block is rather small – like the example above – I would advise against using a shadow; with any of the available settings (small, medium, large) it's rather imposing.
And last, but not least – Tommy's usual Custom CSS settings.
I like Easter Eggs – even when they are not made of chocolate!
Bevel makes it simple to add angled transitions between RW stacks. It can be used with any theme and it will automatically pair with Sections Angle to square off angled sections. Whilst testing Bevel, I 'misused' it to create some amazing results and the Bevel demo page illustrates its versatility admirably.
Bevel begins its life on your RW page as a downward pointing triangle that can optionally contain a Dropzone (Add Content). Obviously, any added content will extend the length of the Bevel stack. However, drop Bevel below a stack with the same background colour and without further ado, you have a chamfered transition.
Bevel may be set to Horizontal, or Vertical (Orientation), Down, or Up, Outward, or Inward. You may set the Angle and the Split (default 50%). Crop sets the height of the stack and the sensitivity of the Crop may be magnified (Crop Magnify).
Bevel may also have round corners. The corner settings Top Left, Right, Bottom Left, Right are individual for each half of the stack.
Render Adjust will allow you to compensate for any rounding problems that Safari may demonstrate. Adding 0.5, or 0.75 px should hide any gaps that Safari may display between two adjacent Bevel stacks.
Likewise, Split Adjust will compensate for any gap that may appear at low angles.
Bevel is donationware. Many hours of work went into perfecting it. Please don't forget to add the price of a coffee to Andrew's purse.
Promotion: The Foundation project pictured above is currently available for €4.99 at http://bit.ly/rjh-webdesign
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Do you have a question regarding RapidWeaver?
Would you like help with your new project?
Would you like us to build your new RapidWeaver website?
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.
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—16