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

[Nancy OShea]

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? 

Video blogger  Stefan Mischook had this to say (15 minutes).

CSS Grid Crash Course by Traversy Media (27 minutes).

Nancy

[BenPleysier]

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.

[Nancy OShea]

Let's just say I'm not rushing to migrate Bootstrap 3 projects over to Bootstrap 4 or CSS Grid yet.  But when the time comes, I'll be ready for it.

[osgood_]

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.

[Teodor K]

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.

[osgood_]

https://forums.adobe.com/people/Teodor+K  wrote

A CSS framework is nothing more than a bunch of pre-defined classes which you re-use.

True, then if youre a real web-developer you have to reverse enginner most of the properties of those classes to make your design look anywhere near acceptable and like what you require, pointless.

Just how difficult is it to put a responsive grid together......I guess for some considerably difficult...that's why these frameworks exist. Too bad too sad.

[Teodor K]

As i explained many times before - there is no need for me to reinvent the wheel, when i have a ready to use grid - why should i go and invent my own? Just to put different class names doing the same thing?

The same way i've seen you many times offering solutions based on jquery, which can be done entirely in javascript - why are you doing that? Because you are used to how easier and faster it is to include the jquery library(framework) and call a function defined there, instead of writing it in pure javascript (no need of reinventing the wheel).

And that is something i am not doing ... i don't like using jquery for what can be done in pure javascript.

[osgood_]

https://forums.adobe.com/people/Teodor+K  wrote

As i explained many times before - there is no need for me to reinvent the wheel, when i have a ready to use grid - why should i go and invent my own? Just to put different class names doing the same thing?

Youre using classes that actually dont do what you really want, unless your'e saying you never over-ride the Bootstrap default css styles?

https://forums.adobe.com/people/Teodor+K  wrote

The same way i've seen you many times offering solutions based on jquery, which can be done entirely in javascript - why are you doing that? Because you are used to how easier and faster it is to include the jquery library(framework) and call a function defined there, instead of writing it in pure javascript (no need of reinventing the wheel).

And that is something i am not doing ... i don't like using jquery for what can be done in pure javascript.

Everyone knows javascript is not written in a user friendly way. They have been trying to introduce more Jquery friendly approaches in the ES6 version of javascript so is it me at fault or the language?

I would have thought html and css is the core elements every web-developer needs/should know. Javascript/jquery, php etc are just icing on the cake. You cant compare using a library for implemneting additional functionality to something which is not optional.

Although I very much agree.........I would much prefer to write everything in pure javascript its a no brainer. At least Im doing something correct whereas others dont do anything correct or even make an attempt or even admit their inefficiencies

[Teodor K]

osgood_  wrote

Youre using classes that actually dont do what you really want, unless your'e saying you never over-ride the Bootstrap default css styles?

I am using classes which do exactly what i want. How exactrly a class of "col" or "row" or "container" or "col-12" is not doing what i want - they are doing just what i want and i don't need to edit anything related to these classes.

osgood_  wrote

I would have thought html and css is the core elements every web-developer needs/should know. Javascript/jquery, php etc are just icing on the cake. You cant compare using a library for implemneting additional functionality to something which is not optional.

Your comment makes no sense.

I am comparing two frameworks:
1. bootstrap 4 (an HTML/CSS framework) written in HTML and CSS where i reuse classes in HTML

2. jquery (a javascript framework) written in javascript where you reuse functions in HTML

How is that different? Frameworks are all the same in one thing and it does not matter if it is a php framework, js framework, css framework - and it is defining functions/classes easy to reuse.

In my case i use a pre-defined class instead defining a whole CSS rule

In your case you include the whole jquery library just to select $('.yourClass') insitead of just using document.getElementsByClassName("yourClass") and not including anything on the page.

If you find a language "not-user friendly" that is entirely your problem. The same thing you can tell about C# or JAVA ...

This is my last post on this topic as i see it's going to go off-topic, because you know i am right about this and will start throwing some pointless arguments, as you obviously talk against everything you personally don't like.

[osgood_]

https://forums.adobe.com/people/Teodor+K  wrote

osgood_   wrote

Youre using classes that actually dont do what you really want, unless your'e saying you never over-ride the Bootstrap default css styles?

