Hi All,
This is a place to post any feend back on Summer Nights 2 tutorial. For some reason this never got published when it was first created!
Cheers,
Bob
Hi, I was following along with the tutorial, then… sorted of went tangential with it,
…horses you see, but I was following along, and I laid the grid out using This way with repeats.
so I see the grid overlay with 12 cols, but in the GRID builder tool
I just have one block!
A bit tricky to designate named areas.
I will redo it all again properly for fun (thanks, great fun tutorial, when I get it to work)
But does that grid build tool view
and the overlay comparison generated by PG look right/compatible>?
and by that I mean… should I see 12 columns in the grid builder… or is it rendered correctly in it, due to my repeat … code?
And I did actually finally finish this tutorial!
Great thanks!! Took me 5 days… Learnt a lot, broke things, figured out my custom layout breaks Pinegrow Visual styles editor and refreshed my PG interface memory.
Fab! thanks.
I also learnt some CSS Grid principles.
But then I of course did it totally different and didnt get the expected results in the Grid Builder tool.
hence this question,
… BUT,
Just so you know, I have been taking this project terribly seriously… Ive even PLANNED some of it.
i had specialists in,
A design team…
LOOK!
Ok, so the team did mostly consist of some drunken monkeys, sheep and myself but still…
I also want to put the timelines tutorial in on this project too (the Monkeys haven’t quite finished the design of that part yet, they ran out of Vodka)
BUt just asking… is it possible to ALSO do a timeline Horizontally?
Then… for the …in the future… advanced stuff,
id like to be able to have a sideways or horizontal scrolling timeline that , you can ZOOM in and out on>
so pull back so that you can see several years/ months ,whatever the units of scale.
… so would that interaction be in the land of Javascript…
Or our PG Interactions? (which Ive not actually used yet?)
or something else?
1 Like
Hey @schpengle,
So, this looks like an area where we might be able to improve the visual aspect of the CSS Grid inspector. To name areas like that you need to manually add in a grid-template-areas property. So, for something like grid-template-columns: repeat(12, 1fr); which could be added through the visual editor like you did, you would have manually add a grid-template-areas to the stylesheet. Something like:
"pic1 pic1 headline headline headline headline headline headline headline headline pic2 pic2"
"square1 square1 square1 square2 square2 square2 square3 square3 square3 square4 square4 square4"
You get the idea. As far as I can make out - might be totally wrong - repeat was fleshed out later in the candidate recommendation. Originally, for named areas you would have been required to do the ASCII art thing and write-out all the fractions. Nonetheless, Pinegrow only shows the first named in the visual editor. If you click on a style attribute, however, you will see all of the named area. So you can target specific named areas through the context menu.
So in this case I set-up with a repeat and then assigned named areas manually.
You can see that the second row has three sections of
sd and four sections of main. If we move our Summers Night image to the second row and open up the grid context menu we can see that we have options to snap it to sd or main.
Anyway, this is something that we should se if we can improve.
As to the sideways timeline. The basics of it can easily be done with CSS. Set the section to something ginormous (600vw?), add a display flex and select flex-direction: row, change up a bit of styling and then Bob’s your Uncle. ( 
See what I did there?). For the zoom - maybe have each section collapsible? Otherwise it is JavaScript fun.
Cheers,
Bob
1 Like
Brilliant!
Thanks for taking the time to creat such a totally BobTastic reply (yep! I saw what happened back there 
)
And will check it out and redo after …
This GLORIOUSLY SUNNY day…with the horses.
In Wales… its been so rare as of late 
So later this evening.
And I thought of
‘’‘Flex-direction’’’ after… good. Something else confirmed and to check out.
Thanks a lot,
ttfn, clippy clop!
Well, i went to have a quick look… but
I’ll just go file another bug report.
Its to do with class names appearing wrong on the Visual css grid/attributes of the elements.
Off to youtube, back shortly