primer-layout
Advanced tools
primer-layout - npm Package Compare versions
Comparing version 1.7.0-alpha.eb2780e6 to 1.7.0-alpha.eba8f309
@@ -91,3 +91,3 @@ --- | ||
| ```html title="Column widths" | ||
| ```erb title="Column widths" | ||
| <div> | ||
@@ -103,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). | ||
@@ -181,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> | ||
@@ -195,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. | ||
@@ -213,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. | ||
@@ -219,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> | ||
@@ -248,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. | ||
@@ -256,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> | ||
@@ -259,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.eb2780e6", | ||
| "version": "1.7.0-alpha.eba8f309", | ||
| "name": "primer-layout", | ||
@@ -34,3 +34,3 @@ "description": "Containers, rows, and columns for creating page layout.", | ||
| "dependencies": { | ||
| "primer-support": "4.8.0-alpha.eb2780e6" | ||
| "primer-support": "4.8.0-alpha.eba8f309" | ||
| }, | ||
@@ -37,0 +37,0 @@ "keywords": [ |
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.2%
83537
Dependency changes
+ Addedprimer-support@4.8.0-alpha.eba8f309(transitive)
- Removedprimer-support@4.8.0-alpha.eb2780e6(transitive)