does angular material have a grid system?
This site describes how to add the bootstrap grid to a Angular Material project: https://www.amadousall.com/the-good-parts-of-bootstrap-4-you-are-missing-in-your-angular-material-projects/
A summary of the steps described in the article:
Add bootstrap to your project:
npm install bootstrap --save
src/styles.scss:
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
@import 'variables';
// Imports functions, variables, and mixins that are needed by other Bootstrap files
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
// Import Reboot
@import '~bootstrap/scss/reboot';
@import '~bootstrap/scss/grid'; // add the grid
@import '~bootstrap/scss/utilities'; // add css utilities
@import 'reset';
src/_variables.scss:
The _variables.scss Sass partial allows us to customize Bootstrap - more precisely, the parts of Bootstrap that we will be using
$link-color: #3f51b5;
$link-hover-color: currentColor;
$link-hover-decoration: none;
$grid-breakpoints: (
xs: 0, // handset portrait (small, medium, large) | handset landscape (small)
sm: 600px, // handset landscape (medium, large) | tablet portrait(small, large)
md: 960px, // tablet landscape (small, large)
lg: 1280px, // laptops and desktops
xl: 1600px // large desktops
);
$container-max-widths: (
sm: 600px,
md: 960px,
lg: 1280px,
xl: 1600px
);
src/_reset.scss:
The _reset.scss Sass partial allows us to override some of the Bootstrap styles we don't want
* {
&:active,
:focus {
outline: none !important; // 1
}
}
label {
margin-bottom: 0; // 2
}
a:not(.mat-button):not(.mat-raised-button):not(.mat-fab):not(.mat-mini-fab):not([mat-list-item]) {
color: #3f51b5; // 3
}
If you are using Material2, you can use Angular Flex Layout for responsiveness. It compliments Angular2 well and is lightweight.
Basically Material2 + Flex-layout is equivalent to Bootsrap library.
Here's an example of how flex-layout can be used for grid system/responsiveness with Angular/Material2.
Sample Code showing use of flex-layout API:
<div fxShow.xs="true" fxShow="false" >Screen size <h1>XS</h1></div>
<div fxShow.sm="true" fxShow="false" >Screen size <h1>SM</h1></div>
<div fxShow.md="true" fxShow="false" >Screen size <h1>MD</h1></div>
<div fxShow.lg="true" fxShow="false" >Screen size <h1>LG</h1></div>
<div fxShow.xl="true" fxShow="false" >Screen size <h1>XL</h1></div>
<div fxLayout="row"
fxLayout.xs="column"
fxLayoutGap="10px"
fxLayoutAlign.xs="center center"
fxLayoutWrap>
<div class="sample-div" fxFlexOrder.lt-md="7">Div 1</div>
<div class="sample-div" fxFlexOrder.lt-md="6">Div 2</div>
<div class="sample-div" fxFlexOrder.lt-md="5">Div 3</div>
<div class="sample-div" fxFlexOrder.lt-md="4">Div 4</div>
<div class="sample-div" fxFlexOrder.lt-md="3">Div 5</div>
<div class="sample-div" fxFlexOrder.lt-md="2">Div 6</div>
<div class="sample-div" fxFlexOrder.lt-md="1">Div 7</div>
<div class="sample-div" fxFlexOrder.lt-md="0">Div 8</div>
</div>