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.
So you're a hardcore coder and you want to build your website using RW. You will need Stacks 3 and a copy of the HTML Body Stack which comes with a dedicated blank theme.
You may, of course use any theme you like, but hey, you're hardcore and you want full access to the <head> and <body>, right? These are preconfigured when you use themes. Not the case with 1LD's Blank Theme – it's blank and just begging for an HTML Body stack.
Let's start a new project.
Open a new Stacks project, choose the HTML Body Blank theme and then check your Stacks' library for HTML Body. Drag this stack onto your page and hey! It looks like Stacks, but it works like HTML. It has three themes for the editing mode – the Standard Stacks' theme, Light and dark.
You added it to your page already? You now have a <head> and Before <body> elements on your page, but both have the 'Add Child' + button!
Go on – click the + button in the <head> area. Now you can link your CSS and meta tags, etc. or, may the heavens forbid, a stack.
Same thing with the <body>. Click the + button and add your HTML content, non-wrapped HTML, or a stack.
I know some people who are going to love this.
Imagine – we're halfway down our new HTML page and it's looking great. But we need an image slider. So off we go to make coffee – that always helps us concentrate when browsing that code that we need. But wait – time is tight. We need the slider now, this instant.
What is easier than dragging one in from the stacks library? So what, if you didn't code it yourself (i.e. borrow the code from the web), forget vanity; time is tight – remember?
But now, watch this – I'm working on a Foundation project and just discovered the source code for a cool calendar. I drag an HTML Element stack into my project and add the code to it. It is already surrounded by <divs> and I can add as many child stacks to it as I need.
1LD created HTML Body as a way to give themselves the control they wanted to have in order to create HTML templates for their own web development projects.
Using a hybrid Stacks/HTML editor gives RapidWeaver users the ability to really mold projects into whatever they need them to be, whether they need to include simple to use RapidWeaver Stacks or import advanced external libraries.
To get you started 1LD has thoughtfully included a free project file that they created with Bootstrap. The project contains 5 sections that you can save as partials for use in other projects. Perhaps we might even see a Foundation project soon?
If you have little, or no HTML/CSS experience or suffer from code phobia, this is not the stack for you — 1LD can only support the stacks and theme, but not our inability (and yes, I include myself) to understand what all those <div>s, </p>s and <span>s are about.
If you're a coder and use RapidWeaver for the obvious ease of use that it offers, HTML Body is exactly the stack that you've wished for all these years.
Webdeersign specializes in prefabricated Foundation projects and his latest Project7 focuses on professional photographers. Even if you are not a photographer, however, you will find P7 interesting – it's a beautiful 'theme'. Gary doesn't like it, when I use the word 'Theme', but as far as I'm concerned – if I can download a project, insert my own data and upload a website with a minimum of exertion on my behalf, it's a theme.
When you download P7, you'll encounter a project with four pages. Don't wait for the first page to load in preview – it won't happen – the first page is 'simply' a page of notes to get you started and nothing on this page will publish. The Home page, however, as with the other pages, is entirely different. It sets out with a full screen Impact slideshow. Impact has the smoothest slide transitions currently available for RW and P7's slideshow is a pleasure to watch.
Don't worry though, if you don't have Impact in your library, you can replace the slideshow with any slider of your choice.
Above the Slider is a Top Bar Navigation that targets the individual BWD sections below – Weddings, Kids, Portraits, About and Contact. You don't shoot Weddings? Just change the name of the section, alter the link in the Top Bar and away you go!
Each section contains a couple of teaser images, each of which links to a Shootproof gallery, and a descriptive text. The About area displays a button linked to the Shootproof galleries, so if your visitor missed the links above, he's sure to get the message now. The Shootproof page loads seamlessly as if it were a part of your site.
The Footer area is interesting – as compact as it is, it contains all the relevant Contact Data, Social Links and a contact form hidden away in a Reveal lightbox.
Instead of a slideshow, Home2 displays a Hero image with the same Top Bar and a prominent button that links to the Shootproof "Client Area". The rest of the page is identical to the Home page.
Home3 is identical to Home2, but instead of Shootproof, all links lead to Pixieset. Pixieset loads just as seamlessly as Shootproof, so your visitor never has the feeling that he is leaving your site.
In case you'd not heard of either Shootproof or Pixieset before, A Shootproof or Pixieset account is required to fully utilise P7. Both are free to setup and no credit card is required by either. Currently Shootproof will host up to 100 photos free of charge. Pixieset will host up to 1500 photos free of charge. If, however, you already have an online distribution solution for you portfolio.
Or if you have a portfolio containing completely different subjects, just alter the links within P7 – there aren't many portfolio solutions that look as elegant as this!.Check out the demo pages and you'll see!
P5 is a fully responsive Foundation project and compatible with RW6 and RW7. At first glance it looks quite frugal, but I assure you – a traditional coder would have his work cut out if he wanted to replicate the responsive elements! His time would certainly cost a great deal more than the cost of the project.
Starting at the top, we have a Hamburger Menu that rotates on hover and opens a Mega Menu. Now a Mega Menu can contain pretty much anything, so why not add the footer to it as well as the navigation links. When I opened the menu for the first time, I was immediately reminded of the footer on my own site – good idea, lets do away with the footer in future and place it – permanently accessible – in the floating menu!
P5's Hero Banner fills the whole screen on the first page and has a title text that floats up to appear between the image foreground and background. I like the idea very much, but you're going to have to search for images that are suitable for such a trick. However – once you've found a suitable image – if you're Photoshop savvy, I personally would process the image and not the Header text to create the effect.**
I spoke to Gary about this and while I agree with him that many images will make the effect difficult to produce in an image editor – a little extra effort would help your SEO a long way.
Moving down the page, we find a two column layout, with a text floating above the left half of the image, dropped caps and a superimposed logo over the image. The design looks simple, but it is only possible thanks to BWD's (donation ware) stacks. A similar effect could be achieved with Jack – in combination with a few other stacks, but it wouldn't look quite the same and it would weigh a lot more.
The rest of the page contains examples of PopDrop Popups and Modal Windows with variations on the dropped caps theme. The page footer is in fact a contact footer that has the same animated text effect as the Hero Banner and is linked to a a popup contact form and social websites.
P5 then contains two more pages with more examples of the Hero theme, plus colour variations of the fist page and a page of Font Examples to make font selection easier.
P5 is a great example of what can be created with RapidWeaver today. Pages that wouldn't have been possible a while ago. If you like the theme, you can us it to build your own new project, or you can plunder it and use its building blocks within your own layout. Be warned though, if you wish to use the animated Mega Menu, you will need to copy the CSS from the project setup too!
P5 has certainly provided me with a couple of ideas for my next project.
If you have just purchased and downloaded the Foundation theme from Joe Workman, you may be feeling slightly overwhelmed by the abundance of new stacks in your library.
The typical Foundation novice has built a few sites in RapidWeaver, got tired of the standard themes and wants to try his/her own hand at theme design. So he/she's looked around and discovered Foundation – which looks cool. So let's download the theme and get started – but then, with all those new stacks…
So why not let
Jochen Abitz come to your aid. Jochen is a German web designer, who also develops Foundation 'themes'. There's a lot to be learned, even from his simplest project, California.
A word of warning in advance, though — you'll need to download a couple of (donation ware) stacks from Big White Duck [BWD] before you can dive in. Header Pro; Paragraph Pro, Sections Pro and Scroll Mate.
While you're on the BWD Sections page, you may want to download Sections Box too – for future use.
California is an appealing theme and the project will allow you to drop in your own text and images and have a shiny new Foundation site up and running in no time ('null Komma nix' as the Germans say).
Thanks to Scroll Mate and Foundation's own Animate, California is also animated, so that when you scroll the page, certain elements will discreetly appear or, as in the case of the title header, disappear.
Once you've unpacked California, the first thing you'll want to do, is duplicate the project so that you can play around with it. California is a RW6 project, so you will need either RW version 6 or 7 to open it (it will be migrated to RW7 when opened there). Now you can set to work and drop in your own content, play around with the stacks, get to know both Foundation and Sections and let yourself be influenced by a professional designer's expertise.
The California project contains four pages, each with a different colour scheme and uses a sticky TopBar with a the site title inserted. Once you have decided which of the colour schemes you'd like to use (or you can play around with the Foundation Site Styles until you hit on the exact colours you wish to use), you can duplicate the page and set to work – keep the other three pages for now, you may need to reference them. You will want to delete or replace Jochen's top headline bar before you continue – I mean, Jochen's designs are good, but you won't want to broadcast to the whole world that this isn't 'all my own work' now, will you?
California's main content on three of the pages is set within a white background (using a background overlay child stack in the main Sections stack –take a look, you'll quickly find it). The fonts used for both the Headlines and content are set in the Site Styles to use a Google Font – Lora. If you'd prefer different fonts, the are easily altered – there are over 800 to choose from. The fourth page is a dark Theme with a black background and white fonts.
The overall effect is a very professional presentation. It goes without saying that California is mobile friendly – it is Foundation, after all.
Jochen Abitz' California project for Foundation is the ideal starting point to get to grips with Foundation and BWD (and nobody uses foundation without at least one BWD stack any more), so if you're a newbie to Foundation, or even a seasoned designer and need a quick solution for a customer with a tight schedule, take a look at Jochen's site.
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