Once every couple of months, we are presented with a new option to de-clutter our web pages. Only recently, we've seen sliders, tabs and accordions and now we have Capsule.
Capsule is an Apt name for Elixir's new stack …
If you have content that you want hidden away until it is required, drop the content into a capsule, add a button to open the capsule, finished.
If that sounds easier than adding a container to your page, checking the online instructions to remind yourself just which attributes and links are needed to open the container and then setting up links or linked buttons, it's because it is easier.
Capsule consits of two stacks – Capsule Content and Capsule Toggle.
Capsule Content has just two settings – it requires an ID and it can present itself with padding.
Configuring the Capsule Trigger will consume a little more of your time. Not because the configuration is complicated – quite the opposite – but because there are so many options …
First you will need to set an ID which, obviously, needs to correspond to that of the Capsule, then you need to decide if the page should load with Capsule's content visible or hidden.
Capsule Trigger's default setting has an icon to toggle the Capsule. There is a choice of 20 different icons for both the open and the closed states, so there is bound to be one to suite your personal taste. If you can't find an icon that you like, you can see if one of the 24 images that Capsule installs in the Media Library are more acceptable and, if all fails, you may drop images of your own (one for each state) into the HUD's image wells.
If you have chosen one of the standard icons, you will be able to specify both size and colour of the icons and their alignment within the stack. If you'd like to compliment your chosen icon with a text, there is an option for that too, along with size and colour settings.
The Capsule Content slides open when the toggle is clicked. The slide can be animated with one of nine effects and the animation duration can be set.
I have a couple of pages online that display similar show/hide content and the annoying thing is, when the hidden content is larger than the screen height, the user has to scroll back up the sceen to hide the content again.
Not so with Capsule, just add a second toggle below the hidden content and a close button will slide into view along with the Capsule. It just couldn't be simpler.
A Capsule will remain open once triggered. There is, however, a setting which will allow a capsule to close all open capsules when it is activated. If set for each capsule, the result is a toggle effect. If used independently, one capsule could be used to 'tidy' up the page again.
Adam originally set out to create a stack that would enhance Bloom. The 'enhancement' has bloomed into an entirely independant stack that is simpler to deploy than any other toggle stack available to date. I wish I'd had this stack a few years ago!
One question that many will be asking themselves: What about SEO. Capsule's content loads with the web page and is hidden from view. Web crawlers can read the hidden content without any problems.
Recently everything seems to be revolving around typography in RapidWeaver.
1LD's new suite of six stacks is even called Typography and allows an extensive range of font settings and effects.
The main stack – Typography Core – is a container which will enable most of the functions available; for instance, if you drop in the Font Importer, you can add Google Fonts, or local fonts to Typography's contents simply by adding the Google Font Name or the name of your local Web Font.
Typography-Core's HUD will allow you to override each of your theme settings for any Div, Section, Article, Aside, Main, Header, or Footer. The settings available will override font and link colours, font sizes and link appearance. It will also let you set the line height and control responsive sizes, allowing fonts to display at specific sizes, conditional to five separate breakpoints.
Typography-Headers provides settings to customise headers with customisation that includes not only the header alignment, but also the font weight for web fonts, letter spacing and stretch values – both horizontal and vertical.
Further, Typography-Headers also adds options to skew and rotate headers, add shadows and and allow headers to follow a circular path. With Marquee, a ticker-text effect can be added. Three Header Themes are also available for a Neon effect, Emboss and Overlap. Fluid Text is available as an alternative to responsive sizes and will allow the headline to fill its container depending on viewport size, with definitions for maximum and minimum sizes in px.
Typography-Text is even more versatile. Text may be set as a Paragraph, Blockquote, Address, Details or Div. When Details is selected, the text content appears in a dropdown. Drop Caps may be defined in px.
Typography-text can be set to Standard or Columns. Up to twelve columns may be selected with up to five breakpoints. The breakpoints have settings which allow you to define how many columns are displayed after the each breakpoint is reached. A Rule – a vertical line – can be set between the columns.
Just as with Headlines, Fluid Text will allow fluid font sizes that will fill the text container's width. Shadows may, of course, also be added.
In addition to the above, Typography-Code – which doesn't need to sit inside the Core stack – lets you add code to your page in one of eight Themes and lets you choose between 24 code formats ranging from CSS to Visual Basic.
As if that were not enough, Typography-Buttons will place a button on your page in one of five different themes – Custom, Squishy, Ribbon, Glass and Alerts – each with a wide range of colour and rollover effects. The advantage of the Typography-Button stack, is that fonts may be set to match your web fonts.
Typography is currently, without a doubt, the most versatile stack available for font presentation. Some of the less obvious functions are well documented via the tooltips and in the extensive online tutorial.
In a similar vein to Click, DeFliGra's new TextPal comprises a Master stack and a Servant stack. That is – you format a Master and all Servants will mirror the Master's formatting. This will save a lot of time when adding text to a page that is to deviate from the standard theme settings, but will save a whole lot more time, if it is decided that the alternate formatting needs to be changed in any way.
TextPal Master is essentially a text stack, but this is a text stack with extensive formatting options.
The first option is to set a Group ID for the stack. Below the ID, you will find Wrapper options that determine the content alignment. The Bottom Border Outer will underline the stack and the Border Space adds padding underneath that line.
TextPal's Text Area allows comprehensive formatting of the text itself, whilst Columns will divide the stack into as many columns as you choose. The columns are responsive and text content reflows within the columns to maintain an equal height. This function alone is extremely valuable, but Tommy has even added a breakpoint that disables the columns below a certain screen width.
A background colour can be configured for the text and with Bottom Border Inner, the background can be underlined. Then, of course, there are the Custom CSS settings that Tommy always includes.
Now, whenever you drop a TextPal Servant onto your page and set the same Group ID as a Master, the text content will automatically be formatted. Any alterations made to the TextPal Master will automatically be reflected in all corresponding Servant stacks.
Competition stimulates business and diversity of choice is always positive. So CosCulture's Fullpage Stack was greeted with great interest by the RapidWeaver community yesterday. FullPage was immediately compared to Screens, which I reviewed just recently – why?
FullPage Stack is another suite of stacks that enables Weavers to build single page websites. And, if I am honest, it is a very interesting solution – not least, because of its price.
FullPage Stack consists of four stacks: Fullpage Init, Fullpage Content, Fullpage Horizontal Slide and Fullpage Video.
Working with FullPage couldn't be easier. The Init stack goes to the top of the page, then you can add a Content stack. Your page content is added to the Content stack and is automatically vertically centred.
Further Content stacks are then dragged into your project as you need them.
To add a horizontal slide, you will first need a Content stack; you can then add as many Slide stacks into the Content stack as you need. Your page content is then added into the slides.
It is interesting to note that horizontal slides have, in actual fact, a static background. The content slides in over the background – unless you add a background image to the slide and then the background image slides in. A nice effect.
Both the vertical and the horizontal slides cycle through to the first slide when the last slide is reached.
FullPage Init adds the code to the page that enables the Fullpage sliders, it also has HUD settings that control the appearance of the page navigation, enables the site's menu and enables a footer. Full page Init also has an option to autoplay the pages – either vertically, or when you've added horizontal slides, horizontally. There is also an option to set the page transition speed – an idea that I like.
The pagers – the optional dots that let you recognise which slide you are viewing – are minimally customisable. The default setting for the pagers is a round dot 12x12px, when active, 4x4px when passive. When you set unequal measurements, the dots become elongated.
The size and colour of the navigational arrows for the horizontal slide are also edited in the Init's HUD.
If the Menu option is activated, the standard RapidWeaver project menu is added to the top of the page, allowing you to navigate to other project pages. Navigation between the FullPage slides is not a standard option and would need to be added via link anchors, if necessary.
If the footer option is activated, a stacks well appears in the Init stack where you can add your content. Both the Menu and the footer remain static when the slides change. Both are customisable.
The FullPage Content stack had me confused for a moment. I dragged some text into it, went to preview and was presented with a black page? I returned to my layout, set the background colour and oops, the page was still black. It isn't until you scroll down to the bottom of the HUD that you find the background settings for the content. You can set a Background image and/or colour. If you set a colour and a background image, you will see the colour load before the image loads. The Content stack doesn't have any further settings.
The FullPage Horizontal Slide is dragged into a Content stack and is, in fact, much the same as the Content stack, the only difference being that you can add a background image but not a colour.
The FullPage Video Stack is also added to the Content stack. The Video stack will play mp4 files from the RapidWeaver Resources or via a URL. Two separate placeholders are already added to the stack, don't forget to delete the one you don't need. Videos are scaled to fill the page and will automatically loop.
On mobile devices that don't support video backgrounds, the Video stack is automatically deactivated and the an image or a background colour will be displayed instead.
FullPage is a lightweight alternative to Screens. There are no bells, no whistles, just a functional, responsive, single page website solution. Well worth a look at.
I'm always impressed, when a developer returns to his code and makes meaningful changes to it.
Christoph at Rapid Ideas has just returned to his new stack News Grid and made some important alterations. As of next week it will be possible to add more than one RSS feed to the stack and to add more than one stack per page.
Now I have to follow his example and correct the post that I wrote about News Grid back in March.
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Subscribe to Ninja News
or ask a question
Yes, I would like to receive your monthly newsletter.
No thanks, I’m good for now. I have a different issue.
[1-1], thanks for subscribing. If you made a further request, I’ll get back to you – typically within 24 hrs.
[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.
Thanks again for contacting us. Your request was successfully submitted.
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—17
Powered by rjh-design
Don’t miss a post!
Sign up for our monthly newsletter.
A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.