rafszul

angular.module('myApp', ['ngMaterial']).config(function ($mdThemingProvider, palettes) {

    var customPrimary = {
        '50': '#a8bac3',
        '100': '#99aeb8',
        '200': '#8aa2ae',
        '300': '#7a96a3',
        '400': '#6b8a99',

rafszul

rafszul

<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" viewBox="0 0 11936 4450">
  <g id="invest-in-art-header-mid.svg">
    <path fill="none" d="M0 0h11936v4450H0z"/>
    <g id="invest-in-art_1_">
      <g id="in-art_2_">
        <path id="box_3_" d="M7162.3 570.2c1.9 2.5 3.5 5.2 5.7 7.4 19.2 19.8 37 40.8 55.1 61.6 12 13.9 24.2 27.7 36.2 41.5l36.6 42.3c6.2 7.1 12.3 14.3 18.7 21.3 27.9 31 55.9 62 83.8 93 1.4 1.5 2.7 3.2 3.5 5.1 3.6 8.3 9 15.4 14.2 22.6.8 1 1.7 2 2.7 2.8 13.4 12.2 26.6 24.7 40.4 36.3 10.1 8.5 18.4 18.6 26.9 28.6 10 11.8 19.9 23.7 29.9 35.6 5.2 6.2 10.4 12.4 15.3 18.9-10.5-8.5-19-19-28.9-28-2 1.7-.6 3.1.1 4.2 5 7.4 9.7 15 15.2 22 12.2 15.1 24.7 30 37.3 44.7 27.4 31.9 56.3 62.3 85.3 92.7 32.5 34 65.8 67.1 100.1 99.2 9.2 8.6 18.1 17.6 25.8 27.6 1.6 2 3.8 3.7 3.6 6.7-.3.1-.6.4-.7.3-6.8-2.4-14-4.1-19.4-9.4-24.9-24.4-49.8-48.9-74.9-73.2-31.9-30.9-63.9-61.5-95.8-92.3-14-13.5-27.9-27.1-41.9-40.5-34.5-33.1-69-66-103.5-99.1-36.6-35-73.1-70.1-109.6-105.2-23.8-22.9-47.6-45.9-71.3-69-32.8-32.1-65.7-64.2-98.3

rafszul

{
   "tabs": [
      {
         "active": true,
         "audible": false,
         "favIconUrl": "https://www.google.co.uk/images/branding/product/ico/googleg_lodp.ico",
         "height": 748,
         "highlighted": true,
         "id": 1634,
         "incognito": false,

rafszul

Real World Angular

• Real World Full Stack
• Real World Angular - Part 0: From zero to cli-ng
• Real World Angular - Part 1: Not another todo list app!
• Real World Angular - Part 2: It’s a Material World!
• Real World Angular — Part 3: Form Formation
• Real World Angular - Part 4: State of my SPA
• Real World Angular - Part 5: Light my fire

rafszul

<h1 fxFlexAlign="center" [style.xs]="{'font-size.rem': 3 }" [style.sm]="{'font-size.rem': 5}" [style.md]="{'font-size.rem': 7}">

            <small>sm</small>{{ title }}<small>Invest</small></h1>

rafszul

<md-card class="card-demo" >
      <md-card-title>Responsive Layout Directions</md-card-title>
      <md-card-subtitle>Layout direction changes to 'column' for 'xs' or 'sm' viewport sizes:</md-card-subtitle>
      <md-card-content>
        <div class="containerX">
          <div fxLayout="row" fxLayout.xs="column" fxLayout.sm="column" fxFlex class="coloredContainerX box" >
            <div fxFlex> I'm above on mobile, and to the left on larger devices.   </div>
            <div fxFlex> I'm below on mobile, and to the right on larger devices.  </div>
          </div>
        </div>

rafszul

<header fxLayout="row" fxLayout.xs="column" fxLayout.sm="column" fxLayoutAlign="center stretch">

    <div fxFlexAlign="center">
        <h1 [style.xs]="{'font-size.rem': 2 }" [style.sm]="{'font-size.rem': 4}" [style.md]="{'font-size.rem': 6}">

            <small>sm</small>{{ title }}<small>Invest</small></h1>
    </div>
</header>

rafszul

<div class="two-col-grid">
  <div>Responsive</div>
  <div>Grid</div>
</div>

<div class="responsive-four-col-grid">
  <div>Col One</div>
  <div>Col Two</div>
  <div>Col Three</div>
  <div>Col Four</div>

rafszul

Angular2 full-screen menu/navigation

A Pen by rafszul on CodePen.

License.