search

tomastrajan / angular-ngrx-material-starter

Angular, NgRx, Angular CLI & Angular Material Starter Project
https://tomastrajan.github.io/angular-ngrx-material-starter
MIT License
2.82k stars 918 forks source link

[Suggestion] flexbox instead bootstrap #443

Closed zeusmos closed 5 years ago

zeusmos commented 5 years ago

why not use a flexbox instead of a bootstrap?

tomastrajan commented 5 years ago

Hi @zeusmos !

As far as I am aware, bootstrap is implemented using css flexbox in one of its most recent versions. So the main value of bootstrap is that it comes with this pre-made css classes and utils so that it is easy to create nice grid based layout without writing any custom css.

Using flexbox directly would lead to need to re-implement custom grid system right?

EDIT: What I understand when somebody says flexbox

zeusmos commented 5 years ago

that is correct, but it's not complicated and since the starter project use material design I was thinking why not all the material related ui, material design icons - I know they have fewer icons but they follow material design guidelines and flexbox all lightweight, so we don't need the other frameworks.

rjain15 commented 5 years ago

I have the exact same question, can we use Angular Flex box instead of bootstrap. I am confused with the direction of Angular/Material/Flexbox, do they want us to move to this stack and away from bootstrap grid. What is the value or creating overlapping frameworks.
Angular Bootstrap Components: (https://ng-bootstrap.github.io/#/home) Angular Flex Layout (with Flexbox and CSS Grid) (https://github.com/angular/flex-layout) Or Bootstrap Grid Layout

tomastrajan commented 5 years ago

@rjain15 I can only speak for myself because I haven't talked about this topic with too many people...

I like to go with Angular Material component framework because it is "native" to the Angular and written in Angular using the Angular CDK. We can use CDK in our projects to develop our components so this will all play nicely together.

As for the grid part, this is pretty independent from the overall styling so I decided to go with Bootstrap grid ( that's the only Bootstrap thing used in this repo thanks to great Bootstrap bundling which enables that! )

As for Bootstrap grid vs Angular Flex-layout, they both have different focus. Bootstrap provides grid and grid utility classes out of the box while Angular flex-layout is more powerful but doesn't provide default 12 column grid with predefined helpers out of the box (check demo).

So it depends, do you need powerful dynamic layouting abilities that change during runtime and play well with other Angular concepts? Then use Angular-flex-layout.

Do you just need basic 12 column grid which is "done" and ready to use ? Use Bootstrap grid...

ahasall commented 5 years ago

@rjain15, To add to what @tomastrajan is saying, here is an article I wrote about the subject that you may find useful: https://www.amadousall.com/the-good-parts-of-bootstrap-4-you-are-missing-in-your-angular-material-projects/

dvaldivia commented 5 years ago

if you like the native angular implementation then angular-flexlayout makes sense imo.

tomastrajan commented 5 years ago

This starter is and will use bootstrap grid for responsive layout in the foreseeable future. ( Old issue cleanup )