CSS Grid and Bootstrap

[pwuser1]

Hello all why use CSS grid when Bootstrap has responsive grids?

[louisstephens]

I for one do not use bootstrap anymore. I got fed up with the bloat and components that I just never used. I found that I was using about 8% of what was being offered out of the box, so I started to look for alternatives. I followed a great tutorial by Chris Coyier and rolled the things I learned into my own grid system. Thus far, I really am enjoying it. If I need a slider or library, I just include it with my work flow so my grid stays nice and light. Also, if I need something in particular that my grid does not do, I simply update it to encompass it.

[Pixrael]

In BS4 (in BS3 too) you can on/off the inclusion of any component (javascripts or styles) in your project, it's not mandatory to download and use the whole framework

http://getbootstrap.com/docs/4.0/getting-started/webpack/

https://getbootstrap.com/docs/3.3/customize/

if you know how to work with SASS you can create your own grid system in your stylesheet using the SASS mixins without include the BS library

http://getbootstrap.com/docs/4.0/layout/grid/#sass-mixins

 

[blynx]

4 hours ago, pwuser1 said:

Hello all why use CSS grid when Bootstrap has responsive grids?

CSS grid is „just“ new CSS technology which bootstrap will most certainly adopt in the future - just like the newer frontend frameworks are using flexbox now. It allows some pretty neat and clever layouting.

CSS grid, just like all other CSS (flexbox, float, etc, etc ...) is the underlying technology the frameworks rely on.

It is roughly a matter of „will readymade feature X / Y / Z of bootstrap easen the development of the project“ and „which browser versions do I need to support at reasonable effort“ to decide on using frontend frameworks.

https://gridbyexample.com/examples/
https://css-tricks.com/snippets/css/complete-guide-grid/

cheers
 

[pwuser1]

css grid is not responsive?

[SamC]

2 hours ago, Pixrael said:

In BS4 (in BS3 too) you can on/off the inclusion of any component (javascripts or styles) in your project, it's not mandatory to download and use the whole framework

This totally. If you install via npm you can use gulp to compile the scss. Create your own variables file, @import that, then @import whatever components you want, finally @import your custom styles. It's worth noting though, that although you can pull in 'just' a few components, on their own, these components are still a fair bit larger than a lean custom solution.

I'm actually moving away from BS4 to Uikit 3 because it's more modular and I quite liked it after mucking around with the new admin theme.

30 minutes ago, pwuser1 said:

css grid is not responsive?

Hi @pwuser1 and welcome. Yes, css grid is responsive. Check out this pen (not mine): 

In all honesty, I wouldn't worry about css grid right now. It's just too new. Flexbox has only just gained enough browser support for me to switch over from floats (I loved bourbon/neat combo, alas, the new neat is still floats). But that combo gave me some super lean HTML markup,100% mixin based!

No harm in learning it though for when it's ready for prime time, this is quite fun: http://cssgridgarden.com/

[blynx]

2 hours ago, pwuser1 said:

css grid is not responsive?

Let me be nitpicky here  ... „no“  ...

I would describe it like this: Responsiveness is a characteristic of the resulting website or app. It is achieved through technologies like CSS grid, media queries, Javascript, etc. etc. ... but indeed, CSS grids can make it extremely easy in certain situations to create responsive websites. 

The question regarding „bootstrap vs. css grid“ is not if any of them is responsive, but wether you want to do some work by hand and learn the underlying tech (no bootstrap) or you rather want to build a website relatively quickly with ready-made pieces of code (yay bootstrap).