pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Briefly document the Row/Column system

Browse Source
This commit is contained in:
Andrew Croce 2018-07-06 16:05:31 -04:00
parent 51110c30bf
commit 6c17eb684a
1 changed files with 54 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
scss/README.md
View File

@ -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.
```
<div class='row'>
<div class='col'></div>
<div class='col'></div>
<div class='col'></div>
</div>
```
To make a column expand to fill up all available space relative to its sibling columns:
```
<div class='row'>
<div class='col col--grow'></div>
<div class='col'></div>
<div class='col'></div>
</div>
```
To add uniform padding to rows and columns:
```
<div class='row row--pad'>
<div class='col col--pad'></div>
<div class='col col--pad'></div>
<div class='col col--pad'></div>
</div>
```
Layouts and behaviors for specific row/col use cases should be handled on a case by case basis:
```
<div class='row row--pad foo'>
<div class='col col--pad foo__bar'></div>
<div class='col col--pad'></div>
<div class='col col--pad'></div>
</div>
...
.foo.row {
.col {
flex: 1;
}
.foo__bar {
flex: 2;
}
}
```