From 147305897efda7163b0cdb6cf94d8e9891a5e424 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 7 Aug 2024 17:38:37 +0200 Subject: [PATCH 1/3] Docs: Add 'Getting started > Contents' page --- .../docs/0.0/getting-started/contents.md | 102 +++++++++++++++++- site/data/sidebar.yml | 1 - 2 files changed, 101 insertions(+), 2 deletions(-) diff --git a/site/content/docs/0.0/getting-started/contents.md b/site/content/docs/0.0/getting-started/contents.md index a8ce9fffcc..976560fbc4 100644 --- a/site/content/docs/0.0/getting-started/contents.md +++ b/site/content/docs/0.0/getting-started/contents.md @@ -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: + + + +```text +@ouds/web/ +├── 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`
`ouds-web.min.css`
`ouds-web.rtl.css`
`ouds-web.rtl.min.css` | Included | Included | Included | Included | +| `ouds-web-grid.css`
`ouds-web-grid.rtl.css`
`ouds-web-grid.min.css`
`ouds-web-grid.rtl.min.css` | — | — | — | [Only flex utilities]({{< docsref "/utilities/flex" >}}) | +| `ouds-web-utilities.css`
`ouds-web-utilities.rtl.css`
`ouds-web-utilities.min.css`
`ouds-web-utilities.rtl.min.css` | — | — | — | Included | +| `ouds-web-reboot.css`
`ouds-web-reboot.rtl.css`
`ouds-web-reboot.min.css`
`ouds-web-reboot.rtl.min.css` | — | | — | — | +{{< /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`
`ouds-web.bundle.min.js`
| Included | Included | +| `ouds-web.js`
`ouds-web.min.js`
| 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/ +├── dist/ +│ ├── css/ +│ └── js/ +├── 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. diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index c008fcca9f..8aea375b5d 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -9,7 +9,6 @@ - title: Download draft: true - title: Contents - draft: true - title: Browsers & devices draft: true - title: JavaScript From 89e6caa391a25a635b30e6ec33121f1300497422 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Thu, 8 Aug 2024 08:13:25 +0200 Subject: [PATCH 2/3] Uncomment /getting-started/contents references --- site/content/docs/0.0/getting-started/introduction.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/content/docs/0.0/getting-started/introduction.md b/site/content/docs/0.0/getting-started/introduction.md index 00256f3ec8..f3d56f3239 100644 --- a/site/content/docs/0.0/getting-started/introduction.md +++ b/site/content/docs/0.0/getting-started/introduction.md @@ -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" >}}). ## 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. +- Read about what's included in OUDS Web in our [contents section]({{< docsref "/getting-started/contents/" >}}). From 2c5d0a0bb044a439ec03b5a6920d28971c726d8d Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Thu, 8 Aug 2024 09:11:45 +0200 Subject: [PATCH 3/3] fix(review) --- site/content/docs/0.0/getting-started/contents.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/site/content/docs/0.0/getting-started/contents.md b/site/content/docs/0.0/getting-started/contents.md index 976560fbc4..cca5347ca9 100644 --- a/site/content/docs/0.0/getting-started/contents.md +++ b/site/content/docs/0.0/getting-started/contents.md @@ -15,7 +15,7 @@ Once downloaded, unzip the compressed folder and you'll see something like this: ```text -@ouds/web/ +ouds-web/ ├── css/ │ ├── ouds-web-grid.css │ ├── ouds-web-grid.css.map @@ -76,7 +76,7 @@ OUDS Web includes a handful of options for including some or all of our compiled | `ouds-web.css`
`ouds-web.min.css`
`ouds-web.rtl.css`
`ouds-web.rtl.min.css` | Included | Included | Included | Included | | `ouds-web-grid.css`
`ouds-web-grid.rtl.css`
`ouds-web-grid.min.css`
`ouds-web-grid.rtl.min.css` | — | — | — | [Only flex utilities]({{< docsref "/utilities/flex" >}}) | | `ouds-web-utilities.css`
`ouds-web-utilities.rtl.css`
`ouds-web-utilities.min.css`
`ouds-web-utilities.rtl.min.css` | — | — | — | Included | -| `ouds-web-reboot.css`
`ouds-web-reboot.rtl.css`
`ouds-web-reboot.min.css`
`ouds-web-reboot.rtl.min.css` | — | | — | — | +| `ouds-web-reboot.css`
`ouds-web-reboot.rtl.css`
`ouds-web-reboot.min.css`
`ouds-web-reboot.rtl.min.css` | — | — | — | — | {{< /bs-table >}} ### JS files @@ -95,7 +95,7 @@ Similarly, we have options for including some or all of our compiled JavaScript. 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/ +ouds-web/ ├── dist/ │ ├── css/ │ └── js/