Blocs for Mac 5.1.3 Beta Build 1 📢

@Norm could you do a small instructional or an extended academy video covering css grid in blocs?

1 Like

We could but like I said it’s not likely to go very deep in a video that last a few minutes. CSS Grid training could be potentially hours to get a full understanding.

Also consider pretty much all online css grid training/knowledge from anywhere on the web can potentially be used in Blocs.

It’s likely our approach would be, “we expect you to have a basic understanding of how css grid works, this video will explain how to implement that knowledge in the Blocs design environment”.

3 Likes

I’d be very happy with

“we expect you to have a basic understanding of how css grid works, this video will explain how to implement that knowledge in the Blocs design environment”.

I have a fair (not necessarily deep or in any way perfect) understanding of how Grid works and can do it with hand written stuff but find it tricky to coerce Blocs into doing it!

1 Like

CSS Grid is listed as one of the major features on the Blocs home pages for both desktop and iPad versions, so it seems out of place not to have a single word of documentation for how this works.

Up to now, it has received very little attention on the forum, which I suspect is partly because few have managed to make any progress or even seen working examples showing what could be done with Blocs, so most have fallen back on old ways.

I would argue CSS Grid needs at least as much documentation as that given to working with columns and rows. As @PeteSharp said:

I gather a frequently mentioned competing product will soon ship with Tailwind CSS, together with a set of CSS Grid elements that will be simple and effective. I think we all want Blocs to stay ahead on these things.

2 Likes

Using ‘undo’ and ‘redo’ within the code widget makes Blocs crash. :bomb:

Crash report:

Exception Name: NSInvalidArgumentException
Description: -[__NSCFString substringWithRange:]: Range {142, 2} out of bounds; string length 17
User Info: (null)

0   CoreFoundation                      0x00007ff81330b18a __exceptionPreprocess + 242
1   libobjc.A.dylib                     0x00007ff812e3142b objc_exception_throw + 48
2   CoreFoundation                      0x00007ff8133e53ca -[__NSCFString characterAtIndex:].cold.1 + 0
3   CoreFoundation                      0x00007ff81328273a -[NSConstantDictionary objectForKey:] + 0
4   AppKit                              0x00007ff81652c913 -[NSTextStorage(NSUndo) _undoRedoAttributedSubstringFromRange:] + 144
5   AppKit                              0x00007ff816b787eb -[NSUndoTyping undoRedo:] + 142
6   Foundation                          0x00007ff8141df677 -[_NSUndoStack popAndInvoke] + 186
7   Foundation                          0x00007ff8141df3d7 -[NSUndoManager undoNestedGroup] + 299
8   AppKit                              0x00007ff81652042c -[NSApplication(NSResponder) sendAction:to:from:] + 323
9   AppKit                              0x00007ff81661006c -[NSMenuItem _corePerformAction] + 413
10  AppKit                              0x00007ff81660fd79 -[NSCarbonMenuImpl performActionWithHighlightingForItemAtIndex:] + 142
11  AppKit                              0x00007ff816658113 -[NSMenu performActionForItemAtIndex:] + 113
12  AppKit                              0x00007ff816658099 -[NSMenu _internalPerformActionForItemAtIndex:] + 82
13  AppKit                              0x00007ff816657ee1 -[NSCarbonMenuImpl _carbonCommandProcessEvent:handlerCallRef:] + 101
14  AppKit                              0x00007ff8165f4a84 NSSLMMenuEventHandler + 990
15  HIToolbox                           0x00007ff81ccecd3f _ZL23DispatchEventToHandlersP14EventTargetRecP14OpaqueEventRefP14HandlerCallRec + 1381
16  HIToolbox                           0x00007ff81ccec188 _ZL30SendEventToEventTargetInternalP14OpaqueEventRefP20OpaqueEventTargetRefP14HandlerCallRec + 333
17  HIToolbox                           0x00007ff81cd00ce5 SendEventToEventTarget + 39
18  HIToolbox                           0x00007ff81cd5c95b _ZL18SendHICommandEventjPK9HICommandjjhPKvP20OpaqueEventTargetRefS5_PP14OpaqueEventRef + 361
19  HIToolbox                           0x00007ff81cd80d4d SendMenuCommandWithContextAndModifiers + 46
20  HIToolbox                           0x00007ff81cd80cf1 SendMenuItemSelectedEvent + 344
21  HIToolbox                           0x00007ff81cd80b39 _ZL19FinishMenuSelectionP13SelectionDataP10MenuResultS2_ + 96
22  HIToolbox                           0x00007ff81cd8154c _ZL14MenuSelectCoreP8MenuData5PointdjPP13OpaqueMenuRefPt + 625
23  HIToolbox                           0x00007ff81cd81241 _HandleMenuSelection2 + 459
24  AppKit                              0x00007ff8164bc535 _NSHandleCarbonMenuEvent + 215
25  AppKit                              0x00007ff8164bc3a2 _DPSEventHandledByCarbon + 54
26  AppKit                              0x00007ff81632d7af -[NSApplication(NSEvent) _nextEventMatchingEventMask:untilDate:inMode:dequeue:] + 2919
27  AppKit                              0x00007ff81631f788 -[NSApplication run] + 586
28  AppKit                              0x00007ff8162f39a1 NSApplicationMain + 817
29  dyld                                0x00007ff812e5e41f start + 1903
1 Like

