Flexbox, bootstrap, grid, etc

1

Hello everyone !

I started to code fews weeks and, I came accros bootstrap in the course.

After I finished my tribute page without the framework, I start to looking for my portfolio and to read how to use BOOTSTRAP. But I came accros an video of Quincy talking about FLEXBOX.

So I checked what FLEXBOX is, and, I still not sure of what it is (new syntaxe ?) but on the website of CSS-Tricks(https://css-tricks.com/snippets/css/a-guide-to-flexbox/) , it said that it is not for large scale. It’s more for mobile/app and it say that you should go for “GRID”.

And when I try to understand what GRID is, I saw a lot of post about GRID BOOTSTRAP, FOUNDATION etc…

So…I’m lost. I though I understood but I think not.

I should use Bootstrap with flexbox ? Without it ? I should switch to “vanilla-css” with flexbox ? Not using flexbox for website-large scall ?

I searched a bit and I’m still lost.

Thanks for reading,

Cheers,

2

there are many ways to create the same result. you “should” not do anything. there is no best way. learn both, and youll see when to use what. for me: i use flex-box. maybe a bit to much…

3

Whatever you do, I recommend you try to make your code as readable and simple as possible while achieving the result you want.

I think that would help narrow down your design decisions.

4

To answer your question, it is important to know what goes into a website. At the most foundational level, website is nothing more than a combination of html, css and JavaScript.

What makes it confusing is that there are a lot of “terminology” and “lingo” being toss around like it is the next big fashion trend.

To get this straight, you need to know at least the basics of html, css and JavaScript and what each of them actually do.

HTML deals with the “how” data is being presented and how is being transfer from the computer to you.

Css deals with the presentation and layout of those information that belongs to html.

JavaScript deals with dynamic content management, things that computers can’t do unless it is told specifically what to do. For instance, inserting a paragraph node using DOM into the webpage.

With these three, you can build a website. But that is not all there is. Over time, technologies get more complex and more expensive to build websites. A lot of website element is repetitive tasks, such as navigation, centering websites, etc. Developers then figure out how to streamline the process by packaging the codes into libraries so that they can be reuse.

Bootstrap is one of those packaged library that you can use in your website to streamline web dev production. Bootstrap is a packaged css with predefined classes that you can just put into your html and it will work.

Flexbox is a css feature.

When we breakdown all these fancy mainstream tech standard libraries, they all revolves around manipulating the combination of html, css, or JavaScript.

Now website had become more complex than what I just describe. Such as, server side script, database, SEO, responsive design, etc.

To get your head around this whole front end stuff can be overwhelming. Hope this answer your curiosity.

2 Likes
5

Thanks to you and @ronstarcool @ellereeeee for answering me.

So, If I understood, “flexbox” is a feature of CSS like float: etc…

Bootstrap is a librairy like “foundation” that help with pre-set thing.

I just need to learn those and apply it when I think it’s the best way to use it. Simply as that.

Thanks, I guess I need to learn more for break down those stuff

6

very correct! goodzo