laudebugs

Links

• Material 3 Website
• Material Web (on GitHub)
• Material Theme Builder:
  • Material Theme Builder
  • Introducing Material Theme Builder (blog post)
• Material 3 Figma Design Kit
• Material Tokens
• Angular Material 3 Theming

laudebugs

Sometimes, all you need is a simple collapsible side nav with a bit of animation. I find myself writing a sidenave whenever I'm creating a lot of my web applications. So I refer to this more often as a quick place to start.

app.component.html:

<div class="main-container">
  <div mode="side" opened class="side-nav" [ngClass]="{collapsed}">
      <div class="menu">
        <div class="logo-container">
            <mat-icon class="button-icon">diversity_2</mat-icon>

laudebugs

58 bytes of CSS to look great nearly everywhere

When making this website, i wanted a simple, reasonable way to make it look good on most displays. Not counting any minimization techniques, the following 58 bytes worked well for me:

main {
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
}

laudebugs

import { A11yModule } from '@angular/cdk/a11y';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { OverlayModule } from '@angular/cdk/overlay';
import { PortalModule } from '@angular/cdk/portal';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { NgModule } from '@angular/core';