Listify is a set of three stacks that will help you build professional lists within your Stacks pages. The basic stack, Listify, is a container for individual List Items. You can either click the stack's + button to create a List Item child, or drag in a List Item stack. The third stack is Listify Group; a container that allows you to create groups of list and automagically builds responsive columns to contain them.
The clever thing about Listify is that you can drop anything into it that you please…
Lets take a basic list. Drop Listify into a stacks page and add a List Item.
The List Item Displays an Icon and a Text Field. Enter your text, add a new List Item – as many as you need – and you have bulleted list.
If you need a headline, you can either enlarge the text in the first Item (see the image below), or you can add a container to the Item and drop in a Header stack (hover over the image below). You can, of course drop in an image, or a button into the List Item Stacks and switch off the default icon and text display.
Each List Item may be formatted individually, or – by leaving the default settings – the completed list may be configured as a whole. Once you've studied the settings panel you'll find that the configuration is really simple.
Tip. If you wish to set up individually formatted List Items, begin with one Item. Once you have finished the basic formatting, duplicate the Item and then reconfigure. You'll find it a lot easier than setting up each Item from scratch.
The basic Listify stack provides the settings for the overall look and feel of your list. The List Fill Mode determines the width of your list – either Full Width (of the container it is placed in), or Pixel Width. The List Radius is set to a default of 5px whilst with the List Padding and the List Margins are set to 10px T, B, L & R.
The Background is set to Off by default, but may contain a solid Colour, a Gradient, or an Image.
Both the Borders and the Shadow are Off by default.
List Items (Shared Styles). The following settings will affect every List Item within the Listify stack:
Indent Direction (Left/Right), Item Indentation (px), Align Content (Left. Centre, Right, Separate (Icon & Text)), Item Spacing (default 5px), Item Radius (default 5px), Item Margin, Background and Border.
List Item Fonts gives you a choice of 13 standard Google Fonts, or (just to prove that 1LD listens to their customers) Custom. Text Size (px) and Text Colour.
List Item Icons (Shared Styles). Here you get to set the standard formatting for the icons: Vertical and Horizontal Positioning, Icon Padding and Spacing, Icon Radius and Icon Size. The Icon Background can once more contain a solid Colour, Gradient, or Image. Oh, and the Icon Colour itself, of course!
The default Icon is a Google Material Icons star. The icons are set individually for each List Item, with a choice of GMI's, Font Awesome, or Ion Icons.
Listify Item. The individual Items may be Linked to an external source. The next setting is Item Level. Each Item may be set to up to 10 (in words TEN!) Sub Levels! Excuse the overuse of exclamation marks (points if you're American) but this is amazing!
Next you have the option to Override Shared Styles. If this option is activated, each List Item may be individually styled. With the exception of Custom Stack Content and the Icon setting, the list of formatting options that follows is identical to those already listed above, including the individual visibility settings for the three screen sizes.
Finally, we come to the List Group stack.
As already stated, if you drop two, three, or more individual Listify stacks into a Group, your list is automatically columnised.
The List Group Stack also has some interesting features, though.
The List Alignment is set to Centred by default, but may also be set to Top, or Bottom. Then you'll find a setting Wrap List for Mobile Tablet (Portrait) and Desktop. Then there are settings for the group's Background – again None, Solid Colour, Gradient, or Image, Group Radius and Group Padding. The whole group may, of course be hidden at different screen sizes.
Hover over the image above, and you'll see just how flexible Listify really is – and that's without having added button stacks, or images!
Kool, or wot?
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