CSS Framework and Grid System

/* Container classes */
.container {
  /* Fixed-width responsive container with max-width at different breakpoints */
  margin: 0 auto;
  max-width: 1280px;
  width: 90%;
}

.container-fluid {
  /* Full-width container spanning entire viewport */
  width: 100%;
}

/* Grid structure */
.row {
  /* Flexbox row container for columns */
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.col {
  /* Base column class with equal width distribution */
  flex: 1;
  padding: 0 0.75rem;
}

/* Responsive column classes */
.s1, .s2, .s3, .s4, .s5, .s6, .s7, .s8, .s9, .s10, .s11, .s12 {
  /* Small screens (0-600px): column widths 1-12 */
}

.m1, .m2, .m3, .m4, .m5, .m6, .m7, .m8, .m9, .m10, .m11, .m12 {
  /* Medium screens (601px-992px): column widths 1-12 */
}

.l1, .l2, .l3, .l4, .l5, .l6, .l7, .l8, .l9, .l10, .l11, .l12 {
  /* Large screens (993px+): column widths 1-12 */
}

/* Offset classes */
.offset-s1, .offset-s2, /* ... */ .offset-s12 {
  /* Small screen column offsets */
}

.offset-m1, .offset-m2, /* ... */ .offset-m12 {
  /* Medium screen column offsets */
}

.offset-l1, .offset-l2, /* ... */ .offset-l12 {
  /* Large screen column offsets */
}

<!-- Basic grid -->
<div class="container">
  <div class="row">
    <div class="col s12 m6 l4">
      <!-- Takes full width on small, half on medium, third on large -->
    </div>
    <div class="col s12 m6 l8">
      <!-- Takes full width on small, half on medium, two-thirds on large -->
    </div>
  </div>
</div>

<!-- Grid with offsets -->
<div class="row">
  <div class="col s12 m6 offset-m3">
    <!-- Centered column on medium+ screens -->
  </div>
</div>

/* Typography classes */
.flow-text {
  /* Responsive text that scales with screen size */
  font-size: 1.2rem;
}

/* Text alignment */
.left-align { text-align: left; }
.right-align { text-align: right; }
.center-align { text-align: center; }

/* Text transformation */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

/* Font weights */
.thin { font-weight: 200; }
.light { font-weight: 300; }
.regular { font-weight: 400; }
.medium { font-weight: 500; }
.bold { font-weight: 700; }

/* Background colors */
.red, .pink, .purple, .deep-purple, .indigo, .blue, .light-blue, 
.cyan, .teal, .green, .light-green, .lime, .yellow, .amber, 
.orange, .deep-orange, .brown, .grey, .blue-grey {
  /* Primary color backgrounds */
}

/* Color variants */
.lighten-1, .lighten-2, .lighten-3, .lighten-4, .lighten-5 {
  /* Lighter color variants */
}

.darken-1, .darken-2, .darken-3, .darken-4 {
  /* Darker color variants */
}

.accent-1, .accent-2, .accent-3, .accent-4 {
  /* Accent color variants */
}

/* Text colors (append -text) */
.red-text, .pink-text, .purple-text /* ... */ {
  /* Colored text classes */
}

/* Utility colors */
.white { background-color: #fff; }
.black { background-color: #000; }
.transparent { background-color: transparent; }

<!-- Background colors -->
<div class="card blue lighten-2">
  <div class="card-content white-text">
    Light blue background with white text
  </div>
</div>

<!-- Text colors -->
<p class="red-text text-darken-2">Dark red text</p>

/* Responsive visibility */
.hide { display: none !important; }
.show { display: block !important; }

/* Screen size specific visibility */
.hide-on-small-only { /* Hidden on small screens only */ }
.hide-on-med-only { /* Hidden on medium screens only */ }
.hide-on-large-only { /* Hidden on large screens only */ }
.hide-on-med-and-down { /* Hidden on medium and smaller */ }
.hide-on-med-and-up { /* Hidden on medium and larger */ }

.show-on-small { /* Visible on small screens only */ }
.show-on-medium { /* Visible on medium screens only */ }
.show-on-large { /* Visible on large screens only */ }
.show-on-medium-and-up { /* Visible on medium and larger */ }
.show-on-medium-and-down { /* Visible on medium and smaller */ }

/* Flexbox utilities */
.valign-wrapper {
  /* Vertically center flex items */
  display: flex;
  align-items: center;
}

.left { float: left !important; }
.right { float: right !important; }

/* Positioning */
.center { /* Center block element */ }
.center-block { /* Center block element */ }

/* Z-depth (Material shadows) */
.z-depth-0 { box-shadow: none; }
.z-depth-1 { /* Light shadow */ }
.z-depth-2 { /* Medium shadow */ }
.z-depth-3 { /* Heavy shadow */ }
.z-depth-4 { /* Very heavy shadow */ }
.z-depth-5 { /* Maximum shadow */ }

/* Waves effect (ripple animation) */
.waves-effect {
  /* Adds ripple effect on click/touch */
  position: relative;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
}

.waves-light {
  /* Light colored ripple effect */
}

.waves-dark {
  /* Dark colored ripple effect */
}

.waves-circle {
  /* Circular ripple effect */
  border-radius: 50%;
}

/* Material transitions */
.scale-transition {
  transition: transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63);
}

.scale-in { transform: scale(1); }
.scale-out { transform: scale(0); }

<!-- Include Material Icons font -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Usage in HTML -->
<i class="material-icons">add</i>
<i class="material-icons">close</i>
<i class="material-icons">menu</i>

<!-- Sizing classes -->
<i class="material-icons tiny">star</i>    <!-- 1rem -->
<i class="material-icons small">star</i>   <!-- 2rem -->
<i class="material-icons medium">star</i>  <!-- 4rem -->
<i class="material-icons large">star</i>   <!-- 6rem -->

/* Materialize CSS breakpoints */
/* Small: 0 - 600px */
/* Medium: 601px - 992px */
/* Large: 993px and up */

/* Custom media queries */
@media only screen and (max-width: 600px) {
  /* Small screen styles */
}

@media only screen and (min-width: 601px) and (max-width: 992px) {
  /* Medium screen styles */
}

@media only screen and (min-width: 993px) {
  /* Large screen styles */
}

// Primary colors
$primary-color: color("materialize-red", "lighten-2");
$primary-color-light: false;
$primary-color-dark: false;
$secondary-color: color("teal", "lighten-1");

// Grid
$num-cols: 12;
$gutter-width: 1.5rem;
$element-top-margin: $gutter-width/3;
$element-bottom-margin: ($gutter-width*2)/3;

// Breakpoints
$small-screen-up: 601px;
$medium-screen-up: 993px;
$large-screen-up: 1201px;
$small-screen: 600px;
$medium-screen: 992px;
$large-screen: 1200px;

// Typography
$roboto-font-path: "../fonts/roboto/";
$icons-font-path: "../fonts/material-design-icons/";