Layout
Layout components and utility classes help you organize content that can adapt to any device or screen size. See the installation instructions to use Web Awesome's layout tools in your project.
Using Layout Utilities
Jump to heading
Layout utility classes are bundled with Web Awesome's style utilities. By including style utilities in your project, you'll have access to layout utilities like .wa-grid and .wa-stack.
- Head over to your project's
Settings. - Next to Features, select the CSS utilities checkbox.
- Save Changes to immediately update anywhere you're using your project.
To use all Web Awesome styles (including native styles), import the following stylesheet in your project:
import '@awesome.me/webawesome/dist/styles/webawesome.css';
Or, if you only want CSS utility classes, import a theme and the utilities individually:
import '@awesome.me/webawesome/dist/styles/themes/default.css'; import '@awesome.me/webawesome/dist/styles/utilities.css';
To use all Web Awesome styles (including native styles), include the following stylesheet in your project:
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
Or, if you only want CSS utility classes, include a theme and the utilities individually:
<link rel="stylesheet" href="/dist/styles/themes/default.css" /> <link rel="stylesheet" href="/dist/styles/utilities.css" />