ThemeFlood.

Weave a website, your way...

An entirely new design system for building websites with RapidWeaver 8. RWSkinz offers a perfect synergy between the ease and robustness of a conventional RapidWeaver theme, while simultaneously combining the flexibility of a freeform framework. With enormous potential to expand and successfully build practically almost any basic website you desire.

This theming solution was actually devised several years ago by a small group of like-minded RapidWeaver developers (led by Adam Merrifield, former owner of SeyDesign), at about the same time the concept of 'ExtraContent' was being developed. But RWSkinz was considered a little too-far ahead of its time and never got publicly released. Of course, these were the days before Bootstrap or Stacks had been invented and nobody ever spoke of responsive design. Since then, it has only been updated and maintained internally as a private framework for client websites. Now for the first time, RWSkinz has been made available for all RapidWeaver users.

RWSkinz is ideal for building fast, simple, mobile responsive, HTML5 valid and highly accessible grade-A websites that look and function great across all major web browsers and devices. RWSkinz avoids the daunting challenge of starting with a totally blank canvas and offers a real solution towards building great looking websites; without compromising on quality or flexibility. Plus based on the constructional method used, RWSkinz can work with any RapidWeaver page type - not just Stacks!

One major advantage of RWSkinz is that it's now built upon Bootstrap 4; the most widely used and popular frontend web development framework in the world. ThemeFlood was the first company to include Bootstrap in RapidWeaver themes. Bootstrap is already used in millions of websites, making it a sensible addition to any new web project. Many of the Bootstrap 4 components you commonly find available online are already seamlessly compatible with RWSkinz.

RWSkinz is ultra lightweight and agile. Using the default settings, a typical webpage published with RWSkinz weighs-in at less-than 750 KB the first time it opens, before caching takes effect - and this includes a 205 KB banner image! Therefore ensuring completed webpages load quicker. Numerous other 'attentions to detail' have been incorporated; including optimised print output, a user-friendly menu that supports multiple levels of subpages, valid HTML5 markup, tight privacy controls and various optimisations for website users with disabilities.

The mobile menu has received a substantial upgrade over the standard mobile menu supplied with Bootstrap 4. Our mobile menu is of a slide-out overlay variety, with collapsible levels of subpages. The main page background dims and blurs when the mobile menu opens. This is about the most attractive mobile menu you will find in any theme. The navigation bar within the Jumbotron is also custom-built for this theme.

How do I use RWSkinz?

What's particularly pleasant about this system is that it can be used effectively in one of several different ways or a combination of many. The reason we used RWSkinz internally for so long in our company is because we discovered different client projects demanded different constructional requirements. Likewise RWSkinz can appeal to RapidWeaver users of any previous web design experience. The learning curve is gentle, yet there is enough flexibility offered here for more demanding projects. And plenty of expert, friendly support on hand if you need it - from people actually using this same theme for building client websites!

Here's a 15 minute long video that might help you get started:
https://youtu.be/8j2trZpfAMY

The Building With Stacks page also provides a great insight into the stacks used for building these singular webpage examples.

With the theme installed in RapidWeaver and applied to a project, you already instantly have a basic website (with default Bootstrap styling applied) that would be good enough to publish as it is. RapidWeaver generates the page navigation links for you, the site title, slogan, breadcrumb links and lets you effortlessly drag-and-drop a logo image or custom banner image in. Over one hundred ExtraContent containers exist, a sidebar can be setup and you can use RWSkinz with all RapidWeaver page types (including the Blog, File Sharing, Styled Text, Image Gallery, Markdown and HTML Code). RWSkinz will also work with many third-party addon page types too; like Stacks, Ecwid, RapidCart, RapidMaps, WeaverPix and more. The styles section of the RapidWeaver Page Inspector lists several groups of settings you can change for a bit-more customisability (like some basic Bootstrap colour variables, font stylings, sidebars and choices of embedded font faces).

Want to quickly change the colour scheme or typography? This is the part where you can re-skin your website! Simply head to a website like Bootswatch.com and download a free theme. A theme comprises of a single CSS file, and you can use the 'save as' function in your web browser, if it does not download automatically. Add it to your website as a RapidWeaver resource. Then go to Settings > Code > Head and add a CSS link like this:

<link rel="stylesheet" media="all" href="%resource(skin_name.css)%">

Replace skin_name.css with the actual name of the Bootstrap theme you just downloaded, so it matches-up with the name of the resource. Now within just a matter of seconds, your website will take-on an entirely new appearance. Additionally you can use many other Bootstrap 4 theme generators or SASS compilers online, if you are wanting to generate your own skins. This is where the RWSkinz theme gets its name from.

