Clicky

RapidWeaver Stacks, PlugIns, Themes ...
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

Intrinsic: Building a Responsive Layout

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!

In Grid Template areas, we now need to add the following:
'header'
'h1'
'p1'
'p2'
'p3'
'i1'
'i2'
'p4'
'i3'
'i4'
'footer'
If you now preview, you’ll see that the mobile layout is almost finished. There’s just a tiny problem with the height of the images.
The problem arises because we haven’t given the rows a height. That’s fine for the text content – ‘auto’ works just fine, however it doesn’t work for the image items which only contain a caption with a BG [image], but the BG height hasn't been defined..
This means that we now have to set the size for each of the rows in our layout. 
The first five rows work just fine with auto, so we can add “auto auto auto auto auto “ to set the height. Make sure there is a space between each one.
We want our images to have a min height of 300px on mobile. The max height can be set to “auto”, so now we add FOUR instances of “minmax(300px,auto)”.
Once again – don’t forget the space between each ‘row’.
 Now add “auto” (with spaces) between the first two images rows for the headline ‘p4’ and once again at the end for the footer.
And Voila! We have a simple Mobile layout!

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:

Intrinscic – Stacks4Stacks – scheme

This shows you your layout scheme…
So now we can begin work. Our layout has three columns.
The Header and the Grummage with the two columns should fill the layout width, so for them we add:
‘header header header’
‘h1 h1 h1’
This tells Intrinsic that the two Grid items span all three columns.
Now we add a new line:

‘p1 p2 p3’
to place those three items in the same row.
For our four images and header, we just worked out on paper that we need :
'i1 i1 i2'
'i3 p4 i2'
'i3 i4 i4'
And to complete the layout we need:
‘footer footer footer’
Don’t forget any of the spaces OR the single quotes, or you layout won’t work!
Once again we need to format the row height to accommodate the images.
This time we have fewer rows because p1,2 and 3 are displayed on the same row.
The images can be larger to, so this time we remove the ‘auto from the Grid Row Height and add:
auto auto auto minmax(400px,auto) minmax(400px,auto) minmax(400px,auto) minmax(400px,auto) auto
Your desktop layout is now more or less complete. If you go through the Grid Items one by one, you can now add background colours, add, or remove padding and take a look at the options in general – there are many, but now, at least we have a responsive layout.

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!

Please note that DISQUS operates the forum below.
When you sign in to comment, RWNinja will provide your email, first and last names to DISQUS. That information, along with your comments, will be governed by DISQUS’ privacy policy. By commenting, you are accepting the DISQUS terms of service.
Comments

Filter Grid for RapidWeaver

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 – 1LD

Stack settings
Hide Grid Tags – Hide the coloured tags below each grid
Max Width
Columns – Desk, Tablet, Mobile
Column Min Height – Desk, Tablet, Mobile
Gutter – Desk, Tablet, Mobile
Tag Block – px
Tooltip Text – px – the tags can display tooltips
Tooltip Radius
Tooltip Padding


Dropdown Toggle
Select Text – Select, Deselect – localisation
Width – px
Text – px
Icon
Radius
Padding

DropDown List Items
Max Width
Radius
Text – px
Radio – px
Colour Blocks – px
Block Radius
Padding

Colours & Fonts
Default 1LD font options
Colour selectors for
Toggle
Text
Item BG
Radio
Tooltip

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!

Please note that DISQUS operates the forum below.
When you sign in to comment, RWNinja will provide your email, first and last names to DISQUS. That information, along with your comments, will be governed by DISQUS’ privacy policy. By commenting, you are accepting the DISQUS terms of service.
Comments

Intrinsic: CSS Grids for RapidWeaver

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:

Intrinsic – Stacks4Stacks
And here are the settings that were necessary:

intrinsic – Stacks4Stacks
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.

Please note that DISQUS operates the forum below.
When you sign in to comment, RWNinja will provide your email, first and last names to DISQUS. That information, along with your comments, will be governed by DISQUS’ privacy policy. By commenting, you are accepting the DISQUS terms of service.
Comments

Section X for RapidWeaver

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.

Section X – Weavium
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!

Please note that DISQUS operates the forum below.
When you sign in to comment, RWNinja will provide your email, first and last names to DISQUS. That information, along with your comments, will be governed by DISQUS’ privacy policy. By commenting, you are accepting the DISQUS terms of service.
Comments

Swoop for RapidWeaver

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.

Swoop – 1LD
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!

Please note that DISQUS operates the forum below.
When you sign in to comment, RWNinja will provide your email, first and last names to DISQUS. That information, along with your comments, will be governed by DISQUS’ privacy policy. By commenting, you are accepting the DISQUS terms of service.
Comments

Show more posts

  • Stacks Image 35399
  • Stacks Image 35402
  • Stacks Image 35405
  • Stacks Image 35408
  • Stacks Image 35411
  • Stacks Image 35414
  • Stacks Image 35417
  • Stacks Image 35420
  • Stacks Image 35423
  • Stacks Image 35426
  • Stacks Image 35429
  • Stacks Image 35432
  • Stacks Image 35435
  • Stacks Image 35438
  • Stacks Image 35441
  • Stacks Image 35444
  • Stacks Image 35447
  • Stacks Image 35450
  • Stacks Image 35453
  • Stacks Image 35456
  • Stacks Image 35459
  • Stacks Image 35462
  • Stacks Image 35465
  • Stacks Image 35468
  • Stacks Image 35471
  • weaverthemes
  • Stacks Image 35477
  • Stacks Image 35480
  • Stacks Image 35483

Links to the developers ® All trademarks cited on this page are the property of their respective owners.

x

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.

* indicates required

Contact Information

My Image

rjh web design

265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
Thailand 58130

About Us

We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.

Legal

This site uses Cookies to determine the best method of display in combination with your browser.
We do not harvest or sell personal information.
© rjh web design 2010—16

This website was built with loving care on a Mac using Foundation. For more information, contact me.