primer-support
Advanced tools
primer-support - npm Package Compare versions
Comparing version 4.8.0-alpha.1a319bd0 to 4.8.0-alpha.1a7850cf
| --- | ||
| title: Breakpoints | ||
| path: support/breakpoints | ||
| status: Stable | ||
| source: https://github.com/primer/primer/blob/master/modules/primer-support/lib/mixins/layout.scss | ||
| --- | ||
@@ -20,5 +20,5 @@ | ||
| <small>**Note:** The `lg` breakpoint matches our current page width of `980px` including left and right padding of `16px` (`$spacer-3`). This is so that content doesn't touch the edges of the window when resized.</small> | ||
| **Note:** The `lg` breakpoint matches our current page width of `980px` including left and right padding of `16px` (`$spacer-3`). This is so that content doesn't touch the edges of the window when resized. | ||
| Responsive styles are available for [margin](../../utilities/margin/#responsive-margins), [padding](../../utilities/padding#responsive-padding), [layout](../../utilities/layout), [flexbox](../../utilities/flexbox#responsive-flex-utilities), and the [grid](../../objects/grid#responsive-grids) system. | ||
| Responsive styles are available for [margin](/css/utilities/margin#responsive-margins), [padding](/css/utilities/padding#responsive-padding), [layout](/css/utilities/layout), [flexbox](/css/utilities/flexbox#responsive-flex-utilities), and the [grid](/css/objects/grid#responsive-grids) system. | ||
@@ -30,3 +30,2 @@ ## Breakpoint variables | ||
| ```scss | ||
| // breakpoints | ||
@@ -49,3 +48,2 @@ $width-xs: 0; | ||
| ) !default; | ||
| ``` | ||
@@ -58,3 +56,3 @@ | ||
| ``` | ||
| ```scss | ||
| .styles { | ||
@@ -61,0 +59,0 @@ font-size: 28px; |
| --- | ||
| title: Spacing | ||
| path: support/spacing | ||
| status: Stable | ||
@@ -22,5 +23,5 @@ source: https://github.com/primer/primer/blob/master/modules/primer-support/lib/variables/layout.scss | ||
| These variables are encouraged to be used within components and custom CSS. The spacing scale is also used for [margin](../../utilities/margin) and [padding](../../utilities/padding) utilities. | ||
| These variables are encouraged to be used within components and custom CSS. The spacing scale is also used for [margin](/css/utilities/margin) and [padding](/css/utilities/padding) utilities. | ||
| See [primer-marketing-support](../../support/marketing-variables/) for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for [margin](../../utilities/marketing-margin) and [padding](../../utilities/marketing-padding). | ||
| See [primer-marketing-support](/css/support/marketing-variables) for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for [margin](/css/utilities/marketing-margin) and [padding](/css/utilities/marketing-padding). | ||
@@ -27,0 +28,0 @@ ## Em-based spacing |
| --- | ||
| title: Typography | ||
| path: support/typography | ||
| status: Stable | ||
| status_issue: https://github.com/github/design-systems/issues/329 | ||
| status: New release | ||
| source: https://github.com/primer/primer/blob/master/modules/primer-support/lib/variables/typography.scss | ||
@@ -14,3 +15,3 @@ --- | ||
| Font sizes are smaller on mobile and scale up at the `md` [breakpoint](./../breakpoints) to be larger on desktop. | ||
| Font sizes are smaller on mobile and scale up at the `md` [breakpoint](./breakpoints) to be larger on desktop. | ||
@@ -28,3 +29,3 @@ | Scale | Font size: mobile | Font size: desktop | 1.25 line height | 1.5 line height | | ||
| The typography scale is used to create [typography utilities](../../utilities/typography). | ||
| The typography scale is used to create [typography utilities](/css/utilities/typography). | ||
@@ -68,3 +69,3 @@ ## Typography variables | ||
| ## Typography Mixins | ||
| Typography mixins are available for heading styles and for our type scale. They can be used within components or custom CSS. The same styles are also available as [utilities](../../utilities/typography/#heading-utilities). which requires no additional CSS. | ||
| Typography mixins are available for heading styles and for our type scale. They can be used within components or custom CSS. The same styles are also available as [utilities](/css/utilities/typography#heading-utilities). which requires no additional CSS. | ||
@@ -71,0 +72,0 @@ Heading mixins are available for `h1` through to `h6`, this includes the font-size and font-weight. Example: |
| { | ||
| "version": "4.8.0-alpha.1a319bd0", | ||
| "version": "4.8.0-alpha.1a7850cf", | ||
| "name": "primer-support", | ||
@@ -28,3 +28,3 @@ "description": "Sass variables, mixins, and functions for use in our components.", | ||
| "prepublishOnly": "../../script/notify pending", | ||
| "publish": "../../script/notify success" | ||
| "postpublish": "../../script/notify success" | ||
| }, | ||
@@ -31,0 +31,0 @@ "keywords": [ |
@@ -34,2 +34,3 @@ # Primer Support | ||
| title: Support | ||
| path: support/index | ||
| --> | ||
@@ -42,7 +43,8 @@ | ||
| We've documented variables, mixins, and the systems they are built on for the following: | ||
| - [Breakpoints](./support/breakpoints) | ||
| - [Colors](./support/color-system) | ||
| - [Spacing](./support/spacing) | ||
| - [Typography](./support/typography) | ||
| - [Breakpoints](/css/support/breakpoints) | ||
| - [Colors](/css/support/color-system) | ||
| - [Spacing](/css/support/spacing) | ||
| - [Typography](/css/support/typography) | ||
| <!-- %enddocs --> | ||
@@ -49,0 +51,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
- Number of lines in readme file
- increased by3.51%
59
Worsened metrics
- Total package byte prevSize
- decreased by-0.08%
31842