Asymmetric is Waterfall enabled

Theme details

Theme name: Asymmetric
Theme designer: Henk Vrieselaar
Current version: 1.0
Last updated: 25th November 2019
First released: 25th November 2019
Compatibility: RapidWeaver 6, 7 & 8
GDPR / DSGVO compliant: Yes
Responsive: Yes
Doctype: Valid HTML5
Font Awesome version: 5.10.2
Bootstrap version: 4.3.1
Usage agreement: Click for details
Example website: View online
Download example website: Click here

Support links

10 Minute Quickstart Guide
ThemeFlood Knowledgebase
1-to-1 Technical Support
RapidWeaver Classroom
RapidWeaver Community Forums

Free resources

Bootstrap code snippets
ExtraContent stack & snippet pack
FreeStyle banner stack

Share this page

Introduction

This theme is a true 'proof of concept' design, in that it embraces many cutting-edge web technologies; including CSS grid, CSS variables, RGBa colouring, transitions, pseudo classes, parallax, embedded WOFF2 fonts and viewport sizing. It may not look it on the surface, but Asymmetric is quite possibly one of the most technically advanced RapidWeaver themes available to date! The technologies built into this theme really are quite remarkable.

Asymmetric would be a great little general purpose theme for the average RapidWeaver user, like a creative writer or photographer. Likewise Asymmetric would definitely appeal towards inquisitive web development experts, eager to lift the hood and marvel at its codebase!

Asymmetric was actually a theme designed and developed by Henk Vrieselaar many years ago, back in the days of RapidWeaver v2. The original theme was never mobile compatible (of course, you could not browse the internet with smartphones back in those days) and only had a limited choice of style checkboxes. We decided to see if it was possible to rebuild this iconic old design as a brand new theme for RapidWeaver 8 and above. The Asymmetric theme you see today is the end result of this work.

The power of CSS grid

Each component or 'brick' of the webpage is presented as a list to the web browser. We then use CSS grid to instruct the web browser how to position each component and set the dimensions of the components. Mobile has a more simplified display, compared with desktop. Within the theme style settings, you can customise different variables; like the header / footer heights, sidebar width and grid gap. Additional settings are provided to 'unfill' each component. When you unfill a component, the background image of the grid is visible from behind. CSS grid is supported by all newer web browsers and older web browsers will simply ignore the code and render the page as 1-column, like mobile.

Background images

The 'sand dune' image is displayed by default. Any suitably sized and formatted image you drop into the RapidWeaver Page Inspector Banner drop zone will get used instead. Within the theme Miscellaneous style settings, you can opt to make the background 'parallax' which essentially fixes it to the background and it resists scrolling.

Applying a custom background gradient

Instead of using a background image, you could use a background gradient. You could go to a website like this one to generate an attractive CSS gradient:
https://webgradients.com/

Then within your custom CSS box, you can use the .wrapper class selector name to target with your CSS gradient code like this:

.wrapper {
background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
}

ExtraContent

Asymmetric has a total of 15 ExtraContent containers located in various places throughout the page. You can use these to conveniently place content into different parts of the page. You can see where each ExtraContent container is located by using the Preview ExtraContent Containers option located in the theme Miscellaneous style settings. Follow the steps in the knowledgebase for configuring your ExtraContent.

Customising text labels

The breadcrumb and last updated date can have their labels customised using simple CSS code like this:

#last_published:before {
content: 'Last updated ';
}

#breadcrumb:before {
content: 'Viewing';
display: inline-block;
}

Use this CSS code if you want to translate the text strings into a different language or change their wording.

And just a small reminder...

Asymmetric is generously provided to you as a free RapidWeaver theme. You are welcome to download Asymmetric and use it for any personal or commercial projects. All that is politely request is that any credits remain intact. If you need the credits removed or want to show your appreciation for this theme, a small monetary contribution, Google Play voucher or UK iTunes voucher is massively appreciated!

Thanks! Please check the following:
System requirements
License agreement
Refund policy
Purchase process
Pricing
Paddle
Customer support

System requirements
This theme requires RapidWeaver. It will not work with other platforms (like Wordpress).

We recommend you aim towards installing the latest version of RapidWeaver that your computer is capable of running (preferably RapidWeaver 7 or greater).

If you cannot get the free demo version of this theme to work, DO NOT proceed with purchasing this theme - please request technical assistance first.

License agreement

You may use this purchased theme an unlimited number of times in personal or commercial projects, request technical support and receive free updates in future.

This theme can be installed or synced onto all computers that you own. You are permitted to make archival backup copies of the theme.

You may not resell or make this theme available for download, remove copyright credits or license information.

The software is provided "as is" without any implied or expressed warranty of merchantability or fitness for purpose. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise arising from, out of or in connection with the software or the use or other dealings in the software.

Refund policy
By purchasing this theme, you agree that your purchase will be available immediately via digital download and that you waive your statutory right of withdrawal.

All purchases are final and refunds will not be provided (we physically cannot un-download or remove themes from your computer).

You are reminded to make use of the free demo versions already provided on the website, to fully evaluate themes for compatibility and suitability before purchase.

If the free demo version does not work for you, kindly refrain from buying the theme.

Purchase process
The checkout system is provided by Paddle. An attempt is made to display prices in your local currency.

To complete your order, you must supply a valid email address. Your purchase receipt and download link will be sent to this address. If you do not receive your purchase shortly after completing it, please carefully check your spam or junk mail folders.

Your purchases are available to re-download at anytime, via this order lookup page.

Pricing
Prices shown on the website exclude any applicable VAT. The final price payable is shown at the checkout. You will be sent a full receipt by email. Charitable and bulk discounts may be available on request. Please get in touch if you have any queries about our pricing.

Paddle
Our order process is conducted by our online reseller Paddle.com. Paddle.com is the Merchant of Record for all our orders. Paddle provides all customer service inquiries relating to order processing. Paddle also provides an order lookup system, commonly referred to as your Paddle Account.

Customer support
If you have questions that relate specifically to this theme, you should make contact via the contact page. We aim to answer all messages within 12 hours, Monday to Friday.

If you require a faster response at weekends or during public holidays, please post your question(s) to the RapidWeaver forums, where a support volunteer may be able to assist you quicker.
Expand