{"library":"primer-utilities","title":"Primer CSS Utilities","description":"primer-utilities provides a collection of immutable, atomic CSS utility classes, designed to facilitate rapid UI development. It forms a foundational part of the Primer Design System, originally developed by GitHub to style its own interfaces. The package's philosophy emphasizes single-purpose classes to promote consistency and reduce custom CSS. The current stable version is 5.0.0, published in January 2019. This standalone package is now superseded by modules within the @primer/css monorepo, which represents the actively maintained version of Primer. While primer-utilities@5.0.0 remains available on npm, it is no longer actively developed or directly maintained as a separate entity.","language":"javascript","status":"abandoned","last_verified":"Tue Apr 21","install":{"commands":["npm install primer-utilities"],"cli":null},"imports":["@import \"primer-utilities/index.scss\";","","@import \"primer-utilities/lib/align\";"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"/* styles.scss */\n@import \"primer-utilities/index.scss\";\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n line-height: 1.5;\n}\n\n.my-component {\n background-color: var(--color-bg-default);\n border: var(--border-width-thin) solid var(--color-border-default);\n border-radius: var(--border-radius-2);\n}\n\n// To compile:\n// npx sass styles.scss:styles.css\n\n\n\n\n\n \n \n Primer Utilities Quickstart\n \n\n\n
\n

Hello, Primer Utilities!

\n
\n

This demonstrates basic Primer Utilities usage.

\n\n","lang":"scss","description":"Demonstrates how to import Primer Utilities via Sass and apply basic spacing, display, and typography classes to an HTML element. The compiled CSS needs to be linked in the HTML.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}