Source update and new videos

1

Hi All,

Have pushed out another update to Source and the Addon Pack (v1.2.1) with some nice little usability tweaks in it.

I won’t bore you with all of the details (full release notes here) but worth mentioning that if you are using a Source Nav stack and have the a CTA/button option selected then the content of this will have been (magically) shifted into the new equivalent option for mobile. To add it back you need to enable the CTA for mobile and then simply drag the content back to the desktop drop area. Apologies for any inconvenience with this!

I am also finally getting around to updating my Knowledge Base site and am in the process of recording some more videos. Here are a couple of ones I’ve recorded this morning that show some cool things that you can do with the Grid Plus stack:

Creating a full page layout with Grid Plus

Displaying Grid Item content in a row

Container Base overview

Cheers,
Stuart

11 Likes
2

Some really useful stuff in this update.

1 Like
3

Yes, I am really impressed with how powerful these stacks have become.
Great videos!

1 Like
4

Anyone new to Source or anyone curious about what Source can do should watch those 3 short videos. There is plenty of really powerful stuff there that can’t be done elsewhere in RW.

@habitualshaker Your videos have set a new standard for RW. Short, clear and easy to follow.

1 Like
5

I’m sure I saw it somewhere, but I don’t remember where… Where can I see the various units (and when/why you’d use them) that you use for grids? I’ve seen ‘fr’ for example, in your templates

6

There’s some info in the Knowledge Base page for Grid Plus (though I should add some more): https://knowledge.shakingthehabitual.com/article/11-source-grid-plus

You are best just searching Google though for CSS Grid and see the examples etc from that. Grid Plus lets you do pretty much everything with CSS Grid with the exception of ‘Template areas’ - as I think that’s more trouble than it’s worth and the same results can be had just by spanning items.

Here’s a good intro to CSS Grid: https://mozilladevelopers.github.io/playground/css-grid

Edit: Also, the Welcome to Source project file has some examples.

3 Likes
7

Thanks for that link, that’ll be super helpful

8

If you are using the Grid Plus then understanding the template option is key to understanding how powerful the Grid Plus is. I found a good way to get to grips with templates is to build simple web layout structures like a 2 col, 3 col, a sidebar layout and a Bootstrap Media type layout. With these familiar layouts the template structure becomes easy to understand. Also knowing the 1fr is short for 1 Fraction is helpful to know.

2 Likes
10

If you know enough about HTML and CSS to code a basic page, and you want to learn about CSS grid, then you should check out Wes Bos’s video course. It’s free and was paid for by Mozilla.

Wes also has a free course on Flexbox

I don’t know how much a total none- coder would get out of it but I don’t think you need to be coding your sites by hand to get a lot of useful information from the courses.

3 Likes