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
TippyTitle will turn any title tags into styled tooltips. Red, green, blue; above, or below your tagged text; with, or without a pointer and just about any size that you want. You even get a choice of fifteen different cursors and the tooltip can appear either on hover, or when the linked item is clicked.
TippyPlus allows you to have an info panel open when your linked item is hovered or clicked. The Info Panel can contain just about anything you wish and, depending on the size of your content, can even cover the screen.
And that's not all. The two stacks can be combined and configured so that on hover, you see the tooltip and on click, your info panel will open.
So how does it all work?
Well, TippyTitle is extremely simple to set up. Select the word that you wish to add a tooltip to, click the Add Link button and, in the URL panel – next to Text – add your tooltip text.
You can now take a look at the stack setup panel and configure your tooltip to look exactly as you want it.
TippyPlus is very slightly more complicated to set up. By default it is configured to open your info panel when the stack content is hovered – which is great if you want to add a tooltip to a button, an image or a text snippet – in which case the stack displays two containers – one for your linked content and one for your info stacks.
As simple as the stacks are, there is a whole online manual describing the various setup possibilities. The manual is well worth taking a look at as the Tippy stacks are a lot more versatile than the stack settings would lead you to believe.
The first image above shows TippyTitle in action. The second image displays a TippyPlus info panel when the same link is clicked.
Tooltip for: – Every element with a title tag within this stack, This stack, An element with a custom selector on this page
Keep elements on one line – deactivated by default
Show – On hover, On click
Tooltip size – Small, Regular, Big
Align text – Left, Centre, Right, Justified
Cursor style – 15 options
Flip – Display tooltip on the opposite side when no room is available to display
Distance – px
Offset – x, y axes
Animation – 5 options
Delay – Show, Hide, ms
Duration – Show, Hide, ms
Inertia – Modifies the transition
Show Arrow – Deactivated by default
Width – Tooltip Width – % or px
Custom Settings – Deactivated by default – Black tooltip, White text
When Custom Settings is activated the tooltip may be customised
Custom font size – deactivated by default
Font Family – Theme, Web Safe, Custom
Custom text colour
Use text shadow
The TippyPlus setup panel is almost identical, but includes custom colours for Text, Link, Link underline.
Packing tons of information into a webpage has always presented a problem. How do you pack reams of text and/or images into a page, yet retain an attractive design? Well, maybe Weavium can help you…
View More is a stack that presents your visitors with a compact teaser and expands when clicked. View More is as highly customisable as we have come to expect in the short time that Weavium stacks have been available and can be configured either to subtly match any other elements on your page. or to jump out at your visitor, begging to be clicked.
In its base form, View More displays a rectangular box (the colour settings are entirely up to you) which, when opened can contain the Encyclopaedia Britannica, if you so wish.
… Well, that's entirely up to you!
Max Width – px
[Corner] Radius – px
Breakpoints – Tablet, Mobile
Header – Extensive settings for the header formatting, including a choice of sixteen web fonts + Custom Google Font and four different icon sets – Font Awesome, Iconic, Linear Icons, Material Icons + Custom
Content Font – as above
Button Text – px
Button Spacing – Spacing between buttons
More Button Text – View More, Close
Action Button Text – Proceed
Section Colours – Extensive colour settings for every View More setting, including diagonal gradients and background images.
Action Button – Hide/Display action button
Displays either Link or text box for script.
Let's just hope that 'Linear Icons' lives longer than other icon sets have in the past, so that we don't have to reconfigure our pages next year.
Because I never got around to taking a look at Total CMS before the demo expired, Jochen was kind enough to let me take a closer look inside his online demo page and I'm very glad that he did because
1 – The project is rather neat and; 2 – Now I finally know how Total CMS works.
ProPage, as you will have gathered by now, is a Total CMS-based Foundation project.
Jochen has kept the design simple with a BWD Button Plus menu, a hero image and page content that's loaded via the blog. The navigation allows you to move between the pages (of course!) and also allows you to sort the blog posts by category. Oh, and the site has a sidebar that's been added with BWD's Blueprint Sidebar. ProPage takes advantage of partials, so that if you wish to duplicate a page, or parts of a page, doing so is simple.
ProPage comes with six pages in total – The main homepage, an About Us page, a Contact page and the Admin page with subpages for the main page (the blog content) and the About page. The whole project is schlicht (unostentatious), after the motto "Less is More". The homepage displays two columns with a large image for each of the blog entries and a summary. When clicked the blog post opens as a full page. The About page has the same header and hero image layout as the homepage and displays a large text with headers. The Contact page also shares the same header layout and includes a Foundation contact form.
The ProPage Admin pages have also been kept simple and are easy to use. Your clients will have no problems adding or altering their content.
ProPage – as Jochen writes himself –
is not only a very clean and modern site for personal websites. PagePro is the most versatile project for your customer work. You can use this project as a basis for doctors, tradesmen, service providers, coaches and other professionals.
The basis is a very simple structure that makes editing the content fun. A post gets a category and then automatically appears in the menu. All contributions can be listed by category and searched for words.
I couldn't agree more.
Mega Menu can contain just about anything you want it to. If you choose the right stack, it will display your main page navigation or, as 1LD's demo shows, Mega Menu can even contain Google Maps.
The fact that it may either be fixed to float at the top or bottom of your page, or displayed inline makes it especially interesting.
The Mega Menu stack can display as many dropdown menus as you wish and the menus can display as many columns as you can fit onto your page – it's all a matter of your column width.
Mega Menu is, of course, fully responsive and on mobile devices it morphs into a practical dropdown that only displays the submenus when they are clicked [tapped].
As with all recent 1LD stacks, you have a wide choice of fonts and icons and, as usual, the stack is highly configurable; once again, with so many options that I shan't be listing them all individually.
Position – Fixed, Inline
Orientation – Top, Bottom
Z-index – Someone went wild here and entered a number that begins with nine sextillion and continues with 21 nines!
Max Width – px
Margin – Vertical, Horizontal
Breakpoint – Point at which the menu collapses as mentioned above
Main Menu – Settings for Font and Icon sizes, Spacing, Padding and Font
Mega Dropdown – Content Alignment, Min Height, Column Padding, Item Padding, Link Size, Title Size, and lots more…
Header – Logo & Title, Toggle Size
Colours – Colour Settings for every aspect of the stack
Mega Dropdown Menu (Child Stack)
Column Size – Equal, Auto
Icon – Google Material Icons, Fontawesome, Ion Icons
Mega Menu Column (Child Stack)
Column Max Width – px
Custom Alignment – [Content] Left Centre, Right
Custom Colours – Colour Override for – Links, Text, Titles, Border, Background
NOTE: Mega Menu uses content overflow. In case you haven't set stacks to overflow before – When you set Mega Menu to 'Inline' your content will only become visible when there is content below the menu – i.e. something for it to overflow!
You can place as many Mega Menu stacks on your page as you wish, without having to bother about stack IDs.
Oh, and the pessimistic Z-index setting of nine sextillion, nine quintillion, nine quadrillion etc. etc. is totally unnecessary and will be ignored by all browsers* – nine will suffice in 99% of the cases. If your page contains that many layers it needs to be seriously examined!
Mega Menu is a great alternative to your default menu and well worth taking a look at.
*The maximum observed Z-index setting is 2147483647 for most modern browsers, and 16777271 for Safari 3 and below. Older Firefox browsers will not display elements with a higher Z-index than the max at all !
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.
By clicking 'Submit', you are giving your consent to having rjh-webdesign collect your name and email.
These details are used exclusively for the newsletter and will not be passed on to third parties!
As soon as I've added you to the mailing list, you'll receive a mail asking you to confirm your subscription.
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.
Looking for Inspiration?
Looking for Inspiration for a new site, or need a CTA
The Latest & Greatest
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?
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
You've reached the bottom of the page, thanks for reading.
If you enjoyed what you read, you can subscribe to the Ninja Newsletter and receive a review summary once a month.
We shall send you a summary of the Ninja News reviews once a month.
We do not send out any other mails and we shall not, under any circumstances, share your email address with third parties.