![]() ![]()
Here is an example of how to reference these assets in your index.html file:Īnd that’s it - you should now be able to copy our code samples into your index.html and start using the design system. Reference the stylesheet, library, and initializer in each HTML page or dynamic template in your project. Reference in the of your page, or inline its contents directly into the tag. This prevents component content from “flashing” or “shifting” while the page loads. Initializer: This small JavaScript file (less than 1 KB minified) helps the browser know if the USWDS JavaScript library is loading properly.Reference either uswds.js or at the end of the of your document. Library: This is the compiled JavaScript that controls component interactivity. ![]() For more about this, see Compiling USWDS Sass into CSS, below. Most projects will want to compile their own CSS from USWDS source Sass instead of using the precompiled version. To start, reference either uswds.css or in the of your document. ![]() Stylesheet: This is the compiled CSS stylesheet that describes how design system components look.Most projects require all of these to function properly. The three files critical to any USWDS project are the stylesheet, the JavaScript, and the initializer. Using USWDS CSS and JavaScript in your project These folders are to help organize any assets that are unique to your project and separate from the design system assets. You’ll notice in our example above that we also outline a stylesheets, images and javascript folder in your assets folder. Here is an example structure for how this might look: Otherwise, we recommend that you follow the steps outlined in this section.ĭownload the USWDS package directly from the latest USWDS release and uncompress that file.Ĭopy these files and folders into a relevant place in your project’s code base. If you’re using a framework or package manager that doesn’t support npm, you can find the source files in this repository and use them in your project. #WEBDESIGN DIRECTORIES UPGRADE#If you make customizations to the files in the package, any upgrade or re-installation will wipe them out. One of the benefits of using a package manager is its ease of upgrade and installation. Note: We do not recommend directly editing the design system files in node_modules. You can use the compiled files found in the directory or the source files in the directory. #WEBDESIGN DIRECTORIES INSTALL#Npm install -save module is now installed as a dependency. Make sure you have installed it correctly: Note for Windows users: If you are using Windows and are unfamiliar with Node or npm, we recommend following Team Treehouse’s tutorial for more information.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |