Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
primer-utilities
Advanced tools
primer-utilities - npm Package Compare versions
Comparing version 4.15.0-alpha.c9c2ddd0 to 4.15.0-alpha.ca348b59
| --- | ||
| title: Animations | ||
| path: utilities/animations | ||
| example_layout: toggle | ||
@@ -15,3 +16,3 @@ status: Stable | ||
| ```html | ||
| ```erb | ||
| <span class="anim-fade-in"><%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub!</span> | ||
@@ -24,3 +25,3 @@ ``` | ||
| ```html | ||
| ```erb | ||
| <span class="anim-fade-out"><%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub!</span> | ||
@@ -33,3 +34,3 @@ ``` | ||
| ```html | ||
| ```erb | ||
| <div class="anim-fade-up"><%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub!</div> | ||
@@ -42,3 +43,3 @@ ``` | ||
| ```html | ||
| ```erb | ||
| <div class="anim-fade-down"><%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub!</div> | ||
@@ -51,3 +52,3 @@ ``` | ||
| ```html | ||
| ```erb | ||
| <div class="anim-scale-in bg-gray-dark text-white p-2"><%= octicon("mark-github") %></div> | ||
@@ -68,3 +69,3 @@ ``` | ||
| ```html | ||
| ```erb | ||
| <%= octicon("mark-github", :class => "anim-pulse") %> | ||
@@ -77,3 +78,3 @@ ``` | ||
| ```html | ||
| ```erb | ||
| <div class="Box hover-grow m-3 p-4"> | ||
@@ -80,0 +81,0 @@ <%= octicon("mark-github", :height => 32) %> |
| --- | ||
| title: Borders | ||
| status: New release | ||
| path: utilities/borders | ||
| status: Stable | ||
| status_issue: https://github.com/github/design-systems/issues/72 | ||
@@ -5,0 +6,0 @@ --- |
| --- | ||
| title: Box shadow | ||
| status: New release | ||
| path: utilities/box-shadow | ||
| status: Stable | ||
| status_issue: https://github.com/github/design-systems/issues/269 | ||
@@ -21,3 +22,3 @@ --- | ||
| These types of shadows are typically applied to elements with borders, like [`Box`](/styleguide/css/styles/core/components/box). | ||
| These types of shadows are typically applied to elements with borders, such as the [Box component](/css/components/box). | ||
@@ -28,3 +29,3 @@ ```html | ||
| <div class="Box-row"> | ||
| <h3 class="mb-0">Organization</h3> | ||
| <h3 class="m-0">Organization</h3> | ||
| </div> | ||
@@ -55,3 +56,3 @@ <div class="Box-row"> | ||
| ```html | ||
| ```erb | ||
| <div class="col-6"> | ||
@@ -86,3 +87,3 @@ <a class="d-block box-shadow-medium px-3 pt-4 pb-6 position-relative rounded-1 overflow-hidden no-underline" href="#"> | ||
| <div class="box-shadow-large rounded-2 overflow-hidden"> | ||
| <img src="<%= image_path "modules/site/org_example_nasa.png" %>" class="img-responsive" alt="NASA is on GitHub"> | ||
| <img src="https://github.com/nasa.png" class="img-responsive" alt="NASA is on GitHub"> | ||
| </div> | ||
@@ -89,0 +90,0 @@ ``` |
| --- | ||
| title: Details | ||
| status: New release | ||
| path: utilities/details | ||
| status: Stable | ||
| --- | ||
@@ -5,0 +6,0 @@ |
| --- | ||
| title: Flexbox | ||
| status: New release | ||
| source: /app/assets/stylesheets/primer-core/utilities/lib/layout.scss | ||
| path: utilities/flexbox | ||
| status: Stable | ||
| status_issue: https://github.com/github/design-systems/issues/157 | ||
@@ -579,3 +579,3 @@ --- | ||
| All flexbox utilities can be adjust per [breakpoint](../../objects/grid#breakpoints) using the following formulas: | ||
| All flexbox utilities can be adjusted per [breakpoint](/css/objects/grid#breakpoints) using the following formulas: | ||
@@ -648,6 +648,6 @@ - `d-[breakpoint]-[property]` for `display` | ||
| ```html | ||
| ```erb | ||
| <div class="border p-3 d-flex flex-column flex-md-row flex-md-items-center"> | ||
| <div class="pr-0 pr-md-3 mb-3 mb-md-0 d-flex flex-justify-center flex-md-justify-start"> | ||
| <img style="max-width:100px; max-height:100px;" src="/images/gravatars/gravatar-user-420.png" /> | ||
| <img style="max-width:100px; max-height:100px;" src="https://github.com/github.png" /> | ||
| </div> | ||
@@ -665,4 +665,4 @@ <div class="d-flex text-center text-md-left"> | ||
| This section lists flexbox bugs that affect browsers we [currently support](.../styles#user-content-browser-support). | ||
| This section lists flexbox bugs that affect browsers we currently support (**citation needed**). | ||
| **1. Minimum content sizing of flex items not honored:** Some browsers don't respect flex item size. Instead of respecting the minimum content size, items shrink below their minimum size which can create some undesirable results, such as overflowing text. The workaround is to apply `flex-shrink: 0;` to the items using `d-flex`. This can be applied with the `flex-shrink-0` utility. For more information read [philipwalton/flexbugs](https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored). |
| --- | ||
| title: Layout | ||
| path: utilities/layout | ||
| status: Stable | ||
@@ -54,3 +55,3 @@ --- | ||
| There are known issues with using `display:table` and wrapping long strings, particularly in Firefox. You may need to use `table-fixed` on elements with `d-table` and apply column widths to table cells, which you can do with our [column width styles](../../objects/grid#column-widths). | ||
| There are known issues with using `display:table` and wrapping long strings, particularly in Firefox. You may need to use `table-fixed` on elements with `d-table` and apply column widths to table cells, which you can do with our [column width styles](/css/objects/grid#column-widths). | ||
@@ -69,3 +70,3 @@ ```html | ||
| ### Responsive display | ||
| A selection of display utilities are able to be applied or changed per [breakpoint](../../objects/grid#breakpoints). `.d-block`, `.d-none`, `.d-inline`, and `.d-inline-block` are available as responsive utilities using the following formula: `d-[breakpoint]-[property]`. For example: `d-md-inline-block`. Each responsive display utility is applied to the specified breakpoint and up. | ||
| A selection of display utilities are able to be applied or changed per [breakpoint](/css/objects/grid#breakpoints). `.d-block`, `.d-none`, `.d-inline`, and `.d-inline-block` are available as responsive utilities using the following formula: `d-[breakpoint]-[property]`. For example: `d-md-inline-block`. Each responsive display utility is applied to the specified breakpoint and up. | ||
@@ -122,3 +123,3 @@ In the following example, the `ul` element switches from `display: block` on mobile to `display: inline-block` at the `md` breakpoint, while the list items remain inline. | ||
| ### Responsive floats | ||
| Float utilities can be applied or changed per [breakpoint](../../objects/grid#breakpoints). This can be useful for responsive layouts when you want an element to be full width on mobile but floated at a larger breakpoint. | ||
| Float utilities can be applied or changed per [breakpoint](/css/objects/grid#breakpoints). This can be useful for responsive layouts when you want an element to be full width on mobile but floated at a larger breakpoint. | ||
@@ -168,3 +169,3 @@ Each responsive float utility is applied to the specified breakpoint and up, using the following formula: `float-[breakpoint]-[property]`. For example: `float-md-left`. Remember to use `.clearfix` to clear. | ||
| <div class="one-fourth column"> | ||
| <img class="width-fit bg-gray" src="/images/gravatars/gravatar-user-420.png" alt="width fitted octocat" /> | ||
| <img class="width-fit bg-gray" src="https://github.com/github.png" alt="width fitted octocat" /> | ||
| </div> | ||
@@ -195,3 +196,3 @@ ``` | ||
| ```html | ||
| ```erb | ||
| <div class="d-table border border-gray"> | ||
@@ -213,2 +214,3 @@ <div class="d-table-cell height-full v-align-middle pl-3"> | ||
| _Note how the other elements are displayed as if "Two" were in its normal position and taking up space._ | ||
| ```html | ||
@@ -218,3 +220,3 @@ <div class="d-inline-block float-left bg-blue text-white m-3" style="width:100px; height:100px;"> | ||
| </div> | ||
| <div class="d-inline-block float-left position-relative bg-blue text-white m-3" style="width:100px; height:100px; top:12px; left:12px;"> | ||
| <div class="d-inline-block float-left position-relative bg-blue text-white m-3" style="width:100px; height:100px; top:12px; left:12px;"> | ||
| Two | ||
@@ -221,0 +223,0 @@ </div> |
| --- | ||
| title: Margin | ||
| path: utilities/margin | ||
| status: Stable | ||
| --- | ||
| Margin utilities are based on a global [spacing scale](../../support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that share the same properties, and allows to achieve many different page layouts using the same styles. | ||
| Margin utilities are based on a global [spacing scale](/css/support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that share the same properties, and allows to achieve many different page layouts using the same styles. | ||
@@ -106,3 +107,3 @@ {:toc} | ||
| All margin utilities, except `mx-auto`, can be adjusted per [breakpoint](../../objects/grid#breakpoints) using the following formula: `m[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up. | ||
| All margin utilities, except `mx-auto`, can be adjusted per [breakpoint](/css/objects/grid#breakpoints) using the following formula: `m[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up. | ||
@@ -109,0 +110,0 @@ ```html |
| --- | ||
| title: Padding | ||
| path: utilities/padding | ||
| status: Stable | ||
| --- | ||
| Padding utilities are based on a global [spacing scale](../../support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that could share the same properties, and allows to achieve many different page layouts using the same styles. | ||
| Padding utilities are based on a global [spacing scale](/css/support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that could share the same properties, and allows to achieve many different page layouts using the same styles. | ||
@@ -88,3 +89,3 @@ {:toc} | ||
| All padding utilities can be adjusted per [breakpoint](../../support/breakpoints) using the following formula: <br /> `p-[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up. | ||
| All padding utilities can be adjusted per [breakpoint](/css/support/breakpoints) using the following formula: <br /> `p-[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up. | ||
@@ -103,3 +104,3 @@ ```html | ||
| It is intended to be used with [container styles](../../objects/grid#containers) | ||
| It is intended to be used with [container styles](/css/objects/grid#containers) | ||
@@ -106,0 +107,0 @@ ```html |
| --- | ||
| title: Typography | ||
| path: utilities/typography | ||
| status: Stable | ||
| --- | ||
| Type utilities are designed to work in combination with line-height utilities so as to result in more sensible numbers wherever possible. These also exist as [variables](/primer/support/typography/#typography-variables) that you can use in components or custom CSS. | ||
| Type utilities are designed to work in combination with line-height utilities so as to result in more sensible numbers wherever possible. These also exist as [variables](/css/support/typography#typography-variables) that you can use in components or custom CSS. | ||
| {:toc} | ||
| Font sizes are smaller on mobile and scale up at the `md` [breakpoint](/primer/support/breakpoints) to be larger on desktop. | ||
| Font sizes are smaller on mobile and scale up at the `md` [breakpoint](/css/support/breakpoints) to be larger on desktop. | ||
@@ -12,0 +13,0 @@ | Scale | Font size: mobile | Font size: desktop | 1.25 line height | 1.5 line height | |
| { | ||
| "version": "4.15.0-alpha.c9c2ddd0", | ||
| "version": "4.15.0-alpha.ca348b59", | ||
| "name": "primer-utilities", | ||
@@ -31,6 +31,6 @@ "description": "Immutable, atomic CSS classes to rapidly build product", | ||
| "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.ca348b59" | ||
| }, | ||
@@ -37,0 +37,0 @@ "keywords": [ |
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.01%
458225
Dependency changes
+ Addedprimer-support@4.8.0-alpha.ca348b59(transitive)
- Removedprimer-support@4.8.0-alpha.c9c2ddd0(transitive)