CSS Grid Changes EVERYTHING - Amazing Presentation

[BenPleysier]

Please have a look at this presentation CSS Grid Changes EVERYTHING - Amazing Presentation - YouTube

TL;DV All we have done to date in layouts are based on hacks, from tables to floats to flexbox. CSS Grids, thanks in part to IE10, is the solution that we have all been waiting on and we can use it now. See CSS Grid Layout - CSS | MDN or Google the subject.

[ALsp]

Hi Ben,

Nice that us old ducks can still get excited .

Kudos to Microsoft for playing a large role in the original spec, launched about 5 years ago. The problem is that IE 10 and 11, and Edge still support the Microsoft version of Grid. Edge is due to be updated this year to support Grid, but IE 10 and 11 are likely out of the loop.

Tables and floats are hacks as they were never intended to drive a layout. Flexbox, however, is not a hack and I think it's going to have to suffice for another year or two as the best solution for a responsive, adaptive layout.

One thing I noted in looking at the video is that the narrator claims the only way to rearrange sections, as he did, without changing markup structure, is with CSS Grid. I'm afraid that's not true. Flexbox has that capability too. On the following page, check the heading "Changing Column Order via Media Query":

PVII Harmony: User Class

[BenPleysier]

Thanks for the response (p)Al.

I have been doing a few experiments, thanks to Rachel Andrew, using display:flex interchanged with display:grid. As you have pointed out when telling us about PVIIHarmony Flexbox for Dreamweaver, Flexbox can be used on all modern browsers, unlike CSS Grid which only covers about 70% of the browsers - soon to be joined by Edge. So when I have

.header,

.footer {

  grid-column: 1 / -1;

}

I loose 30% of my viewing customers. (not really, because in this case the row is full width, but just for illustration purposes)

To get the 30% of the audience back in the fold, I add into this a Flexbox as in

.header,

.footer {

  margin-left: 5px;

  margin-right: 5px;

  flex: 0 1 100%;

  grid-column: 1 / -1;

}

In the example, browsers that recognise Grid will override Flex. However, I have had to add a left and right margin for Flex that I do not require for Grid. For that we use the feature query @support as follows

@supports (display: grid) {

  .wrapper > * {

    margin: 0;

  }

}

All done, and I can start using CSS Grid. Have a look at my Rachel Andrew inspired example and the article from Rachel

[osgood_]

BenPleysier  wrote

Please have a look at this presentation CSS Grid Changes EVERYTHING - Amazing Presentation - YouTube

TL;DV All we have done to date in layouts are based on hacks, from tables to floats to flexbox. CSS Grids, thanks in part to IE10, is the solution that we have all been waiting on and we can use it now. See CSS Grid Layout - CSS | MDN or Google the subject.

Saw that youtube presentation a few days ago, it's coming, fast. I'm concentrating my efforts on getting up to speed. Not sure which workflow is going to be most used mainstream, I'm going for 'grid areas'..

[john_stephanites]

