{"_id":"@cruglobal/cru-content-designs","_rev":"17-25cfc204bf1ca7bdfa67211e7b778379","name":"@cruglobal/cru-content-designs","dist-tags":{"latest":"1.1.1"},"versions":{"0.4.0":{"name":"@cruglobal/cru-content-designs","version":"0.4.0","author":{},"license":"ISC","_id":"@cruglobal/cru-content-designs@0.4.0","maintainers":[{"name":"johnplastow","email":"john.plastow@cru.org"},{"name":"omicron7","email":"brian.zoetewey@cru.org"},{"name":"ozzieorca","email":"ozzieorca@gmail.com"}],"dist":{"shasum":"a6e46d574480abc595153d2ce0b008e2fccadd19","tarball":"https://registry.npmjs.org/@cruglobal/cru-content-designs/-/cru-content-designs-0.4.0.tgz","fileCount":129,"integrity":"sha512-ZyG6/PCFl2RhqFf0Ni7wkeJVCC/1G3lqn+fy97pAWqb/VwZO7L+Mi1TyIVSuEtnW2k91hvmD9EmfL5Ewz6p37Q==","signatures":[{"sig":"MEYCIQCZP7FBKsskbuSQjp24IdFQGkWbRu7Tfm/aqdywv8G77wIhAMhe6jjrUbXrN/cunBoKnf34e/IlkQqlkzgrr7lxkwKK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1194170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguqHICRA9TVsSAnZWagAAEZ8P/2Rs17pZ8bl60q3DHoJ2\nzGoL3klsf3e0JhUczSX1ZQi3lsP2ihpVmrQvF9qyT3N2yEuLxJUeMFmic8Ho\nzVGMKDmv17WAPs3SyfLuv6wA8I6/Fe5SvIgKnwM+HFjYRM1cwn4+1oOcyeQB\nqIB5hT2J0YGwfiI/dHeCRiZNBXjJk4+bq1PovZ+1hFfTsOy5nZJim3NOC6sv\ncOmoUol/LOr1Ysgko4ixWRw+zngdY3uDm4E9DzUdQ3lDTObvd075hIKNcxJz\nmrrMKLkanR3FEV4D08tzqA9j28q3jHmcwAftR1dL0QvBnRuf9jYlNt9hRzsN\nNaPaq1xYA7HEYUMPv6ANaqWR5e+oNh94FhtybIJ5kDEDToCVpzI0wiFdeUxH\nZ2m2simekSuX8HNTqbNT22RjsDBcMQ8PS3VjlxZ1IYHZ6mLoL+QWILURCNM4\nfrgqNxjlKTwqMLHS0LPahn4vwyPZZIGtqISdWpQZzbkeFsTylRP/1zRMXayF\ntJ4FoG6UFAuGVbmv+2menX6+2HWtB/2e5y85uJARFHEfZzWXoLElAbGQzey9\nJtz4USpzjecNRd1iyTH83IdB2xOFl7orZeHkZwlMlDeMkiSAZ2gKNf2mdVsJ\nmwibJnqu5D0BUke+3ejdcywAxyCpG184UGgWNpBwDipfXD7xByQ09ANhpbNj\n4BTI\r\n=rYiN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"gulp build","start":"gulp"},"_npmUser":{"name":"ozzieorca","email":"ozzieorca@gmail.com"},"description":"Designs for use on cru.org and other Cru digital properties utilizing official branding guidelines.","directories":{},"_hasShrinkwrap":false,"devDependencies":{"gulp":"^4.0.2","gulp-sass":"^4.1.0","node-sass":"^6.0.0","gulp-notify":"^3.2.0"},"_npmOperationalInternal":{"tmp":"tmp/cru-content-designs_0.4.0_1622843848516_0.40248911060763115","host":"s3://npm-registry-packages"}},"0.5.0":{"name":"@cruglobal/cru-content-designs","version":"0.5.0","author":{},"license":"ISC","_id":"@cruglobal/cru-content-designs@0.5.0","maintainers":[{"name":"johnplastow","email":"john.plastow@cru.org"},{"name":"omicron7","email":"brian.zoetewey@cru.org"},{"name":"ozzieorca","email":"ozzieorca@gmail.com"}],"dist":{"shasum":"10ea6969e39e664fd5e5931114e25fce664770c2","tarball":"https://registry.npmjs.org/@cruglobal/cru-content-designs/-/cru-content-designs-0.5.0.tgz","fileCount":133,"integrity":"sha512-HfriO5R1nF45oWtB0NPFe1R4EEtHmL7k6S1RHC37F1BrsK0tk4b52y1v/EVP4NPlkq3T+o3mYbfXX+LLDgWTUA==","signatures":[{"sig":"MEUCIQD2EmIxxpFJXFyuyBXFY7TEyTYvfJboYXXSWfMrW1limgIgGAs8P/wvsAhoJGNnHFIeIhjHg1KLR32Sy59W6MAp6Yg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":626513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg36IGCRA9TVsSAnZWagAAYRkP/RzApJVYmK3YyKs3j93F\nFmBQBMzphGaTvyt5Es+kQ4xJTTBvxnfe17vW/JnZYplIBGLlH9ORDCgPYuk0\n2euCGxegQTIs4/Yz+qLJD8MRoUTl8JWIOX6OA+rvXqvFPAFsuT0Fb24tdlmr\nXsT/dvp9gCKqv4gN14ujJJdixxdtvTcY25d/Rbzmd4XzFrVhbD8EAv2fSH5H\n/PIVcbf4Q+Ho9AOEYSWhovNitNDV4YlbUVWvLYE2qJj8a8Z3glXMkG0DyAJx\ny3qHO4HxJ8R7dQGIvGmI+F4Zq+dK5foJ0dCXw7ZAF1gxU+1EvCoGLQWUS1aE\ndQ79xL285dWCpAGy09NFY8GWkDrTQIlelsmfXhvBIa448/AIx0v6ATJAiX8p\nQRbSt2IxYQjzTHahOX9A6ynz1mNsYR/BtRDLoEB2Slx5bRGo4mstswRldZQI\ne4onkpPw2LTPWH3UW9kE+cYhwB1tCzXerp8USagnReSFVSPcHh1Y45TLP0D5\nHHfw8bMLEUHdfiSuRg6WiDEW4hjBmZuP1QTRgYpNYfCHjf/ZTRlW8BGMTZ5J\noU6CGXMPOU/xLgG4KNSPRAO3ncTv3tfGsb69PhySLi6VuFQRxCvWfjYuCGOY\nH83qGncivNIobcT4X7+JCLPK8cPt9pqOMRe1RiGHeu9mNX8Ymy8rMugulKlp\n9Esr\r\n=nWuI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"gulp build","start":"gulp"},"_npmUser":{"name":"ozzieorca","email":"ozzieorca@gmail.com"},"description":"Designs for use on cru.org and other Cru digital properties utilizing official branding guidelines.","directories":{},"_hasShrinkwrap":false,"devDependencies":{"gulp":"^4.0.2","sass":"^1.35.1","gulp-sass":"^4.1.0","gulp-notify":"^3.2.0"},"_npmOperationalInternal":{"tmp":"tmp/cru-content-designs_0.5.0_1625268742149_0.5549500678915238","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@cruglobal/cru-content-designs","version":"1.0.0","author":{},"license":"ISC","_id":"@cruglobal/cru-content-designs@1.0.0","maintainers":[{"name":"johnplastow","email":"john.plastow@cru.org"},{"name":"omicron7","email":"brian.zoetewey@cru.org"},{"name":"ozzieorca","email":"ozzieorca@gmail.com"}],"dist":{"shasum":"d8acdb7d53df70e7976cb7d78cfd4310863f4d18","tarball":"https://registry.npmjs.org/@cruglobal/cru-content-designs/-/cru-content-designs-1.0.0.tgz","fileCount":133,"integrity":"sha512-ShwA89DCnI7GC0IJ43CtIxKBXUQAc1SR+jEE30ykgJJstTFAkLtau9T0OiD71SpGybT1VYO1MGB64KBT49nn2w==","signatures":[{"sig":"MEQCIBI7jDcbVx8NMjdCdBK8Kcpx1ghzrR0BOpGDJ8T3iynXAiAbmARVhDEGpjFrW8SgqbIQU2qndYhaMUAFM7DhHmYonA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":623940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5LNFCRA9TVsSAnZWagAAK9kP+gO4x52HnCaTgqriW84+\nwJCU5iI0tVvvWquDfnN3vSBcgpM2dKgUc2A+AnI43vIJUfcNVHzi3WPTnQMB\nx08uQJFSdQ3jn6JxC4WmNasZPZbyfNsK2sXOVVHlSyead7+fpPZvpgA6CBrq\n1HkCkUhAZXzG0Tsfa//8YoXXA3PpYwwY7zodMDSQ0tXoab7ZXMzDysc8m3jB\nn7H3ZTO53+9MhMHdU0aqo3pRtjCswKqXlkDvfhZopMF2IU5KGgHKpaoIFHI5\nKD4DZt54bqv09Gp0d1CT5iZbZpmeNLlEAYjkNfJVz51OpgVnApaPI8ARY1pz\nI0M32g6AlmmHpQ6OFM8/oee66Pykkcs5XR02i0Z6JN//qyzwJ/vqJRrYKVlV\nUxZjzBPog90kWQzWWyRhbzx4xtkrDdMQcBG6xSOkGD1ni5vg85KX1FeJkt2m\nrIuTwbJR2Y3WUoZHImH8mIbnfR6XPezTWrr3T4tDDNtrLUNdGYfuoNGwCg+J\nbe0YjK4u9vpwcDnf76ALfWb/qEDVt0jWSGwc0MyZTKtb/evVsPDISDQlm9eb\nCQYg/TuTT9AeV7dA8pHaRnxGRwxTg8/4LElvzW6Vk4HYNp4BAub5ovhLr6Nx\nynjV4xo1DqeImJnicAxRj+tr/h57rvJOa4lXQieTN0mktwDYv/tcsJfxnW8E\np2m/\r\n=T074\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"gulp build","start":"gulp"},"_npmUser":{"name":"ozzieorca","email":"ozzieorca@gmail.com"},"description":"Designs for use on cru.org and other Cru digital properties utilizing official branding guidelines.","directories":{},"_hasShrinkwrap":false,"devDependencies":{"gulp":"^4.0.2","sass":"^1.35.1","gulp-sass":"^4.1.0","gulp-notify":"^3.2.0"},"_npmOperationalInternal":{"tmp":"tmp/cru-content-designs_1.0.0_1625600836681_0.10953129000219897","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@cruglobal/cru-content-designs","version":"1.1.0","author":{},"license":"ISC","_id":"@cruglobal/cru-content-designs@1.1.0","maintainers":[{"name":"johnplastow","email":"john.plastow@cru.org"},{"name":"omicron7","email":"brian.zoetewey@cru.org"},{"name":"ozzieorca","email":"ozzieorca@gmail.com"}],"dist":{"shasum":"0ff7850b02c0faeca729c9fb3b8d612dc01a7dc6","tarball":"https://registry.npmjs.org/@cruglobal/cru-content-designs/-/cru-content-designs-1.1.0.tgz","fileCount":133,"integrity":"sha512-MuZ9/nmEiGfeEO94zdi2DngXmQkRZUcQcee0qaqRFF/4pnBPCffXmjjJZRge0bctBpqYQBgLk+P+FW54hFW6Fw==","signatures":[{"sig":"MEQCIHmsmpO1tXmEaDzETWeAvVDuaQ9LrS0T2DRIQF7fzN30AiANqYDXnGwJlF7nmb6GFoa68ACnl7UOq1JRiMdzlT5Qow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":634789,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg51NICRA9TVsSAnZWagAAYscQAISwgBNfo+0NQ4gLuKTj\ndtVho+2G3MbbRvpQc2zA0aEeYIkIJSN9Y1xrZrjlw1QhdeNyXCa/AL7TV1v/\nXy5rAR8NUJRfFKZhGJ593Xu6RKnhME034wPq49hcHiHpJBXgfLIlXKxTVybl\nRm6VfYvdsUCTqEqDP5M2a0SiqFFqGimFc5o2jPO49Wl9ITjARydHYdBixkfA\n21Xq5F3J0HEn7qxwSN5dIquhKvklhQH/7+Jn+0XMOhvtuf6Ch+RTDorXC+AG\nGHx6F3vteFaWDLrdNKy0jTwO7GROIXfiOr/Q4qCB1ngfF+7YF/vPgD6Dh/mE\nwm/AlIlGYcxLQiPNWbGTtuq0Go3EBO6MJeH72GJ1RV0QUJ3bW417bQxNUFuQ\nhyY6GcPbecvtOP7p21lOsfSYrNg7CxuNp7m3BKQLu90hTW3YBp8j1ejr9jF6\n55Zj3MO0Kt1Iusqkc22YLaVdYLda9BGSAFGUSbUSg8rCewJgbVflx+wI5QIC\nCzCQU5LXoD/liq5XnoRE7LBwaqUWnZapgTZgzdRGbKmsFnsEmYLes4qQYH+w\nfmKoKLxu4BBvTqGpJr1a4tic59W4DiHQ5qI8/QIVQRCVLuGy4IAUcOfD+NhB\nfo07Z1h1Q0nWMH4Onev0sZCO76o+UHRa0q+M7MK6ccPmhlWcvplMQlruja9t\n+uKq\r\n=vatH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"gulp build","start":"gulp"},"_npmUser":{"name":"ozzieorca","email":"ozzieorca@gmail.com"},"description":"Designs for use on cru.org and other Cru digital properties utilizing official branding guidelines.","directories":{},"_hasShrinkwrap":false,"devDependencies":{"gulp":"^4.0.2","sass":"^1.35.1","gulp-sass":"^4.1.0","gulp-notify":"^3.2.0"},"_npmOperationalInternal":{"tmp":"tmp/cru-content-designs_1.1.0_1625772872219_0.06916001551026718","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"@cruglobal/cru-content-designs","version":"1.1.1","author":{},"license":"ISC","_id":"@cruglobal/cru-content-designs@1.1.1","maintainers":[{"name":"johnplastow","email":"john.plastow@cru.org"},{"name":"omicron7","email":"brian.zoetewey@cru.org"},{"name":"ozzieorca","email":"ozzieorca@gmail.com"}],"dist":{"shasum":"7831b0ef946dd2dc34e43d1b6f0c5555c80c2aef","tarball":"https://registry.npmjs.org/@cruglobal/cru-content-designs/-/cru-content-designs-1.1.1.tgz","fileCount":133,"integrity":"sha512-NavxWCjiKQbhShdxwk1lUJSkpKiLDKUC9fu2vL1y9Y3+jy9BjUJ3aF7W5uKSP7K94zuCv9SwLFoNWoftUA1Duw==","signatures":[{"sig":"MEYCIQCj1OOHRGOtGMde00wSXoDdrX0S28Ooaz7qzTTpifk8bwIhAJH+33nkgOGhriMT4Ksf5YfF6bkG+cWW/om9TO2Kjeqc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":635834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg6LKNCRA9TVsSAnZWagAA4v4P/31a+CQvUYoIhGOuYMPA\nOa17XIp1YBcLx40ym0HEqM+CYf9c//DZSG/l2FkT4NNWosC91GVEzg6WeZN+\nse6GGehPype44x864P/lvI6Z5+S9bdENeFZd9VY9xJm7Z3RGtLQMRENFHyoj\no6HTwKoZjYmmkvg3rTIv2fGClGxLgGlvuEFuOrF7N2TT8ndtV7k65M1LBOfU\nm0ks/K9Df1xY/KEF4a0utdURvBQL/OaDtFkfvhoSDsk6IiOKdQtFKViuFgAq\n2OTtlsyurPiC4tryaXR8G0R+XVF3oyxUoSzZNhcqH+943z3ZzXW3FjlGO4Ep\n6/mNWdwi1IG6YxbR0IHwGbdUzDe5JdUe+nORtb9+83Uzi3H1U8qrna2Vbrm/\nTJQaQcVHG2s0xRClv9qY3Q84Ad9b4iDI54xeyV9fJABCi4V4evz8EVPNAcxu\nGVGt96lpCf1zcgaiNK+kVRVcZemlkHFec6NKwwwZvYosqtdRNcLsD3G0QsXE\n6aDPaN5ub6DrSLX22KJZrNCsOowCDQnNP+Wd+VgbKJWfMKuyf5gHqViqt8vJ\nBYU9MCGC89oMfW7wzkSSu1x6U8KBgw9+aR/iNKbETQnUlCMopqoHmZSbScAc\n/7Oc9w64pNc0PyFuj242vLGFqeB45DtYA35s07AVG21r7drySj6mJlXh/pbb\n2ylL\r\n=1ky4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"gulp build","start":"gulp"},"_npmUser":{"name":"ozzieorca","email":"ozzieorca@gmail.com"},"description":"Designs for use on cru.org and other Cru digital properties utilizing official branding guidelines.","directories":{},"_hasShrinkwrap":false,"devDependencies":{"gulp":"^4.0.2","sass":"^1.35.1","gulp-sass":"^4.1.0","gulp-notify":"^3.2.0"},"_npmOperationalInternal":{"tmp":"tmp/cru-content-designs_1.1.1_1625862796910_0.9829346489611865","host":"s3://npm-registry-packages"}}},"time":{"created":"2021-06-04T21:57:28.168Z","modified":"2026-08-25T17:24:20.666Z","0.4.0":"2021-06-04T21:57:28.668Z","0.5.0":"2021-07-02T23:32:22.299Z","1.0.0":"2021-07-06T19:47:16.840Z","1.1.0":"2021-07-08T19:34:32.356Z","1.1.1":"2021-07-09T20:33:17.098Z"},"author":{},"license":"ISC","description":"Designs for use on cru.org and other Cru digital properties utilizing official branding guidelines.","maintainers":[{"email":"josh.starcher@cru.org","name":"twinge"},{"email":"jon@sherlockwatson.com","name":"jcwatson11"},{"email":"caleb.cox@cru.org","name":"canac-cru"},{"email":"daniel.frett@gmail.com","name":"frett"},{"email":"daniel@bizz-websites.com","name":"daniel.bizz"},{"email":"brian.zoetewey@cru.org","name":"omicron7"},{"email":"ryan.guinee@cru.org","name":"rwguinee"},{"email":"william.james@cru.org","name":"wjames1111"}],"readme":"# Cru Content Designs\n\nThe purpose of this repository is firstly to provide consistent branding for Cru's online properties. It's designed to be included in other projects as a git submodule, an [NPM package](https://www.npmjs.com/package/@cruglobal/cru-content-designs), or CDN via `https://unpkg.com/browse/@cruglobal/cru-content-designs@{version number}/`. Web projects can utilize the classes found in the CSS files \"out of the box\" or `@use` the SCSS files into their own project's SCSS files and compile everything together for a custom stylesheet.\n\nSecondly, this submodule serves as a development area for the core component styling for [cru.org](https://cru.org) which runs on [Adobe Experience Manager (AEM)](https://www.adobe.com/marketing/experience-manager.html). Those files can be found in `/cruorg`. The files here make use of SCSS variables and mixins defined in the `/scss` directory. Seeing how the designs for the core components were given as the examples of the desired cross-project consistent branding, it made sense to develop both in the same place.\n\n## Disclaimer\n\nThis submodule is still early in its development. Variables, mixins, functions, and classes may change periodically right now. Use at your own risk. Please contact John Plastow with any questions.\n\n## How to Incorporate into Your Project\n\nThere are a couple different ways this submodule can be incorporated into a project.\n\n1. Link one of the CSS files located in `/css` in your HTML file. Inside those files you'll find lots of pre-defined classes that your web project can utilize. **WARNING: These files are currently incomplete.**\n2. `@use` the SCSS files located in `/scss` in your own SCSS project and compile everything together for a custom stylesheet. \n\nYou'll probably need these two files when using option #2:\n\n```\n@use '{local-path-to-this-projects-directory}/scss/variables';\n@use '{local-path-to-this-projects-directory}/scss/mixins';\n```\n\n*Note - `@use` (and the similar `@forward`) at-rule are part of Sass's move to using modules rather than `@import`. You can find the documentation [here](https://sass-lang.com/documentation/at-rules). `@import` may still work for the time being, but it's scheduled to be deprecated in October 2021 and totally removed from Sass a year after that, so its use is not recommended.\n\n## Using the SCSS Files\n\nThis is the more complex, but much more powerful, way to use this project. All the compiled CSS was originally written in SCSS (a syntax variation of the CSS preprocessing language [SASS](https://sass-lang.com/)) and have largely been sorted into sub-directories according to the type of data they contain, namely variables, mixins, and classes.\n\nThe power of the SCSS is found in the variables and mixins. If you use the variables and mixins in this project and we need to tweak something for the sake of Cru branding, your website will be automatically updated the next time you update the project in your development environment and recompile the stylesheets.\n\n**Please use the variables and mixins! They were made for YOU!**\n\n### Two Media Query Strategies\n\nMuch of the web development world uses a mobile-first responsive web development approach, writing CSS for mobile browser sizes first and then working their way up. AEM, on the other hand, uses a desktop-first-ish strategy, writing CSS for the largest browser size first and then covering the rest with a combination of `min-width` and `max-width` definitions, never overriding any styles except the largest.\n\nHere's a comparison of the two responsive strategies using this submodule's default breakpoints: 768px and 1200px. We're going to set three different background colors to `body` - red on mobile, green on tablet, and blue on desktop.\n\n```\nMobile-first                        AEM\n\nbody {                              body {\n  background-color: red;              background-color: blue;\n  @media (min-width: 768px) {         @media (max-width: 768px) {\n    background-color: green;            background-color: red;\n  }                                   }\n  @media (min-width: 1200px) {        @media (min-width: 769px) and (max-width: 1200px) {\n    background-color: blue;             background-color: green;\n  }                                   }\n}                                   }\n```\n\n### Setting Options\n\nWhile this project is designed to keep branding consistent across various projects, there are some things that are customizable.\n\n* `$cru-import-source-sans` imports the official Cru branding font Source Sans Pro. Default: `true`\n* `$cru-import-material-icons` imports Material icons. Default: `false`\n* `$cru-import-material-icons-round` imports rounded Material icons. Default: `false`\n* `$cru-import-material-icons-outlined` imports outlined Material icons. Default: `false`\n* `$cru-aem-media-queries` changes the output format of the media query mixins from mobile-first to AEM-style. Default: `false`\n\n*Note - These options MUST be set when the first file is `@use`d that uses these options.\n\nInside `/scss` you'll find two non-underscored files: `aem.scss` and `mobile-first.scss`. These two files get compiled into their corresponding CSS files in `/css`. Both files `@use` the `_styles.scss` file and thus all the other files that `_styles.scss` `@forward`s. This project defaults to a mobile-first responsive strategy, so we have to tell it when we want to use AEM media queries instead. We do that by setting the variable `$cru-aem-media-queries` to `true` and passing it into `_styles.scss`. AEM  uses an additional breakpoint, 992px, that automatically gets utilized when `$cru-aem-media-queries` is `true`.\n\n### Important Media Query Information\n\n**Variables**\n\n* `$cru-breakpoint-xs` Default: 0\n* `$cru-breakpoint-md` Default: 768px\n* `$cru-breakpoint-lg` Default: 992px (AEM only)\n* `$cru-breakpoint-xl` Default: 1200px\n\n**Mixins**\n\nThere are three important mixins that anyone using this project should be aware of. These auto-create the media queries necessary based on the breakpoints you're using and adjusts the pixel value when necessary depending on whether you're using AEM or mobile-first.\n\n* `cru-media-breakpoint-down($var)` runs a `max-width` query, targeting everything at or below the value provided.\n* `cru-media-breakpoint-between($var1, $var2)` runs a `min-width` and `max-width` query, targeting everything between (and including) the values provided.\n* `cru-media-breakpoint-up($var)` runs a `min-width` query, targeting everything at or above the value provided.\n\nHere's an example using that same `background-color` demo from above.\n\n```\nMobile-first (original)             Mobile-first (w/ mixins)\n\nbody {                              body {\n  background-color: red;              background-color: red;\n  @media (min-width: 768px) {         @include cru-media-breakpoint-up($cru-breakpoint-md) {\n    background-color: green;            background-color: green;\n  }                                   }\n  @media (min-width: 1200px) {        @include cru-media-breakpoint-up($cru-breakpoint-xl) {\n    background-color: blue;             background-color: blue;\n  }                                   }\n}                                   }\n\nAEM (original)                                              AEM (w/ mixins)\n\nbody {                                                      body {\n  background-color: blue;                                     background-color: blue;\n  @media (max-width: 768px) {                                 @include cru-media-breakpoint-down($cru-breakpoint-md) {\n    background-color: red;                                      background-color: red;\n  }                                                           }\n  @media (min-width: 769px) and (max-width: 1200px) {         @include cru-media-breakpoint-between($cru-breakpoint-md, $cru-breakpoint-xl) {\n    background-color: green;                                    background-color: green;\n  }                                                           }\n}                                                           }\n```\n\n*The mixins look like more work than regular media queries. Do I have to use them?* No, but the mixins help ensure consistency in how the queries are written, easability of changing breakpoint values, and automatically make adjustments to the breakpoint values when a +/- 1px is needed, so their use is strongly encouraged.\n\n## Editing this Project\n\nRealize that this project has the potential to impact numerous web properties, so please edit with caution. Create your own branch off of main, submit a pull request, and tag John Plastow for review/approval. This project uses [Node.js](https://nodejs.org/), [Node Package Manager](https://www.npmjs.com/), and [Gulp](https://www.npmjs.com/package/gulp). You'll first need to open a terminal to the submodule's location and run `npm install` to download all the necessary packages. Running the `gulp` command in your terminal will watch both the branding and cru.org SCSS files and automatically compile them when a file is changed. *Ctrl + C* will end the `gulp` process.\n\n### Editing cru.org core component styles\n\nIf you're needing to work on cru.org core component styles, `/cruorg` contains everything you'll need. File paths in the rest of this section will be relative to `/cruorg`. Here's a breakdown of everything in that directory and how to use them:\n\n* `/index.php` displays all the styled components once they've been uncommented from the array on lines 4-25.\n* `/styles.scss` automatically pulls in and compiles the SCSS files from each component.\n* `/styles.css` is the compiled version of `styles.scss`.\n* `/dev.scss` adds a little more for the demo pages' styling.\n* `/dev.css` is the compiled version of `dev.scss`.\n* `/_branding-imports.scss` contains the branding variables and mixins needed for cru.org.\n* `/components` contains individual directories for each component cru.org uses.\n  * `{component}/{component}.php` is where the AEM HTML output for that component lives. Copy/paste the default HTML output from the AEM documentation found [here](https://www.aemcomponents.dev/). Though these files are meant for HTML, they're PHP so that repeating HTML output can be easily looped through. *Note - The components currently used by cru.org may not be fully up to date and thus not perfectly match up with the documentation page. Please verify the HTML with the cru.org staging environment.\n  * `{component}/{component}.scss` is where all in-development SCSS code for that component should live until the pull request has been approved and merged. This includes new variables, mixins, functions, and style rules. The styles will then be moved out of the component and into the branding files as needed.\n  * `{component}/{component}.css` is the compiled version of `{component.scss}`.\n\nA few notes:\n\n* Run `gulp` in your terminal to compile the SCSS.\n* Edit only the files contained in `/cruorg`.\n* Use the variables and mixins found in the branding files.\n* If you need to add a class, place it on the outermost `<div>` of the HTML copy/pasted from the AEM documentation.\n* I've created an `info` class to be used on the component PHP pages where you can write notes about any edits to the original HTML you made or special SCSS decisions. For an example of how these SCSS and PHP files work together, check out what's been done for the title component.\n\n## Currently Used By\n\n* Cru's main website - [cru.org](https://cru.org) (in progress)\n* Cru Store (previously known as Cru Press) - [crustore.org](https://crustore.org) (on hold)\n","readmeFilename":"README.md"}