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.
Related
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
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've just started using Semantic UI and I've hit a bit of a wall. I have 2 buttons in a div. These buttons should be large on desktop and small on mobile. I've followed the Semantic conventions and added the classes 'large desktop small mobile', but the buttons do not resize on mobile.
Is this just not a feature of Semantic UI, or am I missing something? The official documentation for Buttons doesn't seem to make mention of it, nor does the page on Responsive Elements.
https://react.semantic-ui.com/elements/button
According to this (https://github.com/Semantic-Org/Semantic-UI/issues/756) Semantic UI doesn't have classes that work like that (you might be thinking of bootstrap classes). The suggested work-around in that post is to utilize the #media for your classes.
I just started working with Polymer and their starter kit. I want to have a standard hero image with a text overlay - naturally, I want the image to be responsive. I've gone through all the Iron and Paper elements and can't seem to find anything that works.
I've tried using the Iron image, Flex layout, and Media queries in various compbinations to get what I need, but to no avail. I've found several 3rd party components like x-imager that will do the trick, but I would've thought such basic functionality would be available right out of the box like it is with pretty much every "responsive" framework - and yes, while I know Polymer isn't supposed to be a framework, I guess I expected it to be part of their component library. And yes, I also know I can create a simple CSS class that does that like Bootstrap does too, but I'm looking for native functionality, out of the box here.
Is there something I'm missing here or should I just create a custom component and move on?