Tip: Most generated Bootstrap skins and themes already contain all Bootstrap CSS code. You can basically half the completed codebase of any website published with RWSkinz by unchecking the Load Bootstrap From Theme option, in the Miscellaneous settings. The theme will switchover to solely using the Bootstrap CSS you supply via a skin or theme. Now your pages will load even faster, without the overhead of duplicate code.

So what happens if you want some more freeform design or get right into the guts of this framework? Well, you have a couple more ways to use RWSkinz:

• In the theme style settings, turn-off the page components you do not need or swap them for components you have not enabled yet. There are a couple of navigation bar and breadcrumb locations to choose from. Additionally components like the footer come in 'minimal' and 'block' variations to choose between.
• Do you like the default Bootstrap colour scheme but just need to tweak a few aspects of it? Head straight for the Self-Generated Skin theme settings and try your hand at rolling your own custom colour scheme. You do not have as many options here as some of the online Bootstrap generators, but then again you might not be needing to change everything!
• Replace existing components (like a navigation bar) with more complex components (like the free Gator navigation stack). To do so, simply turn-off particular page components and provide new ones within the ExtraContent container that's nearest. RWSkinz, like many of our themes, has an option in the Miscellaneous style settings to view where all available 100+ ExtraContent containers are located.
• Mix-and-match existing Bootstrap compatible stacks and code snippets into your page design. Websites like Bootsnipp have loads available for free download. In actual fact, Bootsnipp host a couple of snippets created by ourselves a couple of years ago! Again you can put ExtraContent to good use, if you want to break-outside of the normal page layout.
• You can hook-into some of the core theme functionality. For example, creating any button or link with a class of toggle-mobile-menu will let you toggle the attractive mobile menu open or closed.
• The whole of RWSkinz is extensively customisable with CSS. For example, change the height of navigation bars or apply custom background textures to page components to achieve a less 'flat' appearance. Work-in some more shadows or subtle animation effects. Just ask if you need help with any CSS. Unlike some other RapidWeaver addon companies, we actively support and encourage the use of custom CSS.
• Disable the normal RapidWeaver page navigation links and present a TOC (table of contents) instead, automatically generated from your page headings, complete with smooth scroll-spy. Perfect for building a high impact, single-page website.
• The ExtraContent containers located above and below the main content area offer a great space to create edge-to-edge containers, comprising of coloured backgrounds, pictures, written content and columns. Free stacks like Box Canvas are brilliant to use in these areas.
• Import an existing free or paid Bootstrap theme into RWSkinz. With some HTML editing and amendments to links, you can 'slice-up' an existing Bootstrap theme that you can continue to build with in RapidWeaver. This guide shows you how.

Tip: If you want to build an entire page using only stacks (like the way some other blank theme frameworks work) enable the Build Entire Page With Stacks option, in the theme Miscellaneous style options. This 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. This option is good to use with free layout stacks like Gridlocity, Sectional or Intrinsic.

What you should begin to notice is that not only is RWSkinz a great framework for building flexible websites, but the framework itself is equally as flexible. RWSkinz readily adapts to your preferred method of working and prior web designer experience. You are not forced into building a website via a limited subset of addons. Nor the daunting prospect of starting with a totally blank canvas and ending-up with a 'stack soup'!

An explantation of the theme style settings

RWSkinz has several groups of theme style settings. However depending on how you plan to build your website with RWSkinz, you may not need all of them. So don't let the choice of options confuse you.

Body Background
As found in several of our other themes, the Body Background lets you set a PNG semi-transparent background pattern. This can be useful for making a website look 'less flat'. If no pattern is applied, the body background will either default to Bootstrap white or whatever background your skin has defined.

Self-Generated Skin
If you are not using a skin you have downloaded from elsewhere (like Bootswatch), you can switch the slider over to the right (ON position) and freely customise all the basic Bootstrap colour and font variables. For example, if you wanted to change the colour of Bootstrap 'primary' buttons from blue to dark green, here is a convenient spot to do this. A couple of other options exist for things like font size and line height. Self generated skins work well with our choices of embedded web fonts a little further-down.

Page Components
A selection of checkboxes to toggle different page components on and off. Some of the components are identical in style and function (like the navigation bars and breadcrumbs) and only exist so you can choose to place them in different parts of the page.

Constrain Width
Every Bootstrap .container component has a maximum width set at different screen widths (breakpoints). You'll notice that as the screen is reduced in width, these containers 'step down' in width, so they are never touching the extreme edge of the page. On smallest screens, the container is 100% wide. The Constraint Width settings let you customise the container constrained widths at these key breakpoints. Most commonly, you might want to change maximum width of the highest breakpoint. In the Miscellaneous settings, you also have a Fluid Container Width checkbox option, which applies the widest max-width to the other breakpoints - therefore avoiding the 'stepped' sizing effect.

