0
# CSS Framework and Grid System
1

2
Complete Material Design styling system providing responsive 12-column grid, typography, colors, and utility classes for layout and styling without requiring JavaScript.
3

4
## Capabilities
5

6
### Grid System
7

8
Responsive 12-column grid system based on flexbox with breakpoints for different screen sizes.
9

10
```css { .api }
11
/* Container classes */
12
.container {
13
  /* Fixed-width responsive container with max-width at different breakpoints */
14
  margin: 0 auto;
15
  max-width: 1280px;
16
  width: 90%;
17
}
18

19
.container-fluid {
20
  /* Full-width container spanning entire viewport */
21
  width: 100%;
22
}
23

24
/* Grid structure */
25
.row {
26
  /* Flexbox row container for columns */
27
  display: flex;
28
  flex-wrap: wrap;
29
  margin-left: -0.75rem;
30
  margin-right: -0.75rem;
31
}
32

33
.col {
34
  /* Base column class with equal width distribution */
35
  flex: 1;
36
  padding: 0 0.75rem;
37
}
38

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

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

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

52
/* Offset classes */
53
.offset-s1, .offset-s2, /* ... */ .offset-s12 {
54
  /* Small screen column offsets */
55
}
56

57
.offset-m1, .offset-m2, /* ... */ .offset-m12 {
58
  /* Medium screen column offsets */
59
}
60

61
.offset-l1, .offset-l2, /* ... */ .offset-l12 {
62
  /* Large screen column offsets */
63
}
64
```
65

66
**Usage Examples:**
67

68
```html
69
<!-- Basic grid -->
70
<div class="container">
71
  <div class="row">
72
    <div class="col s12 m6 l4">
73
      <!-- Takes full width on small, half on medium, third on large -->
74
    </div>
75
    <div class="col s12 m6 l8">
76
      <!-- Takes full width on small, half on medium, two-thirds on large -->
77
    </div>
78
  </div>
79
</div>
80

81
<!-- Grid with offsets -->
82
<div class="row">
83
  <div class="col s12 m6 offset-m3">
84
    <!-- Centered column on medium+ screens -->
85
  </div>
86
</div>
87
```
88

89
### Typography
90

91
Material Design typography system with standardized text styles, sizes, and spacing.
92

93
```css { .api }
94
/* Typography classes */
95
.flow-text {
96
  /* Responsive text that scales with screen size */
97
  font-size: 1.2rem;
98
}
99

100
/* Text alignment */
101
.left-align { text-align: left; }
102
.right-align { text-align: right; }
103
.center-align { text-align: center; }
104

105
/* Text transformation */
106
.uppercase { text-transform: uppercase; }
107
.lowercase { text-transform: lowercase; }
108
.capitalize { text-transform: capitalize; }
109

110
/* Font weights */
111
.thin { font-weight: 200; }
112
.light { font-weight: 300; }
113
.regular { font-weight: 400; }
114
.medium { font-weight: 500; }
115
.bold { font-weight: 700; }
116
```
117

118
### Color System
119

120
Material Design color palette with primary, secondary, and accent colors plus text and background variants.
121

122
```css { .api }
123
/* Background colors */
124
.red, .pink, .purple, .deep-purple, .indigo, .blue, .light-blue, 
125
.cyan, .teal, .green, .light-green, .lime, .yellow, .amber, 
126
.orange, .deep-orange, .brown, .grey, .blue-grey {
127
  /* Primary color backgrounds */
128
}
129

130
/* Color variants */
131
.lighten-1, .lighten-2, .lighten-3, .lighten-4, .lighten-5 {
132
  /* Lighter color variants */
133
}
134

135
.darken-1, .darken-2, .darken-3, .darken-4 {
136
  /* Darker color variants */
137
}
138

139
.accent-1, .accent-2, .accent-3, .accent-4 {
140
  /* Accent color variants */
141
}
142

143
/* Text colors (append -text) */
144
.red-text, .pink-text, .purple-text /* ... */ {
145
  /* Colored text classes */
146
}
147

148
/* Utility colors */
149
.white { background-color: #fff; }
150
.black { background-color: #000; }
151
.transparent { background-color: transparent; }
152
```
153

154
**Usage Examples:**
155

156
```html
157
<!-- Background colors -->
158
<div class="card blue lighten-2">
159
  <div class="card-content white-text">
160
    Light blue background with white text
161
  </div>
162
</div>
163

164
<!-- Text colors -->
165
<p class="red-text text-darken-2">Dark red text</p>
166
```
167

