Building With Stacks
Blank theme frameworks can sometimes prove to be a rather uninspiring and frustrating canvas to start building a new website with. And all too often, we frequently see novice RapidWeaver users (especially those without much prior web design experience) greatly struggle to build something to an acceptable standard with some of these frameworks. It can become a very time consuming, expensive and somewhat demoralising process.RWSkinz approaches things differently, in that it starts you off with a complete page design. Within the theme style settings, you can gradually toggle the display of different page components on or off. This opens up opportunities to construct a page design using a mixture of existing page components and custom build your own portions of a page using Stacks.
If you consider yourself proficient enough to go the full-mile and custom build an entire page design using Stacks, simply go into the Miscellaneous style settings and click the Build Entire Page With Stacks option. This special setting will remove all components from the page (excluding the main content container), override all width constraints and reset all padding and margins back to zero. Then you will have a totally blank, clean, edge-to-edge canvas to start building with.
Working from an existing design
Should you create a quick napkin sketch, web design or style guide using software like Adobe InDesign or Affinity Designer before opening RapidWeaver? Our answer to this is that it depends what you are building. For a simple page layout, you will probably be okay with jumping straight into RapidWeaver and building something. However for more complex page layouts or where a client needs to give their input, it is certainly better to design before building. Create visuals not only for desktop, but also for mobile.What Stacks should I use?
The simple answer is "bring along anything"! ThemeFlood provide some exceptionally good free stacks to use exclusively with themes like RWSkinz. Simple stacks like Bootiful let you quickly add Bootstrap components to your pages. Fontamental handles all your text sizing issues on different screen sizes and helps with the setup of embedded fonts not already included with RWSkinz. The popular Gator stack helps you custom build a brilliant responsive navigation bar, complete with additional content. At the other end of the scale, stacks like Intrinsic offer you the most advanced grid system available on the market for RapidWeaver; which can confidently build virtually any complex page layout you can dream of. You can continue to use the free stacks supplied with the Stacks plugin, like styled text, columns and images. Certain stacks from other companies can also work well with RWSkinz, but won't be officially supported by us.More examples
Feeling inspired to build with RWSkinz and Stacks? Great! Here are a couple of examples to look at in alphabetical order, which combine RWSkinz with some of our free Stacks:App Store
An attempt to roughly recreate the Realmac Software homepage. This example keeps components like the Jumbotron, Jumbotron Nav Bar and Block Footer enabled. The content container was set to full width and has its sidebar hidden. We used the free Sectional stack to create the blocks of content advertising the different software titles available. Box Canvas was used for the tagline and additional information containers. Buttonist was used for the coloured buttons. Our attempt loads two thirds faster and has a more accessible menu.
Coffee House
A single page, smooth scrolling setup. This website is especially well optimised for mobile devices. All the information a user might potentially want about our pretend coffee shop is listed here on this one page - making it a quick and easy browsing experience. The navigation links are generated automatically from our subheadings within the page. Believe it or not, this entire page was only 22 minutes to setup with RWSkinz! Combines the use of free stacks like Bootiful Containers, Box Canvas, Gridlocity, Sectional and some other free goodies. It would certainly be feasible to make portions of this page editable with a CMS like WebYep, so that clients can login and safely make quick content changes themselves.
Fashion Store
Uses the special Build Entire Page With Stacks option in RWSkinz. This entire webpage comprises of just two stacks - Gator and Intrinsic. Page styling is accomplished using RWSkinz theme style settings, style settings within the Gator and Intrinsic stacks, and the tiniest amount of simple CSS code in the Page Inspector (to do styling which you can ordinarily do within Stacks) This example could be good to use for a landing page, as part of a larger e-commerce website. The professional photography, light on dark colour scheme, embedded font faces and subtle animation effects make for a highly distinctive page design.
Landing Page
Here we disabled all page components, except for a top navigation bar and the normal content container. A free Zonal stack was placed within the page and configured with a series of linked headings and background images. Within a matter of minutes, we accomplished this captivating landing page. Not only does it look good, but the navigation headings make it functional too. This setup works equally well on both touch screens and normal computers.
Meditation Medley
Turns-off all page components, accept for the main content container and minimal footer. Then uses a mixture of standard stacks (supplied with the Stacks plugin), Fontamental stacks, Gridlocity and a Gator stack. Simple CSS code was used within the Page Inspector to float a flower graphic (as a background) to the top right of the page and hide the flower logo image on smaller screens. This page was no-more than 10 minutes to setup. Although quite minimal in design, a page like this meets all accessibility standards, it scales and reflows to fit different screen sizes and it prints very well. A page like this would be ideal as a template for more formal or content-heavy websites, where there might need to be less onus on design.
Studio
A good page design for creatives; like advertisers, photographers, filmmakers, artists and architects. Built using Intrinsic. It's purposefully a very sparse and spacious page design with straight lines and a clean feel. The individual 'blocks' could easily be lightboxed to display additional information about completed projects or to display content like a contact form. This could be a good basis for a simple, single page website. No navigation menu is displayed on this page. The 'self skin' option was enabled in the RWSkinz theme settings, to permit use of a font size increase and an embedded web font face.
Vineyard
This page used the special Build Entire Page With Stacks option in RWSkinz. And true to this, the whole webpage was built using the Gator stack for the navigation bar at the top, a Fontamental stack for the cursive title, and a single Intrinsic stack for the grid. The end result is a compact magazine-style webpage; but one that is compatible with all newer web browsers and is fully mobile responsive. The attractive 'PT Serif' font face is one of the embedded fonts included with RWSkinz.
Important note: In examples where stacks like Intrinsic or Formulate have been used, we have used the free versions provided for download on the ThemeFlood website. You should use these too, when opening the sample demo file in RapidWeaver. RapidWeaver treats free and paid versions of these stacks as separate stacks; therefore RapidWeaver may report certain stacks missing even if you have purchased them previously.