Filter grid does exactly what it says on the tin. A grid of content that is filterable. Drag Filter Grid into a Stacks page and your first row of content is almost finished. All that's missing is your content. Drag any combination of content into a Filter Grid Column, add comma separated tags and you're ready to fly!
The possibilities are endless: Portfolios, travel catalogues, product catalogues, if it needs to be filtered, Filter grid is the simplest solution!
Select Text – Select, Deselect – localisation
Width – px
Text – px
DropDown List Items
Text – px
Radio – px
Colour Blocks – px
Colours & Fonts
Default 1LD font options
Colour selectors for
Filter grid is child's play to set up, does not require PHP and is very effective. See it on a site near you soon!
During the 90s, if we wanted to build a more complicated layout, we were forced to use tables. Then CSS came along and seemingly solved all our layout problems, we discovered, however, that CSS wasn't up to the task of positioning those more complicated elements. Flexbox is great, but only for one dimensional layouts, it doesn't really help with those 2D layouts, so now we've moved on to CSS Grids.
Intrinsic from Stacks4Stacks will build the most intricate CSS Grids for you!
Intrinsic is a little more complicated than your average stack. It can assist you in building complete responsive pages, but you'll need to study the way that it works. There's new terminology that you may need to learn, but once you get to grips with Intrinsic's layout, you'll find that it's actually quite straightforward.
Here's an extremely simple example:
And here are the settings that were necessary:
In the example above, I have defined a two-column layout. Column one is 600px wide; column two is set to 'auto'. I have named the Grid Items (the stack containers shown in red) 'one, two, three, side and footer'.
The Grid Template Areas is set to 'one side', 'two side' 'three side' 'footer footer'. The resulting layout displays the Grid Items one, two and three below each other, with the 'side' Item to the right of them. the 'footer' fills the two last columns.
The Grid Template Areas describe your layout. Intrinsic supports up to twelve columns and unlimited rows. When you drag a new Intrinsic stack into your page, the Grid Template Areas contains the description for a twelve column layout.
Each Grid Item must have a unique alphanumeric ID. Either letter/number combinations or short words. Numbers must be combined with at least one letter.
'A B' 'C B' 'D B' 'E E', for example, or 'one side' 'two side' 'three side' 'footer footer' would both result in the layout shown above (I personally prefer the short names, because they help identify the Grid Items more easily).
You'll notice in the screenshot above that the breakpoint is set to 'Screens > 0px Wide'. Each time you add a Grid Breakpoints Child Stack, you can redefine your layout above the breakpoint that you set in the stack settings.
MUCH more complicated designs than the example above can be built with Intrinsic. Just take a look here at one of Will's demo pages. The page is fully responsive, as is the example on the S4S Intrinsic page.
Expandable Grid allows you to build a grid with as many columns as you feel is practical on your page, with each row set to a height of your desire. Each of the grid sections can contain icons or images alongside a title. When the section is clicked, it expands to the full width of your grid to display whatever you dropped inside it. The rows below the expanded section slide down and the inactive sections gracefully fade with a white overlay
As we have come to expect from Weavium, the stack is highly customisable and I fell in love with it immediately.
Colours & Fonts – What did you expect, but all the default Weavium customisability?
Once again, each of the child stacks is fully customisable via its own Stacks' settings panel.
Expandable Grid – a brilliant stack that's effortless to configure and makes it a pushover to design attractive product catalogues, portfolios, FAQs, etc. in confined spaces.
When first inserted into a Stacks page, Panels displays a single panel 1000px wide. The panel contains an icon, a title and a stack container into which you can insert the expanded content. The panel may be configured to have a flat colour, gradient (via the Panels item settings) or an image. The Icon – from a choice of four icon fonts – may be replaced with an image.
By adding item child stacks, the panel is divided into two, three, four etc. panels which either have the max width you've set, or fill the container that they are in. When one of the Panels is hovered it expands, the icon gently bounces and a text e.g. 'Read More' slides up into the panel. When clicked, the panel expands to fill the full width of its container and displays the container stacks.Stack settings
Max Width – px
Max Height – Vertical Mode, Horizontal Mode
Mobile Point – Breakpoint px
Icon BG Size – Initial, Active
Icon Size – Initial, Active
Icon Radius – Initial, Active
Title Size – Initial, Active
Title Spacing – Initial, Active
Help Text Size
Hover Stretch – Desktop, Mobile
Colours & Fonts
Title Font – 18 options plus Custom
Content Font – as above
Icon Colour – Icon, BG
Content – Header, Text, Links
The item stack settings allow you to set the individual Icon or image plus a background image and allows the override of all colour settings.
Weavium's expanding stacks are amongst the best available. Panels is no exception and is a highly flexible way to display additional information within a confined space.
NOTE: Ion Icons have just been upgraded to version 4 with which Panels is not yet compatible. If you wish to use Ion Icons, I recommend you download the cheatsheet for version 2 which is 100% compatible.
Album is a lightbox stack and I'll say right from the start that I'm rather taken with it.
Album displays a stylised stack of photos which. when clicked, open up a grid of images which, when clicked, open to cover the screen. You can then scroll through the images using the navigation buttons. Both the photo stack.and the main lightbox window display a title alongside a description and each large image displays a caption.
As mentioned above, the stack settings panel is a mile long, so I'm not going to go through the settings here. Just take my word for it that you'll be able to set everything just to your liking, beginning with the size of the photo stack which can fill the page or be thumbnail sized – that's entirely up to you.
So how does it work? Drop an album stack onto your page and begin by configuring the initial album display. Then add a child stack for each of the images in your gallery. You can now go about configuring the gallery page, i.e. decide how many columns you wish to have displayed for each device, title overlay colour, page overlay colour, caption overlay colour and gallery font sizes etc.
It will take some time to set up Album exactly as you want it, but I guarantee that the effort will be well worth it. Be sure to take look at the demo project that comes with the stack!
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