You just purchased Intrinsic from S4S and are going to build a killer layout!
But wait, that looks a lot more complicated than you thought it would!

I assure you it isn’t; Here’s a layout that I put together quickly to demonstrate how Intrinsic works…

We’re building for the modern web – right? So what did we learn just last week?
Mobile First!

Let’s build a project together…
Drag an Intrinsic stack into your stacks page and begin filling it with content.

In my project, I have a header stack — an image with a title and a menu bar. I added the image as a background image to a Sections Pro stack and the title in a Sections Box. The menu is below the sections box and I dropped the lot into an Intrinsic Grid Item. Problem number one!
 The Intrinsic stack already has a background colour defined. Two backgrounds won’t work. If you wish to see your Section, you’ll need to deactivate Intrinsic’s BG in the main stack!

Once that’s done, you’ll notice that Intrinsic also has 0.75rem padding on all sides. We want our banner image to be full width, so the padding will have to go!

Next up, in a Grid Item that I’ve given the ID h1, I’ve added a Grummage stack with a Header stack, and a 2 column Grummage containing paragraph stacks.
The Grummage stack reduces our Intrinsic content to the site width defined in the Foundation setup.

I’ve then added the following Grid Items and filled them : for paragraphs one to four with the IDs p1 — p4. For images i1 — i4. In the I Grid items I’ve added a text stack for the caption — set to align at the bottom of the Item and I’ve added a background image via the Fill Style dropdown.

Now comes the Grid Item for your footer.

The preview will still look chaotic because we haven’t added a layout yet!

Our content is all in place, so all we need to do now is add a layout description for screens larger than 640px or 768 px (up to you). 
We want the images spaced around the header ‘p4’, so In suggest you grab a piece of paper and draw the following:

And now you've come this far, you can define a layout for a third breakpoint.
Quickly sketch out on paper just how you'd like it! Have fun!

BTW – If you visit this page with what you’ve just learned, you’ll find a few more helpful tips.
I know, if you suffer from code phobia like me, it looks scary, but I assure you — after the work you just did, it isn’t!

There are a couple of stacks available that will filter RapidWeaver content; some more, some less complicated. One Little Designer has just released what is probably the least complicated filter stack available today.

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!

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!

The 'experts' currently agree unanimously that CSS Grids are the future of web design. In a couple of years time, those same experts will most likely come up with a different description of where the web is heading, but currently CSS Grids is IT!
But how are we supposed to take advantage of CSS Grids in RapidWeaver?

At the end of last year, Will Woodgate began work on a stack named Intrinsic. Today, the final version of Intrinsic has been released and it's going to alter your concept of page layout.

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.

Intrinsic Grid Items can contain any stack that you want to throw at them.
Spend a little time to discover how Intrinsic works and you'll completely rethink the way that your pages can be played out!

NOTE: to view the Intrinsic demo file, you'll need to download the demo version of the Themeflood RWSkinz theme.

If you're looking for an alternative to tabbed stacks and accordions to present all that information that the client supplied, you'll be in a quandary as to which solution to choose. And your plight just got worse; as if to make the choice even more difficult than it already is, Weavium just released Section X.

Section X is a slider that displays info panels with a row of icons (or images) to navigate through them. Contact details, portfolio, product catalogue; drop in the stacks of your choice and build whatever you need.

In its default setting, Section X displays four columns of icons below a Stacks panel into which you can drop just about any stack you wish. The icons can be replaced with warehoused images or images from the repository. If you choose to add images, you'll need to ensure that they are all the same size. If not, then the columns won't align vertically (see the screenshot above). The info panel content, on the other hand can be of varying length, Section X adjusts its height to fit.
You can decide how many columns of icons are displayed at a time. (Weavium often allows astronomical values; even 1000 columns is accepted in the settings panel.) If you have more panels of information than visible columns, navigation arrows appear to slide in the next n columns. E.G. in the example above, I have left the default of four columns, but have eight info panels. The nav buttons visible below the Jaguar icon will slide in the next four columns of icons.

Stack settings
Section
Min Height – D, T, M - px
Padding – Vertical, Horizontal
Radius
Max Width – px
Content Width – px
Breakpoint – Tablet, Mobile

Nav
Nav Position – Bottom, Top
Columns – D, T, M
Gutter – D, T, M
Item Height – D, T, M
Item Radius – D, T, M
Inactive Opacity
Item Icon – D, T, M - px
Item Title – D, T, M
Title Spacing
Arrows – Width, Height
Arrow Icon – px
Arrow Radius
Arrow Spacing

Colours and Fonts

Section X. A nice solution to an age old problem (that of adding masses of information to a page) and will save you hours of messing around with other stack combinations to achieve a result that is only similar!

Hot on the heels of Split Content now follows yet another new stack from One Little Designer. Swoop, a content slider that gives us yet another method of packing lots of information into a confined space.

Swoop is a stack container that scrolls content vertically when its buttons are clicked. It can be displayed as a page wide panel, or confined to a width of your choice and can contain as many child stacks as you wish. The active menu text is displayed crisply, whilst the menu options above and below the currently active text are set to blurred by default.

The width of the menu panel and the menu text size may be set individually. I find the default settings a little large, but that's a matter of personal choice. Fact is, after taking a closer look at Swoop, I find it to be quite versatile and it also looks quite neat on a mobile device.


Stack settings
General
Max Width – px
Max Height – px
Radius
Resposive Point

Nav
Max Width
Padding – Vertical, Horizontal
Item Size – (menu text) px
Item Font
Item Padding – Vertical, Horizontal
Item Blur
Arrow – BG width
Arrow Icon – Size px
Arrow Radius

Content
Padding – Vertical, Horizontal
Header Font
Text Font

Stack Colours

Swoop is another of those stacks that 1LD currently seems to specialise in: Hiding a lot of information until it's required. My only criticism: I'd like to see more than three menu items displayed at any one time. Swoop isn't a stack that can easily be emulated by combining other stacks, so I suggest you take a look at the demo page!