Greetings,

I've been involved in a project to move away from Wordpress and setup a responsive static website. I had started this endeavor in late 2017 with "responsive site designer" using a theme I believe was called "Technologic". I move forward when "site designer V3" came along, and continued my efforts using this previous theme from the past. I wanted to keep the header and navigation bar which I believe is solely "flex" from the 2.? version. I struggled along with my page's body using flex, and never got my page to look and act the way I wanted it to. At this point I started the process of making a simple page without this theme's header and navigation bar using the "grid" method. Thanks to the holy grail video, I was able to understand and could create a simple static html page to look as I planned it.

My problem now seems to be that I can't merge my "grid body" with the "flex header nav bar" and have it come out without overlap problems. Can we mix flex and grid in the same project or does it have to be all grid and or all flex?
The following url shows a snap shot of my overlap. https://www.us24ever.org/coffee-forum/Site-Designer-Forum8-3-2018-4.16.24%20PM.png
thanks,

Jerry

Yes, flex and grid can live side by side. I would recomend using flex for fallback mode, and then create a display grid feature query for grid.

You can create a full page layout using grid like "the holy grail". You can also just apply grid to sections where it offers a enhancement to your fallback flex mode.

Many of us are still learning so getting feed back is going to be slim. There are so many other features available in Site Designer 3 that I think are so much more important than grid. I have given myself no time limit to bring grid into the picture yet, but really cool things are making there way to the net demonstrating the enormous power of grid.

I would recommend using flex in fallback mode, and then bring in grid later. Just my honest opinion.

I will also say I think the Holy Grail Layout is a not a fair example of what Grid is used for. I read somewhere where the Holy Grail Layout was from way back in the bulletin board days where you loaded just one page at 2400 baud and needed the menu and advertising, footer, header, and body all on one page. I mean, I dont even remember scrolling back in my day. I was lucky to wait 15 minutes and finally see the page appear.

Today I still think rows, and rows with columns, and more rows are still the norm so Flex is not going anywhere. Its all still available, even the new Foundation X Y Grid is a option in Site Designer 3 if you look in your settings.

So a lot to learn.....have fun !

Twinstream, thanks for the feedback and advice. I will attempt doing as you suggested; "using flex for fallback mode, and then create a display grid feature query for grid". It appears to me after watching the holy grail video example that all the 5 layout sections are children of 1 main container or grid parent. At present, my project has more than 1 grid parent container. I'll keep plugging at this till I figure it out. again Twinstream thanks.

The only problem with using flex as fallback first is IE, that has a problem with flexing for some things, so if your site gets a lot of visitors that use IE its best to use fallback first without flex, then change to "Display Flex" that will then cater for the browsers that can recognise & render flex. If however you don't get a lot of visitors using IE then you can decide if it's worth the extra effort.

As Twinstream says flexing will be around for years & years to come.

IE11 unfortunately does not understand @support feature queries though either. Skips right over them so all your design settings would have to be done in fallback mode.....starts getting a little complicated. I think this is a good discussion to have though. In fact, I am leaning to returning to vanilla mobile up just because most all the components in Bootstrap 4 and Foundation......are built using flex.

I am also still in the learning curve,,

I do not, however, bring in my old sites used with RTSDv2.5 and try to update them/or alter them to fit SDv3
I start right from scratch,
It is a piece of cake really to start with fallback first, get the design /layout working (even importing RFF components works fine with not a lot of teeaking) then switch to "Display Flex" and just flex wherever it is needed to help make the design/layout look better on those browsers that can recognize it.

Obviously we are all not the same & some might work differently to others, but the way I have started to do it suits me and doesn't take that much extra effort. The only thing I keep asking myself is why do I need to bother with the grid in the immediate future,(maybe in the future before I hang up my boots again I will use it) because again like Twinsream said, flexing rows/columns will be around for a long time, well after I have dropped off the mortal coil.

The way I see it I would prefer to attack the issue of ie 10 and ie 11 with a custom css stylesheet. With the following code you can change anything you want in these browsers...

This lets me stay in fallback mode and not have to worry about toggling between display fallback and display flex.

Also something that has not been discussed is the lack of support for Edge (<=15) using the full grid spec. If you use the feature query display:grid you will eliminate ie10 and ie 11 because they do not understand a @supports feature query and that is a good thing because they do not support the full grid spec. But Edge (<=15) does understand @supports however it does NOT support the full grid spec. It does not understand the grid placement auto naming of areas, just line-based. So technically one should in my opinion use a support query grid-area: auto instead. That would eliminate Edge (<-15) browsers also so you only have browsers that support the full grid spec (includes Edge 16).

Reading this discussion with interest and a lot of ???
So far I haven't started messing with grid. And I have not been messing with the options under Supports queries either. I leave it as it is where it is saying support for older browsers (like IE11), and I don't set anything in the lower field. So far it seems that the pages/sites I produce are displaying ok, also in IE11.
I do use a fair amount of flex, though. Apparently IE11 can understand most of it, but not all. I notice e.g. that if you view in IE11 this component that I have in my library: http://www.horgenhonning.net/sharing/v- … index.html (which was made with RSD2.5), it doesn't look good, but the rest of them seem kind of OK.

So, my heap of ???
Do I approach SDv3 in a wrong way?
Should I change the default settings in Support queries, and if so, to what?
Is it possible to have the default settings throughout the first bit, before the first breakpoint, and then change?
Should I avoid flex positioning before the first breakpoint?
When speaking of 'first breakpoint' I mean in 'mobile first' obviously.

I don't think this is sufficiently well explained in the support articles I have read (unless there is something I haven't found), and without knowing the answers to my questions, it is kind of holding me back.

Here is an example of using "IE 10 and IE 11 targeting css code" to update Ingers card example for those browsers. Not perfect but keeps the flex setting in fallback for the browsers that support the full flex spec and gives the IE user at least something close.

As Wayan has indicated, many personal approaches are available and that is one of the great things about Coffeecups SD3 its design power and flexibility.

I am not using any support queries. Just fallback mode.

Thanks, Twinstream! That was very useful. I opened the original file in RSD2.5 and popped the styling in there, as this was a thing I originalloy created over a year ago. I have updated the library and added a credit for you!