Constraint Overrides
If you have used Bootstrap before, you may be familiar with the concept of 'containers' already. Basically containers do as the name suggests and restrict content to a certain width and centred on the page. Constraint overrides in RWSkinz remove width constraints and offer a simple approach for forcing certain page components full-width (edge-to-edge). Many ExtraContent containers located outside of page components are already full width.

Heading, Site Title, Site Slogan, Content and Navigation Font
History demonstrates that RapidWeaver users love lots of font face options! RWSkinz will not disappoint, because it includes over 120 web safe and embedded font faces. By default the 'inherit' option simply tells the web browser to use whatever font Bootstrap or the downloaded skin is using. However you can quickly override and apply your own font from the list shown. All of our fonts listed in RWSkinz are stored within the theme contents, so there are no privacy or reliability issues with calling embedded fronts from an external server. Our fonts all include Latin extended subsets. Most are less-than 25 KB in size.

Jumbotron Options
Bootstrap call their header or banner region the 'Jumbotron' (formally a 'Hero Unit' in Bootstrap 3 and less). We have continued using the same terminology in RWSkiz. Our built-in Jumbotron allows you to set the vertical padding, change the bespoke navigation bar background colour and toggle a couple of other options you might find handy. Your own static background image is easy to include, by simply dragging and dropping a suitable image into the Banner dropzone (in either the General site settings or Page Inspector).

Sidebar
Many web designers still like to include a traditional sidebar, for the placement of less-important content and links. Our sidebar uses CSS Flexbox, so it can be easily floated left or right and set to any width of your choice. On mobile, there is unlikely to be enough space for a sidebar, so options are provided to place your sidebar at either the top or bottom of the page.

Miscellaneous
Basically a whole bunch of useful theme utilities and smaller style embellishments that fall into none of the other categories. The sliders for the navigation bar and footer style correlate to the 10 named Bootstrap styles - primary, secondary, success, danger, warning, info, light, dark, muted, white - in that same order. Here you can also change the 'breakpoint' which governs the width of screen when the desktop menu reverts to a mobile menu. There are plenty of other useful options to play with here and fine-tune your web design to perfection.

Placing RWSkinz on an even stricter diet

You can easily duplicate and rename the theme to something else; which lets you safely open the theme contents and strip-out further code or components you might not need. Typically this process will not yield noticeable improvements in page loading speeds, but it will shorten RapidWeaver publishing times, if this is of concern to you. Items that are safe to remove (if you are not going to need them):

• Any of the embedded fonts stored in theme contents /fonts/
• Any PNG textures stored in theme contents /images/textures/
• Any page components (like unused navigation bars) or ExtraContent containers in index.html

It is strongly recommended that you go-into Settings > Advanced and make sure all Site Options are checked. Alongside ensuring items like breadcrumb links are generated, some of these options listed will bring you additional speed improvements and search engine optimisation.

All-round accessibility

RWSkinz has been expertly engineered with some of the most comprehensive website accessibility features you'll find in RapidWeaver. These accessibility features are permanently enabled on every page you publish with RWSkinz. Greater accessibility will hugely help a vast majority of website visitors who have visual or hearing impairment or who suffer with reduced mobility:

• All links on a webpage (including links within the drop-down menu panels) can be navigated using the keyboard 'tab' key and activated by pressing the return key.
• All links that receive focus from the tab key are highlighted with a brightly coloured dotted border.
• Buttons in the mobile menu and on search bars have a minimum size of 50px square, to assist users on touch devices or with reduced hand coordination.
• The parent page links in your menu have accesskey attributes applied. Using a keyboard shortcut (like CTRL + ALT + 3) will navigate to that particular page.
• No restrictions on the ability to right-click or select any content. This proves vital for tools intended to read selected text aloud.
• The 'Screen Reader' stack in Bootiful lets you create areas of the page or links that will be read-aloud to a visually impaired user, via their screenreader software.
• All text on the page responds well to being increased or decreased in size, using the zoom controls in various web browsers. We use proportionate values (like ems and rems, instead of points or pixels).
• RWSkinz is valid HTML5 and makes extensive use of differing markup tags to improve the overall structure of the completed webpage, including ARIA landmark tags.
• Create a custom link or button anywhere on your page will a class attribute of toggle-invert to let a user instantly invert the colour scheme of the whole page and all content (including images and HTML5 video).
• Use the Embed stack in Bootiful to quickly setup embedded video (e.g. YouTube) within a responsive container, complete with audio descriptions.

Combined, these powerful features will let you build a website that will offer greatly improved accessibility and a much more comfortable experience for your end users. In many instances, these features meet and exceed numerous disability regulations that you may be required to incorporate into a website build.