mirror of
https://github.com/primer/css.git
synced 2024-12-02 07:53:06 +03:00
21c5ebc01b
* Add v18 migration guide * Update colors.mdx * Move theming to support * Delete color-system.mdx * Update nav.yml * Fix color imports in the docs * Create small-papayas-prove.md * Update theming.md * Update colors.mdx * Replace V1 with V2 classes * More docs updates
1.7 KiB
1.7 KiB
| title | sort_title | path | status | source | bundle |
|---|---|---|---|---|---|
| Marketing layout | Layout Marketing | utilities/marketing-layout | Stable | https://github.com/primer/css/blob/main/src/marketing/utilities/layout.scss | marketing-utilities |
Marketing layout utilities build on top of primer-core utilities, adding the option of responsive positioning.
Position elements with spacing utilities
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.
Use these with .position-absolute to position decorative assets and shapes on marketing sites.
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.
<div class="position-relative p-6 color-bg-subtle">
<div class="border color-bg-default position-absolute top-2">.top-2</div>
<div class="border color-bg-default position-absolute position-lg-static right-md-4">.right-md-4</div>
<div class="border color-bg-default position-lg-absolute left-lg-1">.left-lg-1</div>
</div>
Negative offset columns
Using column offset classes can pull a div over X number of columns to the left. Negative offsets are available in spacings from 1 to 7.
<div class="mx-auto border" style="width: 300px">
<div class="offset-n1 col-4 border p-3">.offset-n1</div>
<div class="offset-n2 col-4 border p-3">.offset-n2</div>
</div>