Hey guys I was looking for some help with DW and Git and somehow found this post so I will comment. It does change everything. I have been a big proponent of Foundation for Sites and becasue of Grid (at least that's what I think they are the second largest framework out there) they have stopped developement on it for the forseeable future. Laid off their guys/gals that dealt with the framework. I was surprised becasue all of the updatiing happening these days but I guess they see the writing on the wall as well. I was checking some sites about Grid and I found this funny. This is a site all about Grid and doesn't use it! http://learncssgrid.com/#grid-container  They use ye old float hacks! LOL! Pretty funny I thought but then I am a weird mofo.

[BenPleysier]

They use ye old float hacks!

Hack? Yes, but there is nothing 'old' using float as, it is one of the many layout tools that we can use like

• inline-block and text-align
• tables (table-row, table-cell)
• blocks and floating
• flex
• grid

Prior to me using Foundation and Bootstrap (pre flex and grid), I used tables (CSS-table) and inline-blocks for my layouts. Then came blocks and floats which seemed to make sense at the time but required the clear-float hack to function properly. Now we have grid and flex which is a return to table and inline-block or, in other words, 2 dimensional combined with single dimensional.

[BenPleysier]

John,

How are you faring with Git? Just to let you know, I am having great fun, Git has opened so many possibilities from code sharing to version control. David Powers has, in his usual style, created a great tutorial on the subject. See here Dreamweaver: Working with Git Version Control

[john_stephanites]

I got it working, thank you Ben. I use VSC and their interface for Git is awesome. I had it installed on my machine but the path was wrong from DW. I guess on a Mac it's not looking for /usr/bin/git but something different.

My focus lately has been Foundation so DW has been sitting idle. When I found out about Foundation being more or less abandoned I figured I'd try Grid  because I think that is why and it was an opportunity to use DW again but I guess not. Oh well maybe they will catch up one day but they have a lot of ground to cover so I doubt it.

The best thing about Github I am liking right now is Github pages. You can get a simple blog up with your own domain for free and push your posts from the command line. Pretty cool!

[osgood_]

https://forums.adobe.com/people/john+stephanites  wrote

When I found out about Foundation being more or less abandoned

Seriously can you provide a 'genuine' reference where you read that? I'll put the celebration on hold

[john_stephanites]

From KBall a guy who worked on Foundation. Two possibilities - laid off and there is friction so he is disgruntled, or what he said is correct. Zurb is focusing on there design business and Foundation has laid off everyone. It has been abandoned to open source and the community which he said he would continue to push to when he had time.

  Surprising since they have been really pushing things on their blog. Codepen and YouTube.

One note is that he doesn't seem to be the disgruntled type but I don't know him personally.

[pziecina]

https://forums.adobe.com/people/john+stephanites  wrote

From KBall a guy who worked on Foundation. Two possibilities - laid off and there is friction so he is disgruntled, or what he said is correct. Zurb is focusing on there design business and Foundation has laid off everyone. It has been abandoned to open source and the community which he said he would continue to push to when he had time.

True that foundation is now an open source project, but as far as being abandoned, no more than any other once popular open source project.

Most companies are looking at ways to cut costs, and anything that does not bring in a profit is the first to go, so a free framework would be top of anyones list who had to make such decissions.

If you read the foundation pdf, (requires personal info to download) they even admit, (reading various section comments) that trying to keep foundation 'current' and 'worthwhile', with new layout methods such as flexbox and grids being so easy to use without a framework, is becoming less worthwhile for new users, and that it is no longer a 'value added product' for zurb's customers.

It's like Dw itself trying to compete with open source code editors, whilst only including open source features. Sooner or later anyone competent in using code who can manage without the file managment features Dw provides, will ask themselves if it is worth the £240.00+ per year subscription.

Don't get me wrong, I would like to think Dw has a future, but over the last few versions i cannot see just where or for whom that future is.

[osgood_]

pziecina  wrote

https://forums.adobe.com/people/john+stephanites   wrote

From KBall a guy who worked on Foundation. Two possibilities - laid off and there is friction so he is disgruntled, or what he said is correct. Zurb is focusing on there design business and Foundation has laid off everyone. It has been abandoned to open source and the community which he said he would continue to push to when he had time.

True that foundation is now an open source project, but as far as being abandoned, no more than any other once popular open source project.

Its true though that once something goes open-source it's usually the death-knell. It might take a few years to die but its on the way out as open-source provides no income and a lot of contributors never update their plugins or code once it becomes obsolete. I think its dangerous once a product goes open-source because it become adrift and many developers jump ship beacuse of lack of actvity. Take Sublime for instance, its open source but has had periods of inactivity. Many have now jumped to Atom and VS Code because at the moment, although both are open source they are being actively developed whereas a lot of open-source programs have seen their best days.

I would not buy into anything open-source like a framework or product, its a waste of time really. If Atom or VS Code slow and something else arrive developers will jump ship again. Websites eventually look old and people drift away quickly. Foundation is dead if this news is true, hopefully Bootstrap will follow. I doubt there will be a Bootstrap 5. It will be 3 years in the making and abandoned or open-sourced, by then Grid will dominate the layout process.

Here's one happy person at least. The writing is on the wall.

[john_stephanites]

I for one am a VSC fan. DW has seen better days. I am not sure what their idea is with it. As for Foundation "Good Ridance?" I am actually bummed. Never was a fan of Bootstrap and if you are going to use a framework Foundation had the right tactic. Go all in but be able at the same time to easily make it your own.

[pziecina]

I don't really want to get into a discussion about grids, because i can see it following the same pattern as discussions about flexbox.

The problem for grids will be the same as those we had for flexbox, in that many will simply not 'get it', so will say it should not be used, and floats work anyway, are much more reliable and better than any new method. What those people tend to forget is all the problems people had when css layouts became a real possibility for layouts, (IE5/6).

We need people to use flexbox and now grids, otherwise solutions to layout problems will never become common knowledge. Yes i am among those who work in isolation, (except for the people i work with) and no longer post 'solution' for others to follow, but I'm old and cannot be bothered with all the hassle, disagreements and stupid comments.

I would like to be a 'fly on the wall' to CAB discussions regarding grids though, as I'm certain i would recognize most as being the same as discussions regarding flexbox, (some things never change).

[osgood_]

pziecina  wrote

I don't really want to get into a discussion about grids, because i can see it following the same pattern as discussions about flexbox.

The problem for grids will be the same as those we had for flexbox, in that many will simply not 'get it', so will say it should not be used, and floats work anyway, are much more reliable and better than any new method. What those people tend to forget is all the problems people had when css layouts became a real possibility for layouts, (IE5/6).

We need people to use flexbox and now grids, otherwise solutions to layout problems will never become common knowledge. Yes i am among those who work in isolation, (except for the people i work with) and no longer post 'solution' for others to follow, but I'm old and cannot be bothered with all the hassle, disagreements and stupid comments.

I don't think there will be an option to ignore progress. Yes in the amatuer world anything goes and newer solutions will be ignored for as long as possible because no-one likes change but eventually change will win the day as programmes will need to include the ability to build with new solutions or they will die, simple. I have no fear, if you can code the adoption process is far easier and less painful.

As I said the other day - there are a lot of new modern web-development programs which include a lot of junk and overkill, but missing many of the basics - not needed if you can code, just use notepad or similar, they are just as good really and 4 times as fast.

[john_stephanites]

Sound reasonabl. Thanks! Found this Online Open Foundation Chat - Responsive Navigation - ZURB Foundation (Campbell, CA) - Meetup

I'm gonna try and check this out