CutOut is a stack that allows your text to gracefully flow around your image instead of the standard rectangular float that we have become used to. Check out the screenshot below:
The left half of the image displays a regular floating image. The right half of the image displays a floating image when using CutOut. Notice a difference?
CutOut makes use of the new 'shape-outside' CSS definition which is supported by all newer browsers (If you wish to know exactly which browsers take a look here). Shape Outside allows a text to flow around a pre-defined form. The form can be circular or polygonal. Polygonal shapes are highly experimental, but 0% 0%, 100% 0%, 50% 100% for instance, will create a triangular shape. CutOut degrades to a regular floating image on older browsers.
You can drop any Square (i.e. with equal length sides) image into CutOut and your image will automatically be displayed as a circular image which your text will flow around. If you require a more complicated shape, you'll need to search the web for shapes, or experiment.
How it works. Drag Cutout into a stacks page and you'll be presented with a dummy text. Replace the text with your text and drag your image into the image well in the stack settings panel. It's that simple. Of course, CutOut wouldn't be an S4S stack, if it didn't support warehoused images, but you'll also notice that it also has a setting for WebYep CMS images [Teaser]. WebYep2 is nearing release and CutOut already supports the new CMS system (as will a number of other S4S stacks).
Image Source – Drag & Drop, Warehoused, WebYep CMS
CutOut Shape – Circle (default), Elipse, Inset, Polygon
Image Float – Left, Right
Apply Border Radius – Default 50%
Spacing – Space between image and content below breakpoint
Image Width – px
Image Margin – Top, Bottom, Left, Right
Image Width – Below breakpoint
Content Type – HTML, Markdown, Text (default), WebYep Short and Long
Content Padding – Top, Right, Bottom, Left
Typist is one of those stacks that is quite unique, it can type a text on your page at varying speeds and then reveal a second stack. If you wish, Typist can then continue to type further text, and then (repeat the above)…
… cool, or what?
Typist will trigger n seconds (you set the time) after it is scrolled into view. If it visible on page load, it begins to type immediately after the time you have defined.
Trigger – When Scrolled into view, Triggered When Type Stack Above Ends
Delay – Seconds
Text Type – Paragraph, H1—H6
Colours – Theme, Custom
Align – Left, Centre, Right
Humanize – Typing speed – adds a human-like feel to the typing
On Complete – Do Nothing, Remove Flashing Cursor, Show Extra Content Below
Typist could theoretically build a whole page as your visitor views it.
A novel stack that I'm sure will appear on many websites in the near future.
I could, of course, have installed a script on this page that would keep the date above current and demonstrate exactly how 2day works but, as I'm on a tight schedule, I decided against it — too much work!
It would, however, have cost me just a few seconds to add Jeroen's 2day to the top of the page and to display a message with the date, formatted exactly as I wanted. But I no longer want to permanently display today's date. Been there, done that, didn't like the t-shirt any more.
With 2day, you can format your date exactly as you want it to appear, with custom text both before and after today's date, so that your message says exactly what you want it to.
Text before Date – Enter a prefix of your choice, e.g. 'Today is '
Item #1 – Name of Day, Name of Month, Day of Month 1–31, Day of Month 01–31, Year 2 digits, Year 4 digits.
After Item #1 – Divider of your choice, e.g. comma. slash etc.
The same settings are available for items 2–4, but include the option 'Do not use'
Text after Date – Enter a suffix of your choice
Style – Bold, Italic, Underline
Font Family – Theme Default, Web Safe Font, Custom Font
The names for each of the months and days may be localised.
2day also has a sister stack – LastPublished. The RapidWeaver snippet '%last_published%' used to publish a simple date, e.g. 31/12/2017, but the snippet is no longer supported. At the same time, the snippet doesn't really say a lot.
LastPublished has the same settings as 2day, but will display the publishing date instead of the current date, so that you can supply your visitors with a more descriptive date in any format that you wish.
Whilst we're on the subject of Marathia's Stacks; Jeroen also published two free page background stacks to round off 2017!
Shards generates a random, angular page background pattern with up to 3 colours, plus a fallback colour for older browsers, that resembles neon shards.
Nebula generates a random background pattern that resembles nebulas in space. Nebula supports 2 colours and a fallback colour.
At first, I wasn't too impressed by Shards, but saw potential with Nebula. With time, however, both stacks sort of grow on you…
Jeroen (Marathia's Stacks) also became frustrated when formatting single lines of text for responsive sites. The result of his frustration: OneLiner.
OneLiner is a stack that allows you to set the width of a line of text to appear just as you want it on any screen. OneLiner's default setting will allow your text to fill its container width, however, it also has settings that allow you to define exactly which percentage of the container your text should fill. Example: Three single lines of text.
Now if you analyse at this text, you're going to notice that the second and third lines of text are going to appear much too small on a mobile phone to be legible.
For this reason OneLiner allows you to override its' settings above, or below a set breakpoint and define a fixed text size.
In this second example, I have set OneLiner to display the second line of text at 18px on mobile phones and the third line at 16px.
Instead of shrinking to fill the container width, the text now displays at a set size that is legible. Line-breaks appear within the text as soon as a word no longer fits on a line.
OneLiner also has further useful settings. Obviously, you can set h1–h6 and paragraph tags for your text, but you can also override the text formatting entirely by setting the font, font colour and alignment.
Tag – None (div) – (default) h1– h6
Set Custom Text Style – Bold, Italic, Underline
Align – Left, Centre, Right
Set Spacing – Letter, Word, Line
Font Family – Theme Default, Web Safe Fonts, Custom
Capitalise – Normal, All Upper Case, Initial Caps
Size Correction – Text width in %
Disable – Small Screen, Large Screen
Max Screen Width – Breakpoint
Align – Justification above/below disabled settings
Fixed Font Size – Above/Below disabled settings
Content – Custom, Site Slogan, Site Title, Site Footer
OneLiner is a cool stack that solves the frustrating problem of headline sizes elegantly and quickly.
You never heard of Weaver's Kingdom? You must have, it's been online for weeks now and is the rebranded Archetypon from Lucas Tsolakien.
Tickertape is considered useful, because it can display large amounts of text within a very compact space. It is often used to display upcoming events.
Typed takes the idea to a new level. Instead of a constant stream of text running across your screen, Typed types text, deletes, or untypes it and then types a fresh text in its place.
My first thought was "Duh! Not another one!", but then I took a look at a couple of examples and changed my opinion.
Lets say you have a number of different products or services available. You could type a list such as:
We Design Websites
We Design Logos
We Design Print Products etc, etc.
Or you could position your text "We Design" and let Typed fill in the blanks at intervals of a second or two.
You've got your message across and, because it's animated, it gets noticed and – it saves a lot of space.
When you drop Typed onto a Stacks page, you'll see a text container with a + button to add child stacks.
Type your text alternatives into the containers and add, or delete child stacks as needed.
In the settings panel, you can set the Typing Speed and the Start Delay. You may choose to Shuffle your texts and set the Back Speed [untype] and the Back Delay.
You will probably want the text display to Loop [repeat], but this option may also be deactivated.
By clicking the final stack option 'Detatched' you can insert the code <span id="typed"></span> into any text block and Typed will insert itself [i.e. your ticker text] into said block instead of appearing on the page as a separate stack.
Typed 'types' your text across the screen, so by default it displays a cursor. Show Cursor can also be deactivated.
The next settings are for the text formatting. Override Styles, [Text] Colour, Bottom Border [underline] and Border Colour.
Typed re-invents and modernises tickertape and makes it a lot more appealing than it used to be.
Take a look at the demo sites at the bottom of Lucas' product page and see for yourself.
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Do you have a question regarding RapidWeaver?
Would you like help with your new project?
Would you like us to build your new RapidWeaver website?
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.
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—16