I'm about to start my first Angular project, and I'm thinking about using Angular Material.
It has a lot of components which is what i'm looking for but it seems to me that it does not have a grid system nor any utility classes.
Should I use for example Bootstrap or any other css framework along with Angular Material or simply add my own css? What's the common practice?
Having to add classes for padding, margin and so on is a waste of time so I'd be inclined to also use Bootstrap which already has all these kind of classes.
My only fear is that having both Angular Material and Bootstrap would increase the bundle significantly.
I am using the following for my project
For grid, checkout this https://www.ag-grid.com/angular-grid/.
For
angular wrapper of bootstrap you can check
https://valor-software.com/ngx-bootstrap/#/documentation#getting-started
You may also want to check
https://primefaces.org/primeng/showcase/#/setup this has UI
components as well as their own spacing and grid setup
https://primefaces.org/primeng/showcase/#/primeflex/spacing
Related
My application is in React and using css for styling. I wanted to add modal in one component. For that I am using bootstrap. But after adding bootstrap to my project entire UI is looking messy. How can I limit bootstrap to only one react component.
Task: Creating feedback form using bootstrap modal
Issue: bcz of bootstrap UI is changed
Requirement: Want to limit the bootstrap only for feedback component!
Thank you in advance!!!
I am currently working on a reactjs web app. I was wondering how do I make it responsive? Whenever I change the size of my browser, all my components get messed up and flow onto each other. How do I stop that from happening in an easy way?
"Responsive Design" is huge part/topic in development. In my opinion its a long term process to learn. The more you build projects, the more you can learn.
But there are lots of UI libraries/frameworks are available to make it easier. And fortunately every of them have a React Version. Here are some of them -
ReactStrap
Semantic UI React
Material UI
Chakra
Tailwind CSS
BaseWeb
If you have time to learn more about responsive design, you can check out the official guidelines from Responsive web design basics.
Some common techniques you can follow -
Try to set width and height of your layout with percentage(%) value or vw & vh.
Use flexbox or grid.
Use css media query and follow the standard breakpoints.
If possible give your component max-width / max-height when necessary.
You can build a BaseLayout component which has max-width: 1920 and wrap other widgets with it. So, in a very big screen your app contains always width of 1920px.
Hope this will helpful.
Responsive is a design technique - No libary or tool will do it for you, because you need to choose which elements get hidden or resized etc. Having said that, a framework such as Bootstrap will make responsive design easier.
But you'll have to look around and learn the ropes - its a different methodology of web design.
I am developing an Angular2 SPA app. In the beginning, I was using Angular, Bootstrap 4 CSS and Angular Bootstrap, however, gradually I am moving to using Angular Material. Basically all these frameworks and component suites live well, however, I find that with the existence of Bootstrap 3/4, the alignment of HTML elements (buttons, inputs and checkboxs) in a row look no good. If I remove Bootstrap, they are aligned horizontally and perfectly. Because I am still using some Angular Bootstrap components, I can't get rid of Bootstrap which provide a lot good stuffs not yet covered by NG Material and fxFlex.
Questions:
Is it good or recommended to have Angular Material and Bootstrap together?
Is it good to use an application level stylesheet with a small portion of Bootstrap CSS only?
Since you are using Angular just make use of Angular Material as it also come up with styled components which works right of the bat.
Though at the same time in my ng2 projects I also use bootstrap though not everything in bootstrap, I just took a portion of it like bootstrap-modal, bootstrap-tooltip etc. they work pretty well as long as you don't put the entire style.min.css of bootstrap.
I am trying to get my application looking somewhat decent and flex uses CSS so does that mean I can use bootstrap? I just don't know how I would implement it in the code once I have the CSS as mxml is different to html. If not, are there any other frameworks I can use to get my application looking better?
No; Bootstrap requires javascript (not available inside the Flex app). Also, Flex uses its own customized subset of CSS with some important differences from the spec.
I am now having a lot of troubles with Bootstrap. I used to use it to build a website once and then I have never used it again. But now, I have to use it. I downloaded the compressed version and include JS and CSS file in my project.
Here is the problem. I don't know how to customize it effective. For example, I create a navbar that is much higher (height:90px;) than the bootstrap default navbar. Hence, I have to modify the padding of the navigation panel on the navbar and when the navbar is collapsed, the items in this collapsible navbar are aligned incorrectly due to the padding and margin modification for the large screen.
I have one solution in my mind. May be I have to modify the media query padding and margin or if you have other effective ways to do it. Please tell me.
Create a file with overrides that you load after the bootstrap file. The override file will redefine the bootstrap classes you want to change. It's important that you load the override file after the bootstrap file.
Just linking Your own CSS file, and insert your custom class to the element. And then styling your custom class & avoid to override default class provided by bootstrap itself. This is my practice when using bootstrap or another CSS Framework.
Never have problem so far. Good luck for your project.