I'm using VMware Clarity, but I notice there are no utility classes like Bootstrap has to apply padding, margin, round images, etc.
Do I need to implement this myself or is there a complementary library I can use?
I'm using the CSS version without Angular.
You can try the below two options.
Tachyons
Beard
VMware Clarity is build upon Bootstrap. I suggest to use Bootstrap for utility classes. You will find lot of resemblance of VMware Clarity styling with Bootstrap.
Another option if you need utility classes is to take a look at Blueprint CSS. It works well mixing with other CSS frameworks. (I am the creator/maintainer) :)
I stuck with some question. What the difference in the use of Boostrap 4 or Bootstrap UI(base on v4.0.0-alpha.6) powered by Angular in developing application on Angular 2 ?
Does BootstrapUI have some must have stuff that clear Bootstrap 4 doesn't have ?
Bootstrap UI isn't a straight wrapper for Bootstrap JS-based behavior, it's a rewrite of that behavior in Angular, so no Bootstrap or jQuery dependency, just the bootstrap-css-only node module, which is purely a copy of the Bootstrap CSS. Thus, if you are using Angular correctly, most of the Bootstrap components will not work. You will need to write your own directives to get them to work. So it may be easier to use Angular Bootstrap which does all the work for you (Source).
I'm a really big fan of using angular material. However, a new project I'm working on doesn't use angular and I want some of the layout goodness.
For example:
<div flex="50"></div>
or
<div layout="column"></div>
I like being able to use these attributes to specify layout. Is there a smaller framework that I could use that provides these attribute selectors besides angular-material.css?
If you us angular but not angular-materil, a small option to enable flexbox is angular-flex
https://github.com/mogobruno/angular-flex
I have asked myself (not tested) if it is possible to integrate both bootstrap and materializecss into the same project
Since both frameworks are for the same purpose and probably overlapping in some class definitions etc. is it still possible to combine both frameworks in order to expand my styling options?
Materialize is not based on Bootstrap nor just a "visual layer", using both frameworks may lead to a lots of incompatibilities or at least overlap a lot as most of their functionalities are redundant (grids, menus, icons, etc).
I personally use this project Bootstrap material design which is a theme for Bootstrap and works very well.
If you don't need/want Bootstrap you can also use Material Design Lite that has been recently released by Google. It is a light CSS framework based on Material Design guidelines. Light in comparison to Angular Material or Polymer also using Material Design guidelines but part of or requiring other javascript frameworks (i.e. Angular).
I added Materialize to my bootstrap website and it worked fine, like JC Borlagdan said though there is some overlapping. I just use a website inspector and (usually right click > inspect element) then just turn off the bootstrap or materialize property to see which one I like more and remove the styling from the one I don't like. Just make sure you get the non minified versions of materialize and bootstrap.
It is possible, I already tested both framework in a single web form, though some properties of the controls overlapped, especially to the <div> tag that calls the container class for the tag.
For the grid, it actually follows still the bootsrap, for some reason, (that I don't know). Because I tried rearranging the order of <script> tags, still bootsrap grid still the one used by the webpage/webform.
you need to set the order of CSS files like
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/yourStyle.css" rel="stylesheet"/>
Now you can override bootstrap css classes or ids, and can make your own CSS styles.
You could remove the GRID from materialize.css and just compile a custom bootstrap package with BT GRID and without the buttons, labels etc.
Don't use any BT jQuery Plugin, then compile and load bootstrap.min.css first in your template and then the modded materialize.css and materilize.min.js.
You can also integrate just buttons, cards or colors by picking them out of materialize.css and insert in your template.css / style.css to overwrite
bootstrap styles or to add alternative css classes to your GRID.
I'm not sure that's possible. Material Design is something new from Google, and includes responsive as part of it, while the Bootstrap library is from Twitter and seems to be mostly responsive-oriented.
Check out this conversation : http://forums.oscommerce.com/topic/407994-material-design/?hl=material
I suspect that they are not going to be integrated with each other, and will conflict badly, but maybe someone else has more information.
I have a twitter bootstrap web template that I'm integrating with angular ui to develop a SPA. I have been able to do this integration to some level but I want to override the default css that Twitter Boostrap dropdown-men with Angular JS provides. Thanks for any help.
Option 1) Edit the Bootstrap CSS
You can edit the bootstrap CSS but this means you are assuming all risk for integrating nay future bootstrap changes. I don't recommend it unless you want to trim out all bootstrap CSS except what you need. Only mentioning it because it is an option, though not one I recommend.
Option 2) Create your own CSS to override Bootstrap's CSS
Create a CSS file such as styles.css and have it listed after bootstrap's CSS in your HTML file. Then override the styles for what you need. This is pretty easy and allows you to leave Bootstrap untouched.
Option 3) Pay a CSS expert :)
OK, so seriously ... choose option 2.