CSS Grid or Bootstrap 4: What should I be learning now?

Nancy OShea​

I was looking at the support stats for css variable, calc() and a number of other css specs in relation to another discussion, and found that many of the css specs that are stable but not widely though usable by many, are as well, (sometimes better) supported than css grids, so much of css that is/has been ignored is now I think also usable along with css grids, as an alternative to using bootstrap 4.

What I think is missing in the Adobe world is somewhere we can get or post articles, information and/or examples regarding css, (plus other specs). We used to have the developer network, css advisor and the Adobe web platform, all of which are no longer relevant, or have been dropped completely.

As the presenter in the 1st video you posted says, "core techs will always win", but over the last few years very little about subjects such as css grids and the newer core techs is available that is relevant to the web developer, as everything I can find only ever mentions the final specs being used, and never how to create fallback, even when that fallback is simply adding the code for an older version of the specs.

Just came across this comment -

1. secretboot

   I have a bootstrap. Simple web pages are made with bootstrap. I’m not a designer. Do you really need to learn CSS grid layout? Who needs a grid layout? Who needs a bootstrap?

   March 1st, 2018 at 22:07
   1. Josh Marinacci

      With CSS grid there is much less need for bootstrap. You can build complex layouts with just a very small amount of code.

      March 2nd, 2018 at 11:38

In -

https://hacks.mozilla.org/2018/02/css-grid-for-ui-layouts/

Whilst I do not agree with Josh's comments in the article regarding flexbox, I did think the comment relevant to the discussion, and the article possibly helpfull.

If you use Bootstrap's previous versions, especially within DW, learning the ins and outs of the changes under Bootstrap 4 is going to be worthwhile and probably not all that difficult.

If you don't use frameworks, and understand html and css, start learning CSS Grid. It "feels wrong" at first compared to other css usage, but after you get the hang of it, it going back to floats, padding and margin based layouts seems like you're intentionally kneecapping yourself.

For my sites, my viewers just aren't ready for grid yet. I have far too many in browser versions that either don't support grid at all, or require rewriting the code with the older spec methods. I despise writing long-winded fall backs and IE-only code, so I can't quite pull the trigger on CSS Grids. I want to write code for one website, not 2 or 3 based on the browser being used (I thought that time was supposed be be over with anyway?).

I know how to work with the method, so when the time comes (once the non-supporting browser viewership hits the low single-digit percentages for my sites), I will gleefully switch over and never look back.

We are getting away from Nancys question again.

I know my previous post was not strictly what Nancy was asking, but when it comes to Dw, Dw for me now screams "use bootstrap".

css grids, is still not well enough supported for the average coder to be able to use, unless they have been experimenting with it for some time, (just as flexbox was not). Fallback, even a flexbox based one requires the coder to think about the html structure before using, so templates are a no for most.

I think that will change in 1-2 years though, but only if enough tutorials about using css grids with fallback are produced. I also think if Dw is to change, (by some miracle) and support css grids then not just us but the Dw team must change its attitude to newer specs, and what is required.

Edit - I am NOT getting at you Ben, but at the attitude of those who are trying to hold web development back.

I'm going to expand on your question Nancy, hope that is o/k.

What one uses all depends on who you work for, time allowed, financing and most importantly knowledge of specs plus browsers you must support.

If someone does not know the specs and/or is only just learning how to code, or does not know or want to know how to code. Then use a visual tool like Muse, unless it is a personal (learning) project.

If time is very limited and the deciding factor, use a framework, but don't just use a framework because you don't know how to do it any other way.

If you have time, know code and sufficient financing, a custom coded site done correctly will always be the best.

Now to grids vs bootstrap.

The site I worked on was one in which we said what browser version and devices could be used to access the site, (not as controlled in the training section). This meant that at the end of last year we could have used css grids without any problems, had we so desired. The type and size of the site also meant that a framework that delivered 'everthing in one go', (css and js) did not meet our requirerments.

Most large companies or organisations I know, tend not to use frameworks at all, though a few government sites who contract out the public facing section(s) will allow frameworks to be used, but will not have access to the locked areas from those pages.

If the question had been, custom flexbox vs bootstrap 4 -

Then I would go for custom flexbox, but not for someone using Dw.

If you are just starting with web development - then first learn HTML, CSS and some basic pure JavaScript.

When you are advanced enough you can choose whether to use floats, flexbox or css grid. Your decision might not be related to a framework at all.

If you are advanced enough,then you can take advantage of CSS frameworks, so you can speed up your workflow by using and including only the parts of the frameworks you need, customized it the way you like etc. - this is valid for me, this is also valid for many web developers i know, be they freelancers or working in big teams. A CSS framework is nothing more than a bunch of pre-defined classes which you re-use.

https://forums.adobe.com/people/Nancy+OShea  wrote

Hopefully this topic doesn't get hijacked & locked like my other one did .   

[Locked] Bootstrap 3 vs 4: which should I use? Web developers have a lot of choices between libraries, frameworks and core technologies these days.  But if we spend time learning every little thing out there, we won't have time to work on projects.  So what's a developer to do?

Personally right now i'd be learning grid BUT if you've been sucked into using Bootstrap for the last 5+ years you'll probably have to learn html/css first before you can even start learning grid. That's what frameworks do to you, they stifle your ability to adapt quickly to other concepts, which are much better.

Ask yourself this question - Will v4 be the very last version  of Bootstrap or will Bootsrtao attempt to bring some of grid into its core elements and if so how long will it be before it does that, 3/4 years. Bootstrap is not exactly renowned for being on-the-ball when it cones to emerging concepts. Flexbox was being used 2 years prior to it ever seeing the light of day in Bootstrap v4.

Thank you Nancy, it is one of the very few times that I have taken the time to watch videos that are longer than 6-7 mins. This says a lot for the content.

Video 1:

Basically agree with all that was said and when I apply the principles to myself, I need time saving workflows (read: frameworks).

Video 2:

Over the past year, I have dabbled around using CSS Grid (FireFox and Chrome under a flag) just to get used to it. My main approach was to use Grid for the layout of the page and Flex for individual elements that did not require two dimensions. This allowed me to create an easy fallback using Flex for those browsers that do not recognise Grid. An all Grid presentation made me very excited until I came back to reality, not everybody uses a Grid aware browser and may not for a few years to come.

Edit: Sorry forgot to say the most important part of my reply, which is to say, it depends on your personal situation. If you are like me, and have a tight schedule, you need to learn what is applicable today and not what will come in the future.