168
### Responsive Utilities
169

170
Classes for controlling visibility and behavior across different screen sizes.
171

172
```css { .api }
173
/* Responsive visibility */
174
.hide { display: none !important; }
175
.show { display: block !important; }
176

177
/* Screen size specific visibility */
178
.hide-on-small-only { /* Hidden on small screens only */ }
179
.hide-on-med-only { /* Hidden on medium screens only */ }
180
.hide-on-large-only { /* Hidden on large screens only */ }
181
.hide-on-med-and-down { /* Hidden on medium and smaller */ }
182
.hide-on-med-and-up { /* Hidden on medium and larger */ }
183

184
.show-on-small { /* Visible on small screens only */ }
185
.show-on-medium { /* Visible on medium screens only */ }
186
.show-on-large { /* Visible on large screens only */ }
187
.show-on-medium-and-up { /* Visible on medium and larger */ }
188
.show-on-medium-and-down { /* Visible on medium and smaller */ }
189
```
190

191
### Spacing and Layout Utilities
192

193
Utility classes for margins, padding, and common layout patterns.
194

195
```css { .api }
196
/* Flexbox utilities */
197
.valign-wrapper {
198
  /* Vertically center flex items */
199
  display: flex;
200
  align-items: center;
201
}
202

203
.left { float: left !important; }
204
.right { float: right !important; }
205

206
/* Positioning */
207
.center { /* Center block element */ }
208
.center-block { /* Center block element */ }
209

210
/* Z-depth (Material shadows) */
211
.z-depth-0 { box-shadow: none; }
212
.z-depth-1 { /* Light shadow */ }
213
.z-depth-2 { /* Medium shadow */ }
214
.z-depth-3 { /* Heavy shadow */ }
215
.z-depth-4 { /* Very heavy shadow */ }
216
.z-depth-5 { /* Maximum shadow */ }
217
```
218

219
### Animation and Effects
220

221
CSS classes for Material Design animations and interactive effects.
222

223
```css { .api }
224
/* Waves effect (ripple animation) */
225
.waves-effect {
226
  /* Adds ripple effect on click/touch */
227
  position: relative;
228
  cursor: pointer;
229
  overflow: hidden;
230
  user-select: none;
231
}
232

233
.waves-light {
234
  /* Light colored ripple effect */
235
}
236

237
.waves-dark {
238
  /* Dark colored ripple effect */
239
}
240

241
.waves-circle {
242
  /* Circular ripple effect */
243
  border-radius: 50%;
244
}
245

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

251
.scale-in { transform: scale(1); }
252
.scale-out { transform: scale(0); }
253
```
254

255
### Material Icons Integration
256

257
Integration with Google's Material Icons font for consistent iconography.
258

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

263
<!-- Usage in HTML -->
264
<i class="material-icons">add</i>
265
<i class="material-icons">close</i>
266
<i class="material-icons">menu</i>
267

268
<!-- Sizing classes -->
269
<i class="material-icons tiny">star</i>    <!-- 1rem -->
270
<i class="material-icons small">star</i>   <!-- 2rem -->
271
<i class="material-icons medium">star</i>  <!-- 4rem -->
272
<i class="material-icons large">star</i>   <!-- 6rem -->
273
```
274

275
## Breakpoints
276

277
```css { .api }
278
/* Materialize CSS breakpoints */
279
/* Small: 0 - 600px */
280
/* Medium: 601px - 992px */
281
/* Large: 993px and up */
282

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

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

292
@media only screen and (min-width: 993px) {
293
  /* Large screen styles */
294
}
295
```
296

297
## SASS Variables
298

299
When using the SASS version, these variables can be customized:
300

301
```scss
302
// Primary colors
303
$primary-color: color("materialize-red", "lighten-2");
304
$primary-color-light: false;
305
$primary-color-dark: false;
306
$secondary-color: color("teal", "lighten-1");
307

308
// Grid
309
$num-cols: 12;
310
$gutter-width: 1.5rem;
311
$element-top-margin: $gutter-width/3;
312
$element-bottom-margin: ($gutter-width*2)/3;
313

314
// Breakpoints
315
$small-screen-up: 601px;
316
$medium-screen-up: 993px;
317
$large-screen-up: 1201px;
318
$small-screen: 600px;
319
$medium-screen: 992px;
320
$large-screen: 1200px;
321

322
// Typography
323
$roboto-font-path: "../fonts/roboto/";
324
$icons-font-path: "../fonts/material-design-icons/";
325
```