primer-layout
Advanced tools
primer-layout - npm Package Compare versions
Comparing version 1.7.0-alpha.c9c2ddd0 to 1.7.0-alpha.c9e70d2f
| --- | ||
| title: Grid | ||
| status: New release | ||
| path: objects/grid | ||
| status: Stable | ||
| status_issue: https://github.com/github/design-systems/issues/88 | ||
@@ -90,3 +91,3 @@ source: https://github.com/primer/primer/blob/master/modules/primer-layout/lib/grid.scss | ||
| ```html title="Column widths" | ||
| ```erb title="Column widths" | ||
| <div> | ||
@@ -102,3 +103,3 @@ <div class="col-4 float-right p-2 border text-red"> | ||
| Using column offset classes can push a div over X number of columns. They work responsively using the [breakpoints outlined below](../grid#responsive-grids). | ||
| Using column offset classes can push a div over X number of columns. They work responsively using the [breakpoints outlined below](#responsive-grids). | ||
@@ -180,10 +181,10 @@ ```html title="Offset columns" | ||
| <ul class="list-style-none"> | ||
| <li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="/broccolini.png" alt="broccolini" /></li><!-- | ||
| --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="/jonrohan.png" alt="jonrohan" /></li><!-- | ||
| --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="/muan.png" alt="muan" /></li><!-- | ||
| --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="/pmarsceill.png" alt="pmarsceill" /></li><!-- | ||
| --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="/sophshep.png" alt="sophshep" /></li><!-- | ||
| --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="/cmwinters.png" alt="cmwinters" /></li><!-- | ||
| --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="/jeejkang.png" alt="jeejkang" /></li><!-- | ||
| --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="/mdo.png" alt="mdo" /></li> | ||
| <li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="https://github.com/broccolini.png" alt="broccolini" /></li><!-- | ||
| --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="https://github.com/jonrohan.png" alt="jonrohan" /></li><!-- | ||
| --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="https://github.com/muan.png" alt="muan" /></li><!-- | ||
| --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="https://github.com/pmarsceill.png" alt="pmarsceill" /></li><!-- | ||
| --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="https://github.com/sophshep.png" alt="sophshep" /></li><!-- | ||
| --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="https://github.com/cmwinters.png" alt="cmwinters" /></li><!-- | ||
| --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="https://github.com/jeejkang.png" alt="jeejkang" /></li><!-- | ||
| --><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="https://github.com/mdo.png" alt="mdo" /></li> | ||
| </ul> | ||
@@ -194,3 +195,3 @@ ``` | ||
| ## Display table grids | ||
| Using [display table utilities](../../utilities/layout#display) with columns gives you some alternative layout options. | ||
| Using [display table utilities](/css/utilities/layout#display) with columns gives you some alternative layout options. | ||
@@ -212,3 +213,3 @@ A useful example is being able to keep the height of the container equal across a row when the length of content may differ. | ||
| ``` | ||
| You can also create an alternative [media object](../../utilities/layout#the-media-object) layout with `.display-table` and column widths. | ||
| You can also create an alternative [media object](/css/utilities/layout#the-media-object) layout with `.display-table` and column widths. | ||
@@ -218,3 +219,3 @@ ```html title="Table grid alternative" | ||
| <div class="col-2 d-table-cell v-align-middle"> | ||
| <img class="width-full avatar" src="/github.png" alt="github" /> | ||
| <img class="width-full avatar" src="https://github.com/github.png" alt="github" /> | ||
| </div> | ||
@@ -247,3 +248,3 @@ <div class="col-10 d-table-cell v-align-middle pl-4"> | ||
| You can use [flex utilities](../../utilities/flexbox) on the container and columns to create a flexbox grid. | ||
| You can use [flex utilities](/css/utilities/flexbox) on the container and columns to create a flexbox grid. | ||
@@ -255,3 +256,3 @@ This can be useful for keeping columns the same height, justifying content and vertically aligning items. The flexbox grid is also great for working with responsive layouts. | ||
| <div class="col-2 d-flex flex-items-center flex-items-center flex-md-items-start"> | ||
| <img class="width-full avatar mb-2 mb-md-0" src="/github.png" alt="github" /> | ||
| <img class="width-full avatar mb-2 mb-md-0" src="https://github.com/github.png" alt="github" /> | ||
| </div> | ||
@@ -258,0 +259,0 @@ <div class="col-12 col-md-10 d-flex flex-column flex-justify-center flex-items-center flex-md-items-start pl-md-4"> |
| { | ||
| "version": "1.7.0-alpha.c9c2ddd0", | ||
| "version": "1.7.0-alpha.c9e70d2f", | ||
| "name": "primer-layout", | ||
@@ -31,6 +31,6 @@ "description": "Containers, rows, and columns for creating page layout.", | ||
| "prepublishOnly": "../../script/notify pending", | ||
| "publish": "../../script/notify success" | ||
| "postpublish": "../../script/notify success" | ||
| }, | ||
| "dependencies": { | ||
| "primer-support": "4.8.0-alpha.c9c2ddd0" | ||
| "primer-support": "4.8.0-alpha.c9e70d2f" | ||
| }, | ||
@@ -37,0 +37,0 @@ "keywords": [ |
@@ -40,5 +40,5 @@ # Primer Layout | ||
| title: Layout | ||
| path: objects/layout | ||
| status: Deprecated | ||
| status_issue: https://github.com/github/design-systems/issues/59 | ||
| key: /css/styles/core/objects/layout | ||
| --> | ||
@@ -45,0 +45,0 @@ |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.21%
83537
Dependency changes
+ Addedprimer-support@4.8.0-alpha.c9e70d2f(transitive)
- Removedprimer-support@4.8.0-alpha.c9c2ddd0(transitive)