IntroductionCSS Flexbox is the future of modern web design. Serenity brings you the flexibility and sophistication of Flexbox directly into this highly dynamic RapidWeaver theme. This theme inspires you to create beautifully modern webpages that are fully 'content aware' and reflow intelligently to fit and align your content.
Another great feature about Serenity is that it purposefully foregoes the use of a drop-down menu or mobile toggle menu. This makes completed webpages exceedingly easy for end users to navigate; irregardless of what web browser or device they land upon your website with. If you have set a criteria of building a fast and accessible website with RapidWeaver, Serenity is perfect.
How to use SerenityThe theme installs and works identically to any other conventional theme. Of note, Serenity requires a minimum of RapidWeaver 8, to function.
In essence, you are presented with a simple two-column layout. A sidebar on the left and a main content container on the right. You will immediately notice how items within the sidebar have got equal spacing between them; giving us this beautifully 'balanced' appearance. This is a prime example of Flexbox in action. Settings exist in the theme to adjust the Sidebar Flexbox alignment very easily.
Likewise, content you place inside the main content container can be positioned either top, middle or bottom using the Content Vertical Alignment options. This is great if you want to display an eye catching picture on your webpage, with some minimal text layered over the top. If the amount of content exceeds the height of the area, the content scrolls like normal - there is never any danger of the layout breaking or content becoming obscured.
Speaking of background pictures, it is very easy to add your own image using the Banner drop zone within the Page Inspector. Again some clever wizardry within Serenity will calculate the image size and position for 'best fit'. Images are fixed to the page background and do not scroll.
Our free Zonal stack is supported by Serenity, for users wishing to create a mesmerising mouseover background effect. Perfect for a website homepage.
Mobile remains an important factor. The Breakpoint setting regulates the desired screen width you want your mobile adaptations to take effect. 996px is the default breakpoint. Below this screen width, the sidebar will be placed either above or below the main content container. It is often nice to have some of the background picture still showing, so the Content Minimum Height slider helps you apply a minimum height to the content contained; expressed in 'viewport height' units of measurement. The default value of 80% should mean a user can see there is more content to scroll down to.
Of course there are plenty of other settings to experiment with. Within a short space of time you can easily generate an expert-grade web design that will work flawlessly for years to come. Serenity has over 120 font faces to choose from, numerous colour settings and plenty of Miscellaneous style options to do various things.
Background imagesSome themes restrict the number of custom backgrounds you can select to use. Serenity approaches things rather differently, in allowing you to provide any number of custom background images through the Page Banner drop zone, within the Page Inspector. What's more, the theme will intelligently resize and position your image to fill the whole page. You simply have to provide a JPG image at 72 DPI, with a modest file size. The theme will do the rest for you. Alternatively the body background image can be turned-off in the theme style settings and replaced with a solid colour fill instead.
Video backgroundsExperimental support is provided for video backgrounds. You will need to download and use the free uTubeFill stack from Stacks4Stacks. Add this to a webpage and configure it with a video ID. The Selector wants changing to
#contentContainerWrapin the stack settings. This configuration will work well in all mainstream desktop browsers. Tablets and mobile devices will display a static image (normally the video thumbnail or poster image).
ExtraContentSerenity has a total of 14 theme ExtraContent containers. These allow you to use special stacks or code snippets to place content within different parts of the page. You can see where each one is located, using the Preview Extra Content Containers option in the theme miscellaneous settings. Note that some of these containers are only shown when particular theme settings are enabled (like the top header container or sidebar).
MoreThe free trial version of Serenity can be downloaded using this link. There is no time limit imposed on the demo version, but page navigation links are disabled in the demo version. Watermarks may appear in parts of the page (like the banner or footer). Purchasing Serenity provides you with a licensed copy of Serenity; without any demo restrictions applied.
Clicking this link will take you to a sample website published using Serenity. This may give you a better insight into how this theme looks and behaves. If you're interested to see how the demo website was built, the same project file can be downloaded here and opened in RapidWeaver. Feel free to use this file as the basis for a new website.
If you have any other questions about Serenity, please don't hesitate to get touch.