Community Expert

Question

CSS Grid Changes EVERYTHING - Amazing Presentation

Forum|Forum|8 years ago
August 3, 2017
6 replies
3439 views

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.

This topic has been closed for replies.

john stephanites

Known Participant

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

I'm gonna try and check this out

john stephanites

Known Participant

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

Legend

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.

O

osgood_

Legend

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

Known Participant

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!

O

osgood_

Legend

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

Known Participant

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

Author

Community Expert

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.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

O

osgood_

Legend

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'..

ALsp

Legend

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

Author

Community Expert

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

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded