I am working on a react project. I am using react-bootstrap. But, you know you have limit on bootstrap. For example I am using a navbar but I would like to change navbar's colour. But you have I think 6-7 option about it. Or, I would like to change my navbar's dimensions. These are just examples, you can think same things about every components that react-bootstrap have. How can I manage bootstrap's css? Or should I use my own css? Or should I use another frameworks for different things?
I can change my whole project and write with material-ui but same things will happen.
Please let me know your idea.
I have small experience with React, but in other frameworks (VUE, Angular) i am modifying bootstrap variables by importing bootstrap.scss. After that just change required scss variables with your own and it should work.
You can either change the bootstrap file described in this stackoverflow issue.
Or
You can also just change your css locally if you require small specific changes. Best way is to have them in a separate .css file and add !important at the end of each style to make sure they apply.
Example :
p {
color: red !important;
}
I'm considering using Blueprintjs in an application.
Is it possible to use custom SVG icons in the button, menu and navbar components? All the examples I've seen use the built-in icon set.
The app I'm developing would rely heavily on custom icons so being restricted to the built-in set wouldn't work.
Seems like it would be an obvious thing to be able to do, so I presume I'm just not finding the samples. If anyone could point me to some, I'd appreciate it.
Custom icons are currently unsupported in the core components. You should follow this issue for future updates that might enable support for this kind of use case: https://github.com/palantir/blueprint/issues/365
In the Angular Material docs under the theming section it says:
If you need more custom styling (such as layout changes including
padding, margins, etc) you will need to either write CSS rules with
custom selectors, or build a custom version of the
angular-material.css file using SASS and custom variables
Does anyone know of any useful guides that walk through building a custom version of the css file? Are there any tools that come with the library that allow you do this?
Thanks
Angular material documentation is a little poor in this aspect, but there is an example on how customize buttons, I didn't try it, but I believe all the elements is the same way.
I am confused with angular material design and material css.
Why do both have different layout and grids?
What is the equivalent for bootstrap container in angular material design?
Shall I use angular material design for my project comparing with bootstrap?
The main reason to go with Angular Material is because it is based on Flexible Box Layout specification, witch is a W3C standard Flexible Box.
The closer tag for bootstrap container could be: <div layout="row" layout-wrap></div>
Angular Material Design does not have an exact equivalent to a Bootstrap container because Material Design (AMD) is more flexible. A container has 8 sections. AMD has the layout and flex attributes. AMD's flex can increment by 5% (20 sections in BS) or by 33 and 66 (2 sections) or by combinations of 5%, 33% and 66%, which can go to more than 100% (most any number of sections) in which case multiple lines are automatically created. The best single page with examples that I've found, so far, is https://material.angularjs.org/#/layout/grid Click on the Source box above each example to get more specifics about AMD's HTML syntax for layout and flex.
You have further flexibility via Child Alignment, which controls spacing between each div in horizontal and vertical. Click the radio buttons on that page to see how divs are centered, or spread, or pushed to one end, or lifted to the top, etc.
The HTML syntax displayed will work on a set sized page. If you want the equivalent of media-queries to change sizes for different devices, you have some further coding to do to make angular controllers. Look at the DEMOS examples for various components to get an idea.
Angular Material grid > Bootstrap grid, especially for Angular applications. Bootstrap grid uses float, which is outdated compared to flexible box model. float replaced the horrendous table layouts, but now flexible box model is starting to push float aside (for grid layouts). Just note that you need to add certain suffixes in your CSS for older browsers. See this CSS Tricks article for an example of how to implement flex for older browsers. Bootstrap grid applications also require you to create an endless amount of divs, which looks terrible and should be avoided in any application using HTML5. Technically, you could write your own Angular directives to replace certain divs, and group them based on what or how they display, but then why not just use Angular Material when they have already done that for you?
Materialize is a modern responsiveCSS framework based on Material Design by Google.
And
Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.
So if you want new modern design i think you should go with material design. It has very nice animation too.
I was looking for an answer for the same question. I see some great comments here. Few additions as of December 2016: Bootstrap does have Flexbox support now. Check this link also check this link to make bootstrap use Flexbox by default by just changing a flag or download bootstrap-flex.css. As far as, grid support in material goes, use a grid demo here, there is a material flex-layout engine which looks great (I haven't tried it yet). It is very close to bootstrap grid. Check this link.
if you work with Angular, instead of using grid you should rather use flexbox, Angular provides a package for it:
https://github.com/angular/flex-layout
A huge advantage using it is the fact that you can use typescript public variables to the flex-layout directives (you can't do that with bootstrap). It also includes Observables for media query changes.
Is there an official way to get the x-... (eg x-grid-row-summary) types of components, I am currently using the debugger in chrome and looking at the html in there.
But it feels wrong and that there must be a published list somewhere...
If only things would be as simple as that. CSS classes are used extensively by ExtJS for correct display of components, and are a hybrid between the component type itself and its state (focues would also get a css class).
The example you gave demonstrates it: x-grid-row-summary is injected within AbstractSummary.js, which is really a feature rather than a component. x-grid-row-summary does not have any corresponding css class and isn't included in the default theme's scss (under /resources/themes/stylesheets/ext4/default/).
So I'm afraid the way you do it is the best way of doing it.