IntroductionThis 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 gridEach 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 imagesThe '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 gradientInstead 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:
Then within your custom CSS box, you can use the .wrapper class selector name to target with your CSS gradient code like this:
background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
ExtraContentAsymmetric 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 labelsThe breadcrumb and last updated date can have their labels customised using simple CSS code like this:
content: 'Last updated ';
Use this CSS code if you want to translate the text strings into a different language or change their wording.