diff --git a/scss/README.md b/scss/README.md index 79235853..29f3eec2 100644 --- a/scss/README.md +++ b/scss/README.md @@ -24,3 +24,57 @@ Overrides and Modifications --- When making modifications to the default USWDS components, please refer to the original source, and make a `.scss` file of the same name. Annotate the top of the file with a reference to the USWDS documentation and source code. + +Row/Column System +--- + +The USWDS current grid system is fairly outdated and does not cleanly meet the needs of the AT-ST UI. A simplified, flexbox-powered row/column system is implemented in its place. + +``` +
+
+
+
+
+``` + +To make a column expand to fill up all available space relative to its sibling columns: + +``` +
+
+
+
+
+``` + +To add uniform padding to rows and columns: + +``` +
+
+
+
+
+``` + +Layouts and behaviors for specific row/col use cases should be handled on a case by case basis: + +``` +
+
+
+
+
+ +... + +.foo.row { + .col { + flex: 1; + } + .foo__bar { + flex: 2; + } +} +```