We have just published this article on CSS Grid on the Blocs knowledge base. It’s intended for beginners with CSS Grid, so covers all of the basics and also includes some layout examples along with a sample project.

It covers moving grid children horizontally and vertically which is what I think your original question was regarding.

Anyway, Blocs now has some docs on CSS Grid :sweat_smile:

We also have plans for a set of videos, hopefully before the end of the year.

7 Likes

This is a good start. As you said it is a beginner’s view, though it could use more work on terminology definitions. I need to play around with this more. I use grid almost exclusively when building my websites. However, frankly I gave up on Blocs because this implementation of CSS GRID just wasn’t flexible enough to justify learning how it works in Blocs. There are A LOT of capabilities within CSS GRID. I can only imagine building a UI into a WYSIWYG builder must be just this side of a nightmare. Bottom line thanks for the start! This will no doubt be helpful.

1 Like

I’d be interested to know which terminology needs work IYO, by all means share feedback :grinning:

To start… a better explanation of (fr) units and how they are manipulated. I’ll put a list together that helped me when I started.

In the mean time, this website has been really helpful to me.

Free learning:
https://gridbyexample.com/learn/

This is a paid tutorial but really good:

@Norm are explicit responsive grids with media queries possible in Blocs? Please see example here: Redefining Grid Areas with Media Queries

Nice work there @Norm.

I think there is enough information in the article to give a good overview.

People can look further for definitions of things like fr if they want too. Heck most people don’t know what rem and em units are. The article keeps focused :grin:

@Monark is referring to grid-areas / grid-template-areas
Which is a pretty quick way of building a grid layout. It probably would need a visual editor where you can name areas to make it visually easier for users. Maybe next week @Norm :grimacing::joy:

4 Likes

@Norm, I discovered when using nested pages and clean URLS that forms fail.

Or it least it seems like that. Not using clean URLs the form works fine. :man_shrugging:

This works
mydomain/contact/

This fails
mydomain/company/reviews

This has been ongoing with the stable build.

Ok got it, I’ll take a look.

1 Like

I expect Monarch is referring to col & row templates. These are the bread and butter of CSS Grid.

On a basic level CSS Grid can create pretty traditional grids that can break out of the colum world, but CSS Grid can do so much more and add position of content on top of content, offset overlapping of content and replace the entire page layout. In addition you can put grids inside grids, etc…

Where Blocs still trips up, is that if you create a template with a comma such as minmax(20px, auto) 1fr 1fr; the edit view treats the content after the comma as the next column.

Also I notice that the Template boxes are too small to sview anything other than short templates

4 Likes

Any chance you could please share a screenshot of what you would expect vs what we currently get with the current system when using the code minmax(20px, auto) 1fr 1fr;?

The labels at the top of the columns are wrong. Maybe the comma used in the template triggers this.

The grid looks correct but the col labels are not correct. Also note that as the cols labels grow, there soon comes a point where the labels don’t have enough space for anything other than short simple template values such as 1fr. E.g. the label minmax(20px, auto) doesn’t fit.

I would be favour of an option to turn the col and row labels off or automatically turn them off when a template is used. Actually, the option perhaps should be to turn off all labels, draggable lines and handles when a template is used because they no longer make sense or apply. E.g. if you set a col to be minmax(20px, auto) and then drag that col handle, what should then be displayed in the label? When you use a template you don’t actually need anything other than the blank edit mode grid.

Thanks thats super helpful.

So the grid renders correctly, but the labels are misleading in the surrounding UI?

Yes correct.

Also, they don’t have enough room when using anything other than a small number of simple columns and would work better if optionally removed.

I’ll continue to improve and make these controls more flexible and get them to display the correct info in scenarios such as this. However, in beta 2 of V5.1.3 I have added a new position control option for grid which means you can build your own grids from scratch (without the Bric).

Grids built from scratch, will not display the visual controls, here’s an example.

new-grid-controls

5 Likes

That sounds like a really good solution. Looking forward to using this.

2 Likes