{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "event",
    "type" : "single",
    "title" : "USWDS Monthly Call - May 2022 |Digital.gov",
    "description": "USWDS Monthly Call - May 2022",
    "home_page_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/","feed_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/event/2022/05/19/uswds-monthly-call-may-2022/index.json","item" : [
    {"kicker" : "Optimizing Performance with USWDS 3.0","title" :"USWDS Monthly Call - May 2022","summary" : "The U.S. Web Design System (USWDS) team will show you how to reduce CSS size and optimize build time with the design system.","date" : "2022-05-19T14:00:00-05:00","date_modified" : "2025-01-27T19:42:55-05:00","start_date" : "2022-05-19T14:00:00-05:00","end_date" : "2022-05-19T15:00:00-05:00",
      "event_organizer" : "Digital.gov","host" : "U.S. Web Design System","registration_url" : "https://www.eventbrite.com/e/uswds-monthly-call-optimizing-performance-with-uswds-30-may-2022-tickets-335535073437 ","authors" : {"dan-williams" : "Dan Williams","james-mejia" : "James Mejia"},"topics" : {
        
            "budgeting-and-performance" : "Budgeting and performance",
            "software-engineering" : "Software engineering"
            },"primary_image" : { "uid" : "uswds-monthly-call-may-title-card", "alt" :
  "Title card image of USWDS logo, a multi-colored triangle shapes pentagon with the lines of text on a black background. The first test line has USWDS Monthly Call in white text. The second line has May 19, 2022 in yellow text.", "width" :
  "1200", "height" :
  "628", "credit" :
  "", "caption" :
  "", "format" :
  "png" },"content" :"\n\u003ca\n    href=\"https://s3.amazonaws.com/digitalgov/static/uswds-monthly-call-may-2022.pptx\"\u003eView the slides (PowerPoint presentation, 7.6 MB, 64 pages)\u003c/a\u003e\n\n\n\u003cdiv class=\"usa-accordion accordion\"\u003e\u003ch3 class=\"usa-accordion__heading\"\u003e\n    \u003cbutton\n      class=\"usa-accordion__button\"\n      title=\"View \"\n      aria-expanded=\"false\"\n      aria-controls=\"accordion-1\"\n    \u003e\n      \u003cspan class=\"icon\"\u003e\n          \u003csvg\n            class=\"usa-icon dg-icon dg-icon--standard margin-bottom-05\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          \u003e\n            \n            \u003cuse xlink:href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/uswds/img/sprite.svg#content_copy\"\u003e\u003c/use\u003e\n          \u003c/svg\u003e\n        \u003c/span\u003e\u003cspan class=\"src\"\u003e\n        \u003cstrong class=\"kicker\"\u003eSlide by Slide\u003c/strong\u003eUSWDS Monthly Call - Presentation Script for May 2022\n        \u003c/span\n      \u003e\n    \u003c/button\u003e\n  \u003c/h3\u003e\u003cdiv\n      id=\"accordion-1\"\n      class=\"accordion-body usa-accordion__content usa-prose\"\n    \u003e\u003cp\u003e\u003cstrong\u003eSlide 1:\u003c/strong\u003e Hi there and welcome to the U.S. Web Design System monthly call. For May 2022 — home of the May flowers that those April showers are said to bring —accompanied by this spring flower–colored USWDS logo. Today is also Global Accessibility Awareness Day. Thank you to everyone working to make our sites and services more useful, more usable, and more accessible to the folks that really need it.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 2:\u003c/strong\u003e My name is Dan Williams, and I\u0026rsquo;m the USWDS product lead and this is my avatar, dark hair, blue shirt, alert expression: close enough! Thanks for being here!\u003c/p\u003e\n\u003cp\u003eFirst, I\u0026rsquo;d like to mention that we\u0026rsquo;re recording this monthly call, so please refrain from turning on your camera. We will manually turn off any cameras to ensure the recording doesn\u0026rsquo;t show us on camera. Unfortunately, while we are recording this call, we currently aren\u0026rsquo;t able to share the video publicly.\u003c/p\u003e\n\u003cp\u003eI’d also like to remind you that all attendees must abide by the TTS Code of Conduct, which is available at [handbook.tts.gsa.gov/code-of-conduct] (handbook.tts.gsa.gov/code-of-conduct). We’ve posted the link to the code of conduct in the chat.\u003c/p\u003e\n\u003cp\u003eWe\u0026rsquo;ll be posting other links and references into the chat as we go along, and I encourage you to ask questions in the chat at any time. If any member of our team can answer your question in the chat, we\u0026rsquo;ll do so, otherwise there\u0026rsquo;ll be some time for questions and answers at the end of the hour. Also, be sure to introduce yourself in the chat as well — it\u0026rsquo;s nice to know who\u0026rsquo;s here. It\u0026rsquo;s good to have you here today.\u003c/p\u003e\n\u003cp\u003eFor those of you who find the chat distracting, you’re welcome to close or hide the chat window during the main presentation. You can reopen it later during the Q\u0026amp;A session at the end of this call.\u003c/p\u003e\n\u003cp\u003eSo thanks! And, with that, let\u0026rsquo;s get started!\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 3:\u003c/strong\u003e So what\u0026rsquo;s our agenda for today?\u003c/p\u003e\n\u003cp\u003eFirst we\u0026rsquo;ll show off a nice new site launch.\u003c/p\u003e\n\u003cp\u003eThen I\u0026rsquo;ve got just a little product update.\u003c/p\u003e\n\u003cp\u003eAnd then we\u0026rsquo;ll talk about packages and performance in USWDS 3.0.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 4:\u003c/strong\u003e So let\u0026rsquo;s get into it with site launches.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 5:\u003c/strong\u003e Just one this month: \u003ca href=\"https://www.pandemicoversight.gov/\"\u003epandemicoversight.gov\u003c/a\u003e, the home of the Pandemic Response Accountability Committee, overseeing more than $5 trillion dollars in pandemic related programs and spending. The pandemic oversight home page has a blue gov banner at the top of the page, a closeup of George Washington\u0026rsquo;s dollar bill portrait peering up from a hero section, and a red button that says \u0026ldquo;report fraud, waste, and abuse\u0026rdquo; up the the top-right corner.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 6:\u003c/strong\u003e Congratulations, and great work! Be sure to let our team know when a new site launches, either with an email or a note on the USWDS public Slack channel!\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 7:\u003c/strong\u003e So now, a quick product update.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 8:\u003c/strong\u003e Well, as you might have seen, \u003ca href=\"https://designsystem.digital.gov/whats-new/updates/2022/04/28/introducing-uswds-3-0/\"\u003ewe released USWDS 3.0 last month\u003c/a\u003e. We\u0026rsquo;ve been using it on our own sites, as well as Digital.gov. As a bit of foreshadowing to our presentation a bit later, the image on this page shows 3.0 made out of a wireframe mesh with colorful cubic packages at the vertices. Packages are central to USWDS 3.0, and we think there\u0026rsquo;s a lot of possibility for both performance improvements, and to really allow teams to tailor their implementations to their projects.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 9:\u003c/strong\u003e But yeah, USWDS 3.0 is out now, and we\u0026rsquo;re working to patch any issues we find or you report. We published a couple small bugfixes to our Sass theme files in \u003ca href=\"https://github.com/uswds/uswds/releases/tag/v3.0.1\"\u003eUSWDS 3.0.1\u003c/a\u003e and we\u0026rsquo;re readying a few more little bugfixes for a 3.0.2 release sometime in the next week or so.\u003c/p\u003e\n\u003cp\u003eIf you\u0026rsquo;re thinking about migrating — and you should — check out the \u003ca href=\"https://designsystem.digital.gov/documentation/migration/\"\u003emigration resources on our website\u003c/a\u003e and also feel free to join the \u003ca href=\"https://github.com/uswds/uswds/discussions/4660\"\u003emigration discussion on Github\u003c/a\u003e or on Slack. If you find bugs, let us know and we\u0026rsquo;ll get them fixed. If you run into any other issues or have questions related to migration, we\u0026rsquo;ll do our best to answer them.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 10:\u003c/strong\u003e Today, I want to talk about what I think is one of the major features of USWDS 3.0: the concept of USWDS packages, and its implications for performance and CSS size. Packages are a concept that has existed in USWDS since just after the launch of 2.0, but it\u0026rsquo;s only now that we\u0026rsquo;ve been able to do it properly and begin to provide a modular solution that allows teams to use only the parts of the design system that they need.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 11:\u003c/strong\u003e If we look back to the launch of USWDS 1.0, it was a much smaller codebase. We launched with 20 components, and a compiled CSS size of 95 KB.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 12:\u003c/strong\u003e USWDS 2.0 was built to grow, and grow it did. USWDS 2.0 launched with a new design language and a comprehensive suite of utility classes to support it. These utilities added some real weight to the compiled CSS size, however, and the default USWDS package grew to 271 KB of compiled CSS.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 13:\u003c/strong\u003e Over the course of USWDS 2, we doubled the number of components in the design system, bringing it up to 40 components and utilities. But again, each new component brings new classes and new CSS. By the time we get to USWDS 2.13.2, the USWDS package included 417 KB of compiled CSS. There\u0026rsquo;s a trend here, and the growth of the design system is always accompanied by a growth in the size of the compiled CSS.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 14:\u003c/strong\u003e So here we are at the launch of USWDS 3.0. This new version doesn\u0026rsquo;t add any new components, or any new utilities, but there is always more to come. And you could see this as something of a problem. Design systems and component libraries grow and grow, but the needs of existing websites grow more slowly, if at all. Teams should want to have the newest and best design system component code, but they don\u0026rsquo;t necessarily want to take a lot of bloated overhead along with that code.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 15:\u003c/strong\u003e With USWDS 3.0, USWDS can keep growing without bloating your project CSS. Its most significant change is an architectural one: Unbundling the design system into individual modular packages that teams can add a la carte instead of adding everything together, even the bits you don\u0026rsquo;t use.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 16:\u003c/strong\u003e So what is a package? In USWDS, a package is an independently installable feature, component, or bundle of features or components. If you think about the design system as a collection of components and features, a package is the building block: an individual component, or utility classes, or the design language itself, the definitions of the tokens, mixins, and functions. Each of these bits of functionality is a package. USWDS itself is a package — a package whose dependencies are every other package in the design system. In USWDS 3, it\u0026rsquo;s packages all the way down.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 17:\u003c/strong\u003e A package is something like \u003cstrong\u003eusa-banner\u003c/strong\u003e, the gov banner component.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 18:\u003c/strong\u003e Or \u003cstrong\u003eusa-footer\u003c/strong\u003e, the package of site footers.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 19:\u003c/strong\u003e Or \u003cstrong\u003euswds-utilities\u003c/strong\u003e, the package of utility classes.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 20:\u003c/strong\u003e You may have noticed that some packages are prefixed \u003cstrong\u003eusa-\u003c/strong\u003e and some packages are prefixed \u003cstrong\u003euswds-\u003c/strong\u003e. This isn\u0026rsquo;t just inconsistency. usa-prefixed packages are components, and they have the same name as their CSS class — the block part of the class name in BEM way of writing classes. If you see a class name in your codebase like \u003cstrong\u003eusa-identifer\u003c/strong\u003e, or \u003cstrong\u003eusa-skipnav\u003c/strong\u003e, or \u003cstrong\u003eusa-button\u003c/strong\u003e, that\u0026rsquo;s its package name. \u003cstrong\u003eusa-button–primary\u003c/strong\u003e is part of the \u003cstrong\u003eusa-button\u003c/strong\u003e package.\u003c/p\u003e\n\u003cp\u003euswds-prefixed classes are everything else. \u003cstrong\u003euswds-utilities\u003c/strong\u003e is one of the big ones of this type, but there\u0026rsquo;s also \u003cstrong\u003euswds-core\u003c/strong\u003e, which we\u0026rsquo;ll get to shortly, which contains all mixins, functions, and tokens. And \u003cstrong\u003euswds-global\u003c/strong\u003e, which is a bundle of global styles like normalize. There\u0026rsquo;s a uswds-form-controls package which includes all the individual form control packages like \u003cstrong\u003eusa-form\u003c/strong\u003e, \u003cstrong\u003eusa-input\u003c/strong\u003e, \u003cstrong\u003eusa-select\u003c/strong\u003e, etc.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 21:\u003c/strong\u003e Use just the design system components your project needs. If you don’t use the whole design system, you shouldn’t include the whole design system in your CSS. Every project has a different package footprint.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 22:\u003c/strong\u003e Some projects that use USWDS will have a very small package footprint. They may just use a couple key component packages, like the banner and the footer.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 23:\u003c/strong\u003e Many other projects may have more of a medium footprint, using only a few components — or just a few USWDS components in addition to custom components of their own.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 24:\u003c/strong\u003e Even the most complex projects — those with a large footprint — probably won\u0026rsquo;t use every component.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 25:\u003c/strong\u003e And there are even some projects that may use \u003cstrong\u003euswds-core\u003c/strong\u003e only. \u003cstrong\u003euswds-core\u003c/strong\u003e is a key package that allows projects to use the design language without adding CSS. For instance, an existing project could add the \u003cstrong\u003euswds-core\u003c/strong\u003e package to their codebase and experiment with translating their existing components and variables into USWDS design tokens. They could start working with USWDS mixins, functions, and tokens without adding anything to the size of their existing CSS.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 26:\u003c/strong\u003e \u003cstrong\u003euswds-core\u003c/strong\u003e is a special package that powers every other package. It\u0026rsquo;s the engine of the design system. It doesn’t emit CSS, but contains the complete USWDS design language. Its Sass defines the tokens, functions, mixins, settings, and variables that all other USWDS Sass is built from.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 27:\u003c/strong\u003e uswds-core powers project settings: We define our project settings with a statement like \u003cstrong\u003e@use \u0026ldquo;uswds-core\u0026rdquo; with custom settings\u003c/strong\u003e.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 28:\u003c/strong\u003e uswds-core powers project Sass: Every Sass file that uses USWDS needs to begin with the statement \u003cstrong\u003e@use \u0026ldquo;uswds-core\u0026rdquo; as asterisk\u003c/strong\u003e.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 29:\u003c/strong\u003e Packages power the design system. Starting in USWDS 3, our code is written in a component-centered package structure. Packages are the organizing principle. If you want to find anything related to the banner component, look in the \u003cstrong\u003eusa-banner\u003c/strong\u003e directory. If you want to find icons, look in \u003cstrong\u003eusa-icons\u003c/strong\u003e. An individual package includes everything a component needs to work: Styles, Tests, Templates, Assets, Content, and JavaScript.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 30:\u003c/strong\u003e And again, every component is a package. Components have different needs, but each component is an individual package.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 31:\u003c/strong\u003e And since components have different needs, it makes sense that they\u0026rsquo;re actually all different sizes.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 32:\u003c/strong\u003e All together, these packages bundle up to a \u003cstrong\u003euswds\u003c/strong\u003e package that includes 417 KB of compiled CSS by default. Consumed as a single bundle, the USWDS package is quite large. And depending on your project settings, your project\u0026rsquo;s CSS could be even larger.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 33:\u003c/strong\u003e If you\u0026rsquo;re just using the banner and the footer, you don\u0026rsquo;t need all this overhead. The \u003cstrong\u003eusa-banner\u003c/strong\u003e package is 32 KB. The \u003cstrong\u003eusa-footer\u003c/strong\u003e package is 43 KB. That 75 KB in total, or 11 KB gzipped. If you use only a couple components Using packages can save you over 80% versus the bundled version.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 34:\u003c/strong\u003e Where\u0026rsquo;s that 32 KB in \u003cstrong\u003eusa-banner\u003c/strong\u003e coming from? Some of it is usa-banner styles, but a complex component like banner might also include other components inside it. And banner \u003cstrong\u003euses usa-layout-grid\u003c/strong\u003e (18 KB), \u003cstrong\u003eusa-media-block\u003c/strong\u003e (0.1 KB), and the \u003cstrong\u003euswds fonts\u003c/strong\u003e (6 KB) to render properly, in addition to the 7.9 KB of CSS directly related to banner classes. All these dependent packages are automatically included as when you use the \u003cstrong\u003eusa-banner\u003c/strong\u003e package in your project.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 35:\u003c/strong\u003e The footer has dependencies as well — even more than banner. Every package has its own dependencies.  This is part of why it was difficult to use packages effectively in USWDS 2. The compiler wasn;t smart enough to know when multiple packages used the same dependencies to only include those redundant dependencies once. It was hard to manage dependencies and prevent duplicate code.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 36:\u003c/strong\u003e USWDS 3 uses a more modern version of Sass that\u0026rsquo;s built for just this problem. It\u0026rsquo;s smart enough now. Shared dependencies are only included once. We can see here that both usa-footer and usa-banner use \u003cstrong\u003eusa-layout-grid\u003c/strong\u003e and \u003cstrong\u003euswds-fonts\u003c/strong\u003e. Sass Module syntax in USWDS 3.0. assures that these dependencies are included and only included once.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 37:\u003c/strong\u003e Most packages have a fixed size. Now matter what your settings, \u003cstrong\u003eusa-accordion\u003c/strong\u003e will always be about 10 KB. But some packages are affected by settings.\u003c/p\u003e\n\u003cp\u003eOne of those packages is the layout grid. We can imagine the CSS of the layout grid as the five gold dots at the top of this slide.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 38:\u003c/strong\u003e The layout grid package includes responsive classes based on the responsive breakpoints set in your project. Adding responsive breakpoints to the \u003cstrong\u003e$theme-utility-breakpoints\u003c/strong\u003e setting adds new CSS rules. Adding a breakpoint adds new rules, like the five new dots next to \u003cstrong\u003emobile\u003c/strong\u003e.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 39:\u003c/strong\u003e The more breakpoints you add, the more CSS you get. Adding \u003cstrong\u003emobile-lg\u003c/strong\u003e adds another line of dots.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 40:\u003c/strong\u003e Including many breakpoints can have a big effect because responsive breakpoints can serve as a CSS multiplier. Where we started with five dots across the top of the screen, we now have 40.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 41:\u003c/strong\u003e But let\u0026rsquo;s start again. This time with utilities. Just one little gold dot. What could go wrong? Utilities start small, but they\u0026rsquo;re even more sensitive to settings than the layout grid.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 42:\u003c/strong\u003e You can also add state-based utility classes in settings, but each new state adds a bit more code, like this new pink dot for hover.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 43:\u003c/strong\u003e You can also add active classes, like this red dot…\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 44:\u003c/strong\u003e And focus classes, like this purple dot…\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 45:\u003c/strong\u003e And visited classes, like this blue dot…\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 46:\u003c/strong\u003e Now these are multiplied by the responsive breakpoints. It\u0026rsquo;s important to think of each new utility variant as a multiplier. The single dot is now 25.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 47:\u003c/strong\u003e The more output utilities, the more output CSS. Even a few new variants, spread over multiple utilities can have a big effect. Now the single dot is 100 dots.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 48:\u003c/strong\u003e And now it\u0026rsquo;s 400. Things can multiply quickly. The more utilities you\u0026rsquo;re using, the bigger the effect.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 49:\u003c/strong\u003e Before you know it, utility size can get out of hand. Now the single dot is 1600 dots. In most projects, the bulk of unused code is coming from utility classes.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 50:\u003c/strong\u003e So let\u0026rsquo;s take a look inside the utilities package. Like the expanding hexagon package on this page, the utilities package is flexible. The utilities package has more output options than any other package.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 51:\u003c/strong\u003e The utilities package is made up of over 60 individual utilities. In this case, they aren\u0026rsquo;t packages since they aren\u0026rsquo;t independent of the utilities package, so we call each of these utilities a module.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 52:\u003c/strong\u003e But just as with components packages, no project is going to use all utility modules. You want utilities modules tailored to your project. In fact, as we will see in a couple minutes, most production websites should probably use only a few utility modules.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 53:\u003c/strong\u003e The USWDS documentation goes into more detail about using utility modules, what modules are available, how to identify them and how much CSS they output by default. Find the utility modules docs at designsystem.digital.gov/utilities.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 54:\u003c/strong\u003e You tell the design system which modules your project uses with a new setting in USWDS 3.0 — in fact, it\u0026rsquo;s the only new setting in USWDS 3.0: \u003cstrong\u003e$output-these-utilities\u003c/strong\u003e. This new setting allows you to create a list of the utility modules your project needs.\u003c/p\u003e\n\u003cp\u003eIn the code example, we see \u003cstrong\u003e$output-these-utilities\u003c/strong\u003e in action, including align-items, background-color, border, color, flex, margin-vertical, padding, and width.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 55:\u003c/strong\u003e And the USWDS settings docs go into more details on adjusting utility breakpoints and other utility settings. FInd the settings docs at designsystem.digital.gov/documentation/settings.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 56:\u003c/strong\u003e Two of the most useful utility settings are \u003cstrong\u003e$theme-utility-breakpoints\u003c/strong\u003e (which sets the breakpoints for utilities and the layout grid) and \u003cstrong\u003e$[module]-settings\u003c/strong\u003e like \u003cstrong\u003e$width-settings\u003c/strong\u003e or \u003cstrong\u003e$padding-settings\u003c/strong\u003e.\u003c/p\u003e\n\u003cp\u003eIn the code example, we see $theme-utility-breakpoints set to output \u003cstrong\u003emobile-lg\u003c/strong\u003e, \u003cstrong\u003etablet\u003c/strong\u003e, \u003cstrong\u003etablet-lg\u003c/strong\u003e, and \u003cstrong\u003edesktop\u003c/strong\u003e responsive variants.\u003c/p\u003e\n\u003cp\u003eWe also see \u003cstrong\u003e$width-settings\u003c/strong\u003e setting the \u003cstrong\u003ewidth\u003c/strong\u003e utility module to output with a responsive variant.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 57:\u003c/strong\u003e And the component packages docs collect what we\u0026rsquo;ve seen here today. It\u0026rsquo;s where you can find all available packages and learn more about how to use them in your project. Find the packages docs at designsystem.digital.gov/components/packages.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 58:\u003c/strong\u003e You can also find component package information at the bottom of any component page, like this one for Banner. It shows how to use the package in your Sass entry point and also what packages are dependencies of the component package. You can find the banner component docs at designsystem.digital.gov/components/banner.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 59:\u003c/strong\u003e When you\u0026rsquo;re done using packages in your code, your Sass entry point will look a bit like this. Instead of forwarding \u0026ldquo;uswds,\u0026rdquo; we\u0026rsquo;re instead forwarding \u0026ldquo;usa-banner,\u0026rdquo; \u0026ldquo;usa-footer,\u0026rdquo; and \u0026ldquo;uswds-utilities.\u0026rdquo;\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 60:\u003c/strong\u003e Your Sass entry point and your theme settings file will then become a practical project profile: a snapshot of what makes your project your project, at least from the USWDS perspective. You can always refer back to these files when you need to know what components your implementation uses and what utility modules. This may come in handy when a version of USWDS releases and you want to know how it\u0026rsquo;ll affect your project.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 61:\u003c/strong\u003e Now I\u0026rsquo;d like to bring on James Mejia, a developer and a contractor on the USWDS Core team. James is going to help me show how we\u0026rsquo;ve used packages and settings optimization on our Public Sans website to dramatically reduce the amount of compiled CSS we\u0026rsquo;re shipping. Hi there James!\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 62:\u003c/strong\u003e DEMO\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 63:\u003c/strong\u003e And now, let\u0026rsquo;s get into Q\u0026amp;A.\u003c/p\u003e\n\u003cp\u003e[Q\u0026amp;A]\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSlide 64:\u003c/strong\u003e Thanks for joining today’s USWDS monthly call. Next month, we\u0026rsquo;re going to look at how we\u0026rsquo;re improving our contribution model and how we bring bugfixes, enhancements, and feature requests into the design system. We hope to see you in June!\u003c/p\u003e\n\u003cp\u003eAs always, I encourage you to join our community in the #uswds-public Slack channel so you can follow our progress, get answers, and contribute to the discussion.\u003c/p\u003e\n\u003cp\u003eFollow us on Github at github.com/uswds/uswds, check out our website, and visit designsystem.digital.gov/about/community to join us and your colleagues across government who are using USWDS.\u003c/p\u003e\n\u003cp\u003eThank you, and see you next month!\u003c/p\u003e\n\u003c/div\u003e\u003c/div\u003e\n\n\u003cp\u003eNow that USWDS 3.0 is out in the world, let’s look at how we can optimize it to improve performance. We’ll dive into tips and techniques you can use to reduce CSS size and chip away at your build time.\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eThis event is part of a monthly series that takes place on the third Thursday of each month. Don’t forget to set a placeholder on your personal calendar for our future events this year.\u003c/em\u003e\u003c/p\u003e\n\u003ch2 id=\"about-the-uswds\"\u003eAbout the USWDS\u003c/h2\u003e\n\u003cp\u003e\u003ca href=\"https://designsystem.digital.gov/\"\u003eThe U.S. Web Design System\u003c/a\u003e is a toolkit of principles, guidance, and code to help government teams design and build accessible, mobile-friendly websites backed by user research and modern best practices.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://designsystem.digital.gov/\"\u003eThe U.S. Web Design System\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/uswds/uswds/issues\"\u003eContribute on GitHub\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"mailto:uswds@support.digitalgov.gov\"\u003eEmail Us\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://digital.gov/communities/uswds/\"\u003eJoin our community\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://twitter.com/uswds\"\u003eFollow @uswds on Twitter\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n",
      "branch" : "bc-archive-content-3",
      "filename" :"2022-05-09-uswds-monthly-call-may-2022.md",
      
      "filepath" :"events/2022/05/2022-05-09-uswds-monthly-call-may-2022.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/bc-archive-content-3/content/events/2022/05/2022-05-09-uswds-monthly-call-may-2022.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/bc-archive-content-3/content/events/2022/05/2022-05-09-uswds-monthly-call-may-2022.md","slug" : "uswds-monthly-call-may-2022","url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/event/2022/05/19/uswds-monthly-call-may-2022/"
    }
  ]
}