{"_id":"@aleph/nought-sass-mixins","_rev":"4-c338884706e908f2f64ae7e2bb01bfdb","name":"@aleph/nought-sass-mixins","dist-tags":{"latest":"3.0.0"},"versions":{"1.1.0":{"name":"@aleph/nought-sass-mixins","version":"1.1.0","author":{"name":"Aleph"},"license":"MIT","_id":"@aleph/nought-sass-mixins@1.1.0","maintainers":[{"name":"jordanburk","email":"jordan.g.burk@gmail.com"},{"name":"alephsf","email":"ping@alephsf.com"},{"name":"oppodeldoc","email":"matt@alephsf.com"}],"dist":{"shasum":"9295ff6bb901b3f1b9bcaab3a9f938d078c9c17c","tarball":"https://registry.npmjs.org/@aleph/nought-sass-mixins/-/nought-sass-mixins-1.1.0.tgz","fileCount":12,"integrity":"sha512-oxqjNU+VokMC9G67QPptiGfGzseECyxHPXT/kEttrF0C5tEljSb8tyXlX/0L2Bw8I/2jJ23/P7J5gRBhBMMuaw==","signatures":[{"sig":"MEYCIQCpk6f3dKblKyH2qyZk3WOZcyAr3WguA5+xUZpbB6U4DQIhALZywvBOsz/0LDFBqV+nS7J0LbKqGjtOka+GFqnUo7cW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkHeVjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrREg//ZNIMUbmR9DLiCiUB32fopBWLff725NP1fjIDOPw6Y+myAoY4\r\n8U4N+X0sUpLsDoOGCDcjSVOCFEav2bFaGSuN8ZNbQXe0c70gdBrIPOPKvvs1\r\ngn9JjrXeWW7Jk+HCWqDonIukglGyc1Zc87R8/sQnqyscmAwFifIHsKe7+zNJ\r\njW/DmqEdbNSymDRqHmqJ4O7bVFT2NHhwy+EC2PXWEu594b0SR7dmdcbgJrPg\r\n9q3qtD6I78g534uI99IzRLpPBpqRGbtvgQZMUF/FYY5+WRtYY/Qp5kNV4x/k\r\nyPInjIA7M9vLm1il9R1KNMIb24KRVmRWsZ5VakVABOVE6n9nhwDgLAy4eP3u\r\n6vBiPzV8Y8BGwqYuIfz+Tz0OeyonPjVR5+yjayfGgrbnM6F/I94/qcTbLZ5T\r\nEY5Hdr/4zjPyOsXHXOJfKAs76jL7x5DlZLMU8vpLYRX7xRRJWQJPah+31gK5\r\n5oIBViymrKmZa5o6S0d4AF3jYs+JO7f2V7eqKlrDsIFEPueGOgs5qE4ZDnHG\r\n6aK93INz4sptYCDFwhSRgDkrRq48OpWaNGim83DGnIakJsfvkZzRHun8BOxQ\r\nagwRnvWH/rPpr9lz/mu2gSBwOHYg1Knp4UmKp95HMzdl6mOoopIH+/wgMxqu\r\n7BYI81HnZuqyZtSFOJbUOx5uP/eW5DlQVjw=\r\n=wpYA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"sass/_index.scss","gitHead":"afe40e4b9257a7ee05c25f0bde29f47896f6a7d7","scripts":{"dev":"open test/index.html && sass --watch --update --style=expanded sass:test/dist","test":"stylelint \"**/*.{css,sass,scss}\""},"_npmUser":{"name":"alephsf","email":"ping@alephsf.com"},"_npmVersion":"9.4.0","description":"A set of useful mixins for use on sass projects","directories":{},"_nodeVersion":"16.13.1","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.59.3","prettier":"^2.8.6","stylelint":"^15.3.0","stylelint-scss":"^4.5.0","stylelint-order":"^6.0.3","stylelint-prettier":"^3.0.0","stylelint-config-standard-scss":"^7.0.1"},"_npmOperationalInternal":{"tmp":"tmp/nought-sass-mixins_1.1.0_1679680867203_0.04970672592462311","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@aleph/nought-sass-mixins","version":"2.0.0","author":{"name":"Aleph"},"license":"MIT","_id":"@aleph/nought-sass-mixins@2.0.0","maintainers":[{"name":"tusinga","email":"amanda@alephsf.com"},{"name":"alephsf","email":"ping@alephsf.com"},{"name":"oppodeldoc","email":"matt@alephsf.com"}],"dist":{"shasum":"ad5bf00ed9ff6afc0cc7df58bb3cd1da761397d6","tarball":"https://registry.npmjs.org/@aleph/nought-sass-mixins/-/nought-sass-mixins-2.0.0.tgz","fileCount":12,"integrity":"sha512-qzVxMHUjOhJsvP3yvZbcT8eaAvXygmjA6fqXmzdsG79hDyKU80NEqFoDy/v/j+H0TbNh49LTJTLpQInvhdgHMw==","signatures":[{"sig":"MEYCIQDsEyi1A4jLciLDWaY9REWIpzTk4btKaXjKC0SlB13QsgIhAMh9rmEBN7ceCjr/X1Hkwuq4HQrqDqMdpMwcQ2a7VmCf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":26684},"main":"sass/_index.scss","gitHead":"584b666a2d99140dbaa6ff12f4ff33146f3332ed","scripts":{"dev":"open test/index.html && sass --watch --update --style=expanded sass:test/dist","test":"stylelint \"**/*.{css,sass,scss}\""},"_npmUser":{"name":"tusinga","email":"amanda@alephsf.com"},"_npmVersion":"9.6.4","description":"A set of useful mixins for use on sass projects","directories":{},"_nodeVersion":"14.18.3","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.59.3","prettier":"^2.8.6","stylelint":"^15.3.0","stylelint-scss":"^4.5.0","stylelint-order":"^6.0.3","stylelint-prettier":"^3.0.0","stylelint-config-standard-scss":"^7.0.1"},"_npmOperationalInternal":{"tmp":"tmp/nought-sass-mixins_2.0.0_1684451142183_0.06739792194514238","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@aleph/nought-sass-mixins","version":"3.0.0","description":"A set of useful mixins for use on sass projects","main":"sass/_index.scss","scripts":{"dev":"open test/index.html && sass --watch --update --style=expanded sass:test/dist","test":"stylelint \"**/*.{css,sass,scss}\""},"author":{"name":"Aleph"},"license":"MIT","devDependencies":{"prettier":"^3.4.2","sass":"^1.83.4","stylelint":"^16.14.1","stylelint-config-standard-scss":"^14.0.0","stylelint-order":"^6.0.3","stylelint-prettier":"^5.0.3","stylelint-scss":"^6.11.0"},"_id":"@aleph/nought-sass-mixins@3.0.0","gitHead":"b6a14354a888c457e21e513a9cd6a06ab3206e37","_nodeVersion":"22.8.0","_npmVersion":"10.8.3","dist":{"integrity":"sha512-TWTnIu15aX5Wvpt47QgXIwXgvlhOawXLt4YZ4mlLyojn6meTrvvIaH64Nx3FRg8pVkjjtAaTl16fmJ11s/lovQ==","shasum":"e1715aca5e4f843299e12f0245b42bb99f17db85","tarball":"https://registry.npmjs.org/@aleph/nought-sass-mixins/-/nought-sass-mixins-3.0.0.tgz","fileCount":12,"unpackedSize":27693,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEFb6rbmiJVjJPiXuUQm4fEn3zL1zlErJw/2CnUMMAujAiEAqAJVH+n5h10ROcsj7NhpU7VI4HpJ0XmQHFs4U4e+8e4="}]},"_npmUser":{"name":"tusinga","email":"amanda@alephsf.com"},"directories":{},"maintainers":[{"name":"alephsf","email":"ping@alephsf.com"},{"name":"oppodeldoc","email":"matt@alephsf.com"},{"name":"tusinga","email":"amanda@alephsf.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/nought-sass-mixins_3.0.0_1738791384872_0.13952100535595524"},"_hasShrinkwrap":false}},"time":{"created":"2023-03-24T18:01:07.143Z","modified":"2025-02-05T21:36:25.330Z","1.1.0":"2023-03-24T18:01:07.433Z","2.0.0":"2023-05-18T23:05:42.364Z","3.0.0":"2025-02-05T21:36:25.067Z"},"author":{"name":"Aleph"},"license":"MIT","description":"A set of useful mixins for use on sass projects","maintainers":[{"name":"alephsf","email":"ping@alephsf.com"},{"name":"oppodeldoc","email":"matt@alephsf.com"},{"name":"tusinga","email":"amanda@alephsf.com"}],"readme":"# Nought Sass Mixins\n\nA collection of useful mixins! When Aleph bootstraps a new website project, we\nlike to leverage CSS Modules and Sass. While every project is different, our\nworkflow around layout grids, breakpoints and other global stuff is pretty\nmuch the same. Thus, we have this library!\n\n## Use It\n\n```\nyarn add -D @aleph/nought-sass-mixins\n```\nor\n```\nnpm i -D @aleph/nought-sass-mixins\n```\n\nDepending on how your framework standardizes Sass imports, you can import the\nwhole library directly, or use the different modules individually:\n\n```scss\n/// Everything, not using a namespace\n@use \"@aleph/nought-sass-mixins\" as *;\n\n/// Just the grids, not using a namespace\n@use \"@aleph/nought-sass-mixins/sass/grid\" as *;\n\n/// Just the utilities, with the default \"utils\" namespace\n@use \"@aleph/nought-sass-mixins/sass/utils\";\n\n/// Then, to reset a button\nbutton {\n    @include utils.buttonReset;\n}\n```\n\n## Including and Customizing for Your Project\nAll these mixins come with sensible defaults that can usually be overwritten\nby variables when `@use` or `@forward` them in your project. Details on specific \nvariables you can set are below, but here's a somewhat standard setup that might be\nuseful as a simple example. \n\nAssuming you are including this library as a complement to your own project-specific\nmixins, you might want a single `scss` file with all mixins in it that you can `@use`\nanywhere. If you wanted to keep all the defaults you'd just put this up top in your\n`_mixins.scss` file:\n\n```scss\n@forward \"@aleph/nought-sass-mixins\";\n```\n\nIf you wanted to instead override just the default global container width and padding, \nyou'd do this:\n```scss\n@forward \"@aleph/nought-sass-mixins\" with (\n  $container-width: 1180px\n  $container-padding: 36px\n);\n```\n\nFrom there, you can write a bunch of mixins in this file and then `@use` it in your\nproject wherever you like. \n\n\n## What's Inside\nThere are a few different modules available for use, and within them mixins\nthat may be useful to you. \n\n### Breakpoints\nConvenience mixins for media queries along a set system of breakpoints. This is based on\nBootstrap 5's media query mixins, but here they are updated to use range context media queries\ninstead of min-width and max-width. The default variable values can be\noverridden:\n```scss\n/// You can have as many breakpoints as you like, and call them whatever you like.\n/// Currently, this entire map needs to be overwritten to override defaults.\n$grid-breakpoints: (\n  xs: 0,\n  sm: 576px,\n  md: 768px,\n  lg: 992px,\n  xl: 1200px,\n  xxl: 1400px,\n);\n```\n\nDetailed usage docs [are available here](https://getbootstrap.com/docs/5.2/layout/breakpoints/), but here's the basic list of all mixins, assuming using default breakpoints:\n```scss\n@include media-breakpoint-up(md) { ... } // width >= 768px\n@include media-breakpoint-down(md) { ... } // width < 768px\n@include media-breakpoint-only(md) { ... } // 768px <= width < 992px\n@include media-breakpoint-between(md, xl) { ... } // 768px <= width < 1200px\n```\n\n### Grid\nThe layout grid module is a set of convenience features utilizing CSS Grids to manage\ncontainers and grids / columns inside them. Here are the default variables you can \noverride:\n\n```scss\n/// default settings for the \"grid()\" mixin\n$grid-column-count: 12;\n$grid-column-gap: 24px;\n$grid-row-gap: 24;\n\n/// NB! You can set this up however you want but the key names must\n/// match responsive breakpoint keys(from above) to work properly!\n$grid-responsive-column-counts: (\n  md: 8, /// e.g. by default, make the grid 8 columns at the \"md\" breakpoint\n  sm: 4,\n);\n\n/// NB! You can set this up however you want but the key names must\n/// match responsive breakpoint keys(from above) to work properly!\n$grid-responsive-column-gap: (\n  md: $grid-column-gap,\n  sm: $grid-column-gap,\n) !default; /// at the \"md\" and sm\" breakpoints\n\n/// NB! You can set this up however you want but the key names must\n/// match responsive breakpoint keys(from above) to work properly!\n$grid-responsive-row-gap: (\n  md: $grid-row-gap,\n  sm: $grid-row-gap,\n) !default; /// at the \"md\" and sm\" breakpoints\n\n/// Defaults for container() mixin\n$container-width: 1200px;\n$container-padding: 48px;\n/// NB! You can set this up however you want but the key names must\n/// match responsive breakpoint keys(from above) to work properly!\n$container-responsive-padding: (\n  md: $container-padding,\n  sm: 12px,\n) !default; /// at the \"md\" and sm\" breakpoints\n```\n\nHere's all the mixins with default args:\n```scss\n@include grid( // create a grid container\n    $columns: $grid-column-count, \n    $responsive-columns: true, /// if false, the grid won't automatically flex change column numbers at any width\n) { ... } \n\n@include grid; // 12 column grid, goes to 8 and 4 at md and sm breakpoints\n@include grid(5, false) // 5 column grid at all widths\n\n@include columns(\n  $startColumn, // container starts at the left edge of this column\n  $endColumn, // container ends at the left edge of this column's left gutter\n  $fullWidthBreakpoint: sm // container goes to full width at this breakpoint\n) { ... }\n\n@include columns(1, 7) // takes up the left 6 columns, goes to full-width at sm breakpoint\n@include columns(2, 4, false) // spans columns 2-3, doesn't go to full-width automatically\n\n\n@include spanColumns( // creates columns based on a span count\n  $spanColumns, // number of columns container spans\n  $startColumn: false, // start column for span, if left out it just starts at the next available column\n  $fullWidthBreakpoint: sm // container goes to full width at this breakpoint\n) { ... }\n\n@include spanColumns(2) // spans two columns, starting at next available space in a row.\n@include spanColumns(4, 1) // spans four columns starting all the way to the left.\n@include spanColumns(5, $fullWidthBreakpoint: md) // spans 5 columns, goes full-width at md breakpoint\n@include spanColumns(3, $fullWidthBreakpoint: false) // 3 columns, doesn't go to full width ever\n\n@include container() // a container div restricted to a max-width defined in $container-width\n@include fullBleed() // breaks out of a container to full bleed. Doesn't work inside a grid!\n@include containerGrid() // helper that sets up a default grid inside a container\n```\n\n### Utility Mixins\nHere's a little group of helpers that we use on most projects:\n\n```scss\n@include srOnly; // Hides from everything but Screen Readers\n@include buttonReset; // Kills off default button styles\n@include listReset; // Resets all styles on lists\n```\n\n## Testing and Contributing\nThis repo includes our stylelint standards you can run to make sure you're keeping everything\nclean. After cloning the repo and running `yarn` you can lint your work at any time with\n`yarn test` (Autofix with `yarn test --fix`).\n\nIf you run `yarn dev` you'll get a test page with the default styles compiled. You can \nplay with the features in the `test/index.html` to see how stuff's working.","readmeFilename":"README.md"}