客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
开源软件名称（OpenSource Name）：uswds/uswds开源软件地址(OpenSource Url)：https://github.com/uswds/uswds开源编程语言(OpenSource Language)：SCSS 50.7%开源软件介绍(OpenSource Introduction)：United States Web Design System
The United States Web Design System includes a library of open source UI components and a visual style guide for U.S. federal government websites. This repository is for the design system code itself. We maintain another repository for the documentation and website. To see the design system and its documentation on the web, visit https://designsystem.digital.gov. Contents
Recent updatesInformation about the most recent release of the design system can always be found in the release history. We include details about significant updates and any backward-incompatible changes along with a list of all changes. USWDS 3.0 is our most recent major release. Getting startedWe’re glad you’d like to use the design system — here’s how you can get started:
What's included in USWDSThe USWDS package includes compiled assets in a As of USWDS 3.0.0, our codebase is centered around functional packages, typically components. For more about how we organize packages, see our Packages documentation. In each of the following examples, we use
Directory structureHere's what you can expect to find inside the USWDS package: Package contentsHere's what you can expect to find in each of the directories and files in the USWDS package:
Installing the design systemThere are two ways to install the design system on a project:
We recommend using npm to make it as straightforward as possible to install the design system and update it as we release new versions. Install using Node and npmnpm is a package manager for Node-based projects. USWDS maintains the
The Note: We do not recommend directly editing the design system files in Install the package directly from GitHubIf 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. Otherwise, we recommend that you follow the steps outlined in this section.
Using USWDS CSS and JavaScript in your projectThe three files critical to any USWDS project are the stylesheet, the JavaScript, and the initializer. Most projects require all of these to function properly.
Reference the stylesheet, library, and initializer in each HTML page or dynamic template in your project. Here is an example of how to reference these assets in your <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Example Project</title>
<script src="assets/uswds/dist/js/uswds-init.min.js"></script>
<link rel="stylesheet" href="assets/uswds/dist/css/uswds.min.css" />
</head>
<body>
<script src="assets/uswds/dist/js/uswds.min.js"></script>
</body>
</html>And that’s it — you should now be able to copy our code samples into your Compiling USWDS Sass into CSSIf you want to take full advantage of USWDS custom settings and add build new styles and components with the USWDS toolset, you'll need a way to access the assets in the USWDS package and compile custom CSS from the USWDS source files. USWDS uses the task manager Gulp as a way to add USWDS assets to a project and compile our CSS from the package source. Gulp is a useful and powerful tool, but it can be difficult to set up if you are new to it. The USWDS Compile package is made for developers new to Gulp or those who just want a simple setup to compile USWDS Sass. The repo contains files and instructions for setting up the compiler, initializing USWDS, and compiling CSS from the source files. Sass compilation requirementsUSWDS Sass needs three things to compile properly:
Note: Using a compiler package like USWDS Compile is a good way to fulfill these requirements automatically. AutoprefixingThe design system requires autoprefixing to work properly. Don't add vendor prefixes to your custom styles manually — it is more reliable to use autoprefixing. Autoprefixing services like gulp-autoprefixer automatically add vendor prefixes to CSS rules. We use the following autoprefixer settings via Sass Load PathsUSWDS 3.0 and newer require the use of Sass Load Paths to compile properly. USWDS 3.0 load paths must include a path to the Here's how this might look in Gulp and in Webpack: Gulp.pipe(
sass({
includePaths: [
"./node_modules/@uswds/uswds/packages",
],
})Webpackloader: "sass-loader",
options: {
sassOptions: {
includePaths: [
"./node_modules/@uswds/uswds/packages"
],
},
},Other useful compiler postprocessing
Sass and theme settingsThe design system is customizable using the power of Sass (Syntactically Awesome Style Sheets). The critical files you'll need in your project are those in
@forward "uswds-theme";
@forward "uswds";
@forward "uswds-theme-custom-styles";Technical note: The JS customizationUnfortunately, customizing the JavaScript for the USWDS currently requires NodeJS and a module bundler like Browserify or Webpack. We apologize for this inconvenience, and are working to resolve it in a future release of the design system. USWDS JavaScript is separated into components (just as with the CSS and HTML) and initialized with event handlers when the DOM is ready. These components are accessible as CommonJS modules that can be required in other JavaScript files, then built for the browser. The components are not accessible in the global browser scope, but can be extended to be included by requiring window.uswds = require("./components");Each component has a standardized interface that can be used to extend it further. The components store a HTML class (like
Some components have additional methods based on that component's functionality. Any additional methods are found in that component's JavaScript file. If you’re using a modern framework like React or Angular you can import components and initialize them in your library's DOM ready lifecycle event. Importing a modular component. import USWDS from "@uswds/uswds/src/js";
const { characterCount, accordion } = USWDS; // deconstruct your components here
// Alternatively
import accordion from "@uswds/uswds/js/usa-accordion";React hooks example: function App() {
const ref = document.body;
useEffect(() => {
// initialize
characterCount.on(ref);
// default ref is document.body, if you want to use
// default you do not have to pass arguments
accordion.on();
// remove event listeners when the component un-mounts.
return () => {
characterCount.off();
accordion.off();
};
});
}Angular example: export class App implements OnInit {
constructor() {
this.ref = document.body;
// default ref is document.body, if you want to use
// default you do not have to pass arguments
}
ngOnInit() {
// initialize
characterCount.on(this.ref);
accordion.on();
}
// remove event listeners when the component un-mounts.
ngOnDestroy() {
characterCount.off();
accordion.off();
}
}Style theming and tokensUSWDS 3.0 provides extensive support for theming via its theme settings files introduced in Sass and theme settings, above. Set theme settings with USWDS design tokens, not with values directly. They tend to be quoted strings like Visit the Design tokens section of USWDS 3.0 documentation for more on the available tokens for color, spacing units, font size, and more. Using tokens in theme settingsThe following is an example of theme settings from @use "uswds-core" with (
$theme-grid-container-max-width: "desktop",
$theme-site-margins-breakpoint: "desktop",
$theme-site-margins-width: 4,
$theme-site-margins-mobile-width: 2,
)The USWDS uses those tokens to build component styles: .usa-example {
@include u-padding-x($theme-site-margins-mobile-width);
max-width: units($theme-grid-container-max-width);
@include at-media($theme-site-margins-breakpoint) {
@include u-padding-x($theme-site-margins-width);
}
}This is the functional equivalent of: .usa-example {
@include u-padding-x(2);
max-width: units("desktop");
@include at-media("desktop") {
@include u-padding-x(4);
}
}Which, if .usa-example {
padding-left: 1rem;
padding-right: 1rem;
max-width: 64rem;
}
@media screen and (min-width: 64em) {
.usa-example {
padding-left: 2rem;
padding-right: 2rem;
}
}In general, USWDS sets variables with tokens, and passes those variables into functions and mixins in the source Sass. Set the base asset paths (fonts and images)The values of @use "uswds-core" with (
$theme-font-path: "../fonts",
$theme-image-path: "../img",
); |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期
今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知
今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要
我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多
今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不
电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很
我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法
今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win
今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎
请发表评论