primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-02 16:13:02 +03:00
Code Issues Projects Releases Wiki Activity

docs(marketing-utilities): tidy up layout docs

Browse Source
This commit is contained in:
Shawn Allen 2019-01-23 16:31:28 -08:00
parent bd3488bdb0
commit 68c3e18979
1 changed files with 5 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
modules/primer-marketing-utilities/docs/layout.md
View File

@ -13,16 +13,14 @@ Marketing layout utilities build on top of [primer-core utilities](/css/utilitie
Position elements from all four element edges (`top`, `right`, `bottom`, and `left`) using any spacing utility from the global spacing scale and the marketing spacing scale (from `$spacer-1` to `$spacer-12`), including negative and 0 values.
Commonly used with `.position-absolute` to position decorative assets and shapes on marketing sites.
Use these with `.position-absolute` to position decorative assets and shapes on marketing sites.
In an effort to reduce css bloat, responsive breakpoints are only supported for `md` and `lg` breakpoints. There is no support for `sm` and `xl` breakpoints.
In an effort to reduce the size of our CSS, responsive breakpoints are only supported for `md` and `lg` breakpoints. **There is no support for `sm` and `xl` breakpoints.**
```html
<div class="position-relative p-6 bg-gray">
<div class="position-absolute top-2 top-md-0 top-lg-8 border bg-white p-2">
<span class="d-md-none">.top-2</span>
<span class="d-none d-md-inline d-lg-none">.top-md-0</span>
<span class="d-none d-lg-inline">.top-lg-8</span>
</div>
<div class="border bg-white position-absolute top-2">.top-2</div>
<div class="border bg-white position-absolute position-lg-static right-md-4">.right-md-4</div>
<div class="border bg-white position-lg-absolute left-lg-1">.left-lg-1</div>
</div>
```