Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: Add 'Getting started > Contents' page #2685

Merged
merged 4 commits into from
Aug 8, 2024
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 101 additions & 1 deletion site/content/docs/0.0/getting-started/contents.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,104 @@ aliases:
toc: true
---

{{< callout-soon "page" >}}
## Compiled OUDS Web

Once downloaded, unzip the compressed folder and you'll see something like this:

<!-- NOTE: This info is intentionally duplicated in the README. Copy any changes made here over to the README too, but be sure to keep in mind to add the `dist` folder. -->

```text
@ouds/web/
julien-deramond marked this conversation as resolved.
Show resolved Hide resolved
├── css/
│ ├── ouds-web-grid.css
│ ├── ouds-web-grid.css.map
│ ├── ouds-web-grid.min.css
│ ├── ouds-web-grid.min.css.map
│ ├── ouds-web-grid.rtl.css
│ ├── ouds-web-grid.rtl.css.map
│ ├── ouds-web-grid.rtl.min.css
│ ├── ouds-web-grid.rtl.min.css.map
│ ├── ouds-web-reboot.css
│ ├── ouds-web-reboot.css.map
│ ├── ouds-web-reboot.min.css
│ ├── ouds-web-reboot.min.css.map
│ ├── ouds-web-reboot.rtl.css
│ ├── ouds-web-reboot.rtl.css.map
│ ├── ouds-web-reboot.rtl.min.css
│ ├── ouds-web-reboot.rtl.min.css.map
│ ├── ouds-web-utilities.css
│ ├── ouds-web-utilities.css.map
│ ├── ouds-web-utilities.min.css
│ ├── ouds-web-utilities.min.css.map
│ ├── ouds-web-utilities.rtl.css
│ ├── ouds-web-utilities.rtl.css.map
│ ├── ouds-web-utilities.rtl.min.css
│ ├── ouds-web-utilities.rtl.min.css.map
│ ├── ouds-web.css
│ ├── ouds-web.css.map
│ ├── ouds-web.min.css
│ ├── ouds-web.min.css.map
│ ├── ouds-web.rtl.css
│ ├── ouds-web.rtl.css.map
│ ├── ouds-web.rtl.min.css
│ └── ouds-web.rtl.min.css.map
└── js/
├── ouds-web.bundle.js
├── ouds-web.bundle.js.map
├── ouds-web.bundle.min.js
├── ouds-web.bundle.min.js.map
├── ouds-web.esm.js
├── ouds-web.esm.js.map
├── ouds-web.esm.min.js
├── ouds-web.esm.min.js.map
├── ouds-web.js
├── ouds-web.js.map
├── ouds-web.min.js
└── ouds-web.min.js.map
```

This is the most basic form of OUDS Web: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`ouds-web.*`), as well as compiled and minified CSS and JS (`ouds-web.min.*`). [Source maps](https://web.dev/articles/source-maps) (`ouds-web.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`ouds-web.bundle.js` and minified `ouds-web.bundle.min.js`) include [Popper](https://popper.js.org/docs/v2/).

### CSS files

OUDS Web includes a handful of options for including some or all of our compiled CSS.

{{< bs-table "table" >}}
| CSS files | Layout | Content | Components | Utilities |
| --- | --- | --- | --- | --- |
| `ouds-web.css`<br> `ouds-web.min.css`<br> `ouds-web.rtl.css`<br> `ouds-web.rtl.min.css` | Included | Included | Included | Included |
| `ouds-web-grid.css`<br> `ouds-web-grid.rtl.css`<br> `ouds-web-grid.min.css`<br> `ouds-web-grid.rtl.min.css` | <!--[Only grid system]({{< docsref "/layout/grid" >}})-->— | — | — | [Only flex utilities]({{< docsref "/utilities/flex" >}}) |
| `ouds-web-utilities.css`<br> `ouds-web-utilities.rtl.css`<br> `ouds-web-utilities.min.css`<br> `ouds-web-utilities.rtl.min.css` | — | — | — | Included |
| `ouds-web-reboot.css`<br> `ouds-web-reboot.rtl.css`<br> `ouds-web-reboot.min.css`<br> `ouds-web-reboot.rtl.min.css` | — | <!--[Only Reboot]({{< docsref "/content/reboot" >}})--> | — | — |
julien-deramond marked this conversation as resolved.
Show resolved Hide resolved
{{< /bs-table >}}

### JS files

Similarly, we have options for including some or all of our compiled JavaScript.

{{< bs-table "table" >}}
| JS Files | `:focus-visible` Polyfill | Popper |
| --- | --- | --- |
| `ouds-web.bundle.js`<br> `ouds-web.bundle.min.js`<br> | Included | Included |
| `ouds-web.js`<br> `ouds-web.min.js`<br> | Included | – |
{{< /bs-table >}}

## OUDS Web source code

The OUDS Web source code download includes the compiled CSS and JavaScript assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:

```text
@ouds/web/
julien-deramond marked this conversation as resolved.
Show resolved Hide resolved
├── dist/
│ ├── css/
│ └── js/
julien-deramond marked this conversation as resolved.
Show resolved Hide resolved
├── site/
│ └──content/
│ └── docs/
│ └── {{< param docs_version >}}/
│ └── examples/
├── js/
└── scss/
```

The `scss/` and `js/` are the source code for our CSS and JavaScript. The `dist/` folder includes everything listed in the compiled download section above. The `site/docs/` folder includes the source code for our documentation, and `examples/` of OUDS Web usage. Beyond that, any other included file provides support for packages, license information, and development.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not to do in this PR, but Boosted main branch could be updated with the Bootstrap wording.

4 changes: 2 additions & 2 deletions site/content/docs/0.0/getting-started/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -96,12 +96,12 @@ As reference, here are our primary CDN links.
| JS | `{{< param "cdn.js_bundle" >}}` |
{{< /bs-table >}}

<!--You can also use the CDN to fetch any of our [additional builds listed in the Contents page]({{< docsref "/getting-started/contents" >}}).-->
You can also use the CDN to fetch any of our [additional builds listed in the Contents page]({{< docsref "/getting-started/contents" >}}).

## Next steps

- Read a bit more about some [important global environment settings](#important-globals) that OUDS Web utilizes.
- Read about what's included in OUDS Web<!-- in our [contents section]({{< docsref "/getting-started/contents/" >}}) and the list of [components that require JavaScript](#js-components) below-->.
- Read about what's included in OUDS Web in our [contents section]({{< docsref "/getting-started/contents/" >}})<!-- and the list of [components that require JavaScript](#js-components) below-->.
<!--- Need a little more power? Consider building with OUDS Web by [including the source files via package manager]({{< docsref "/getting-started/download#package-managers" >}}).-->
<!--- Looking to use Boosted as a module with `<script type="module">`? Please refer to our [using Boosted as a module]({{< docsref "/getting-started/javascript#using-boosted-as-a-module" >}}) section.-->

Expand Down
1 change: 0 additions & 1 deletion site/data/sidebar.yml
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
- title: Download
draft: true
- title: Contents
draft: true
- title: Browsers & devices
- title: JavaScript
draft: true
Expand Down
Loading