mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
- Sidebar, overview listings, breadcrumbs now based on actual parent-child relationships, rather than increasingly outdated heuristics - parent properties are now generated automatically from the URL structure, and need only be specified to override that default - Ability to group by page hierarchy in overview pages, where pages that have >= 2 children become categories Smaller improvements: - More flexible syntax for specifying the params of overview pages - [Overviews] Hide group heading if only one group is present - parentItem and parentUrl properties that can be used on any page - Alias a collection as the children of a page (useful for "virtual" parents like Layout) - Do not error if a page card icon is missing
27 lines
1.0 KiB
Plaintext
27 lines
1.0 KiB
Plaintext
---
|
|
title: Layout
|
|
description: Layout components and utility classes help you organize content that can adapt to any device or screen size. See the [installation instructions](#installation) to use Web Awesome's layout tools in your project.
|
|
layout: overview
|
|
parentOf: layout
|
|
categories: ["components", "utilities"]
|
|
override:tags: []
|
|
---
|
|
|
|
{% markdown %}
|
|
## Installation
|
|
|
|
Layout components are included in Web Awesome's [autoloader](/docs/installation/#quick-start-autoloading-via-cdn). You can also import them individually via [cherry picking](/docs/installation/#cherry-picking).
|
|
|
|
Layout utilities are bundled with all [style utilities](/docs/utilities). You can import all Web Awesome page styles (including [native styles](/docs/native/)) by including the following stylesheet in your project:
|
|
|
|
```html
|
|
<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
|
|
```
|
|
|
|
Or, you can choose to import _only_ the utilities:
|
|
|
|
```html
|
|
<link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
|
|
```
|
|
{% endmarkdown %}
|