I am using classes which do exactly what i want. How exactrly a class of "col" or "row" or "container" or "col-12" is not doing what i want - they are doing just what i want and i don't need to edit anything related to these classes.

Your just convieniantly using the example of the grid classes rather than the presenation classes for the html elements which come with default padding, margin, coloring, font size, positioning etc. If you use those, as most that use BS do, you will have to reverse engineer the properties, unless of course your the kind of web-developer where one size and one color fits all. Most of those developers will have excess css along with the overide css unless you carefully get rid of all the default styling, which no-one is going to do, because they either do not know how, or are too lazy to do so.

https://forums.adobe.com/people/Teodor+K  wrote

Your comment makes no sense.

I am comparing two frameworks:
1. bootstrap 4 (an HTML/CSS framework) written in HTML and CSS where i reuse classes in HTML

2. jquery (a javascript framework) written in javascript where you reuse functions in HTML

Makes perfect sense. Youre saying its ok NOT to know html and css (your core and base tools for producing a website) and yet in an eralier post you say you should know html and css. Javascript isnt strictly necessary, its nice to have - that's the difference.

https://forums.adobe.com/people/Teodor+K  wrote

If you find a language "not-user friendly" that is entirely your problem. The same thing you can tell about C# or JAVA ...

Obvioulsy not according to those that write javascript specs otherwise why would they be trying to make it more user friendly?

https://forums.adobe.com/people/Teodor+K  wrote

This is my last post on this topic as i see it's going to go off-topic, because you know i am right about this and will start throwing some pointless arguments, as you obviously talk against everything you personally don't like.

Another in denial 'Im always right paddy is thrown when they are challenged'. This folks is coming form a person who is not at all concerned about coding as his company is trying very badly to introduce a bit of software onto the scene which requires you to know no-coding.

I wont even address the poor coding Bootstrap produces because if your a WYSIWYG, clickerty, click kind of developer you would not give a hoot.

[Teodor K]

Ok

[pziecina]

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.

[pziecina]

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.

[Jon Fritz]

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.

[pziecina]

https://forums.adobe.com/people/Jon+Fritz+II  wrote

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 agree that creating fallback for none supporting browsers and more importantly were grids are concerned mobile devices, is not ideal.

But IE10 does not support the final flexbox specs, and requires vendor prefixes for all its flexbox supported properties, (plus vendor specific properties are required). IE10 does support an older spec for css grids, which whilst not as easy to use as grid-templates can be used to produce the same layout with very little extra effort, (bootstrap 4 supports IE10).

If you do not agree with fallback code, then to answer Nancys question you would be saying that css grids, css flexbox and bootstrap 4 should not be used, as all currently require IE specific fallback css?

[Jon Fritz]

For me, neither will be used, probably for about another year or so. It all depends on what the stats of my own sites tell me.

My clients don't require the bleeding-edge, game-changing, completely behind the scenes layout methods they've never heard of, and don't care about, to display their weed trimmer attachments, pressure gauges or wiring harnesses. They tend to have a few major priorities...

