Layouts in RapidWeaver [Review]

1

A few years ago, 1LD released a stack called Pure Grids. I was disappointed when it and all other ‘Pure’ stacks disappeared from their site because it was one of the best grid/column stacks available at the time. However, 1LD just released a grid stack that might just be even better – Layouts.

Layouts is a single stack that lets you build grids with unlimited numbers of columns, but it comes with built in stacks for Columns, Rows, Headings and Text. Layouts is flexible enough to build complete pages with relatively little effort. Gutters and row spacers are added automatically so that your layout is evenly spaced, but every setting remains fully editable. All of the elements can easily be reshuffled when need be.

Read more at: https://rw-ninja.news/Layouts

3 Likes
2

I’ve purchased the stack because I’m interested in the move from frameworks to cssGrid. I’ve found it encouraging that most of the newest versions of the more popular browsers have included cssGrid almost as soon as the spec was released.

I find that you might be wrong when you say “CSS Grids are too complicated for the majority of Weavers anyway!” Will at Themeflood sells Intrinsic which uses a template pattern method of layout while 1LD’s Layouts uses fractions, ie 1fr. Intrinsic can be purchased separately or as a free add on if you purchase his RWSkinz theme. Both have methods built in for responsive design and fall backs for unsupported browsers.

A resource to have a look at how cssGrid actually works is here:

I’ve been playing with the layouts stack since I purchased it and when you have a look at the css you can see it isn’t based on flexbox, display: flex, but on cssGrid, display: grid

.layouts-item > .out {
  display: -ms-grid;
  display: grid;
  grid-gap: 15px 15px;
  -ms-grid-column-span: 1;
  grid-column: span 1;
  -ms-grid-columns: (1fr)[1];
  grid-template-columns: repeat(1, 1fr);
  -ms-grid-rows: -webkit-min-content;
  -ms-grid-rows: min-content;
  grid-template-rows: -webkit-min-content;
  grid-template-rows: min-content;
}
3

Thanks for confirming that Layouts is based on CSS Grids.
It’s a shame then that 1LD didn’t utilise the entire possibilities that CSS Grids allow. I have so far been unable to create a layout that is as ‘complicated’ as is possible with Intrinsic (but I hope someone will prove me wrong).

When I say that CSS Grids is probably too complicated for the majority of Weavers, I don’t mean the Weavers that are willing to take the time to work out a layout with CSS Grids, or e.g. Sections Pro, but the users that came to RW when iWeb was discontinued and haven’t progressed any further.

Based on the number of elementary questions asked on the forums, I sincerely believe that they are in the majority. And I’m not discrediting those users in any way, it’s cool that they want to build their own website and the best way to learn is to ask questions.

1 Like
4

CSS Grid is an entirely new way to build webpages. Alas it is quite involved for the novice. The specification and technical notes for CSS Grid are almost as extensive as CSS itself. It really is quite mind-blowing stuff.

For this reason, the W3C have abandoned the idea of branding each major release of CSS like CSS 2 or CSS 3 or whatever. There will be no ‘CSS 4’. Instead each arm of CSS (like CSS Grid) will be branched into its own separate revisions and working groups. So we’ll start seeing CSS Grid v1, CSS Grid v2 and suchlike.

The Intrinsic stack really does push RapidWeaver and Stacks to their absolute maximum limits. Intrinsic was over a year in development and went through several complete rebuilds before I was happy to release it. For this reason there is nothing like it already. I have tried to put out lots of documentation and test sites for Intrinsic, to make the process easier. However for anybody wanting to use Intrinsic, some background knowledge / research of CSS Grid is desirable, if you want to get the most out of this stack. It is NOT your average drag-and-drop column stack; for which many already exist in this category.

My advice for anybody getting into frontend web development is to familiarise yourself with CSS Grid. That is where things are going. There is little comparison between conventional float-based web design and CSS Grid. The latter is lightyears ahead; both in terms of its ability and efficiencies.

This is a great tutorial to start learning CSS Grid:
https://gridbyexample.com/learn/

If you are more of a visual learner, this YouTube channel from Jen Simmons at Mozilla has you covered:

CSS Grid is addictive. You’ll build something with it and then before long you’ll be like me and building everything with it!

If you have general questions about CSS Grid, then feel free to ask them on these forums. I’m in the process of training-up some work colleagues on the basic principles of CSS Grid.

4 Likes
5

Mozilla Firefox sponsored this complete free video course on CSS Grid:

And of course CSS Tricks also has a guide/cheat sheet:

I think you are talking about is the concept of the grid in a webpage layout not the CSS grid specification itself. I don’t think the “majority of Weavers” would have any better luck understanding CSS Flexbox, floats and clearfix, CSS tables or most of the underlying technology used to make the magic of RapidWeaver happen.

2 Likes