HTML blueprint for Angular Flex Layout / Material

Kick-off blueprint for HTML/CSS design with Angular Flex Layout and Angular Material

Prerequisites:


@angular/flex-layout v9.0.0

@angular/material v8.2.3

1. HTML

     
  

  <div class="wrap-container">

         <div class="main-container" fxLayout="column" fxLayoutAlign="space-between center" fxLayoutGap="25vh">
            <div style="width:100%;">
                <div class="money-label">
                    Account balance
                </div>
                <div fxLayout="row" fxLayoutAlign="start center" class="margin">
                    <div class="free-money" fxFlex="80">
                        + 11.500 Euro
                    </div>
                    <div fxFlex="20" fxLayoutAlign="end">
                        <mat-icon>check_circle</mat-icon>
                    </div>
                </div>
                <div class="bottom-links margin" fxLayout="row" fxLayoutAlign="start end">
                    <div fxFlex="47">
                        <button mat-button class="bottom-links full-width">Analysis</button>
                    </div>
                    <div fxFlex="6"></div>
                    <div fxFlex="47" fxLayoutAlign="end">
                        <button mat-button class="bottom-links full-width">Profile</button>
                    </div>
                </div>
            </div>

            <div class="transaction-entry">
                <div fxLayout="row" fxLayoutAlign="start center" class="margin-top">
                    <div class="top-body" fxFlex="80">
                        Mo. | 16.5.2020 | 12:30
                    </div>
                </div>
                <div class="bottom-body" fxLayout="row" fxLayoutAlign="start end">
                    <div fxFlex="80">
                        Transaction #1:
                    </div>
                    <div fxFlex="20" fxLayoutAlign="end">
                        - 38,00
                    </div>
                </div>
            </div>

            <div style="width:100%;text-align: center">
                <button mat-button class="bottom-links full-width">Submit</button>
            </div>

         </div>
      </div>
     






2. CSS



 .wrap-container {

  height: 100%;
 }

.main-container {
  padding: 20px;
}

.full-width {
  width: 100%;
}

.button-margin {
  margin-right: 1.5vh;
}

mat-card {
  background-color: white;
  height: 100%;
  width: 100%;
  padding: 13.5vh;
}

.money-label {
  font-size: 2.08vh;
  color: lightgray;
}

.mat-button {
  background-color: orangered;
}

.free-money {
  font-size: 4.48vh;
}

.bottom-links {
  font-size: 2.08vh;
  color: white;
}

.margin {
  margin-bottom: 1.5vh;
}

button {
  overflow-x: hidden !important;
}

.transaction-entry {
  width: 100%;
}

.top-body {
  font-size: 2.08vh;
  color: lightgray;
}

.margin-top {
  margin-bottom: 0.5vh;
}

.bottom-body {
  font-size: 2.08vh;
  font-weight: bold;
}