1. Faster. (I don't care how fast you get it done, just get it done faster)
     1a. Can you get it done faster? (seriously, that would be cool)
     1b. Could we pay you more to get it done faster?
2. It works as expected on everything we agreed it should work on
3. I'm sure there's a third, but I haven't run into it recently

I've never once had the layout method requested, questioned or even mentioned. It doesn't matter to them.

Not every developer is the same, no two websites get exactly the same traffic, with viewers using identical technologies or devices. Absolute positioning, floats, Grid, Flex, Grid with Flex, old Bootstrap, new Bootstrap... at the end of the day, if everything works as the client expects, it's all a personal choice and matters to very few people involved, if any.

That's the main reason I answered the way I did, to paraphrase: "Bootstrap 4 will likely be better for people used to working with Bootstrap. Grid will likely be better for people used to hand-coding (after some adjustment). On a personal note: I can't use either, for now, because: reasons".

[pziecina]

I was not criticising you choices Jon, as being honest I would tell everyone to stick to float based layouts unless they know their user base. I would also add to that, by saying every developer should look very carefully at their sites users connection speeds. As frameworks of any kind can add considerably to the download time, and not all users are on 20+Mb connections, or even mobile G3.

All I was pointing out is that we are all developing too different requirerments, (as I said in my first post).

Just for those interested though, I looked up the end-of-life for Windows 10, (and IE11) extended support is planned until October 2026 -

https://support.microsoft.com/en-gb/help/13853/windows-lifecycle-fact-sheet

[osgood_]

Everyones getting a little edgy because in this game there is zero direction. You're being pulled all over the place by people who ONLY think this is the best way or that is the best way. I'll be absolutely in peace when I'm out of this because you CANNOT win. All you will do is burn out like I have or drop down dead through stress. Its a shite profession, no 2 ways about that.

[pziecina]

osgood_  wrote

Everyones getting a little edgy because in this game there is zero direction. You're being pulled all over the place by people who ONLY think this is the best way or that is the best way. I'll be absolutely in peace when I'm out of this because you CANNOT win. All you will do is burn out like I have or drop down dead through stress. Its a shite profession, no 2 ways about that.

The main problem with this game is ourselves. We want to use the latest and best, but as we have already so often discussed, there is no software that supports us, and most people do not want to move forward unless the software does everything for them anyway.

Ask yourself how many people both those answering and asking questions in any web development forum or creating and writing tutorials, even mention the concept of user profiling and why it should be done. Flexbox is easy to use, and with a pollyfill can be used in browsers back to ie7, but no one wants to use a pollyfill.

If someone wants to use anything that is not compatible with every browser since IE6 then as I say, use floats. If no vendor prefixes then use floats, if code and personal satisfaction in your work is not important use a template oand/or framework, but on no account should anyone complain, and html4/css2.2 is all one should to learn.

Nancy is asking a very good question to me though, because if you are using bootstrap 4 then with a little effort the use of css grid layouts is a realistic possibility. The only problem I can see in doing so is support for older mobile devices, which is why I think much more discussion is required regarding fallback, or even the use of a pollyfill, for which there are a couple of very good ones.

[osgood_]

At the end of the day who cares, its only web development, not exactly saving lives or contributing anything useful to society.

[pziecina]

osgood_  wrote

At the end of the day who cares, its only web development, not exactly saving lives or contributing anything useful to society.

You have obviously not worked on sites supporting international disaster relief staff, or internation co-operation and development in a specific field, (I did often).

[osgood_]

Not sure you can compare the two really. I have involvement with a rather large animal charity but being on the front line rescuing creatures who are poorly treated or are caught in a disaster zone is rather different to being behind a computer 12 hours a day trying to make a form work.......someones got to do it but for a couple of weeks l havent coded a thing, not really missing it either.........maybe its just my time where lm not particularly inspired with web development for some reason. Ive already off loaded a significant number of web clients.

Its strange because l was hugely passionate but woke up one moring at it wasnt there any longer. Perhaps it will return but it feels quite terminal at this particular moment.

[pziecina]

We are getting off-topic so lets keep this short.

I was not providing a site to promote donations or showing the work of disaster relief, but to support the on-site staff in their efforts, both personal and professional, which also involved providing technical support, and setting up access to people with specialists knowledge, (via a site using satellite connected rt video/audio/text) to remotely assist them. Promoting a charity or similar I do not do, (did years ago, found they had very unrealistic ideas).

[osgood_]

Different strokes for different folks l guess, that actually sounds like it would have put me in a como. Id much rather be the person to have contributed in a humanitarian way rather than in a technical capacity, which is honorable of course but not hugely satisfying in my opinion.

[pziecina]

osgood_  wrote

Its strange because l was hugely passionate but woke up one moring at it wasnt there any longer. Perhaps it will return but it feels quite terminal at this particular moment.

I went through an 18 month period just the same, (i had also had a stroke a couple of months earlier). For me it only ended when i started looking at what was possible in web development once I stopped thinking 'but what about browser/device xyz', and said to my employer, that unless I was developing for now and not the past, that I was not interested.

Thats also why I like questions such as the one Nancy has now posted, because they are based on now, and not the past. Yes we must think of how to handle older devices in order to fully answer the question, but it also helps me in particular to think of possible solutions to the 'how to'.