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.

Sign up for GitHub

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

SWSDEVOPS-000: fix typos #154

Merged
merged 4 commits into from
Jun 7, 2024
Merged

SWSDEVOPS-000: fix typos #154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b079e40
SWSDEVOPS-000: fix typos
jbickar Jun 7, 2024
ff59aac
fixup! WIP
jbickar Jun 7, 2024
657d369
fixup! WIP
jbickar Jun 7, 2024
677a719
fixup! WIP
jbickar Jun 7, 2024
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
10 changes: 5 additions & 5 deletions content/for-developers/how-to-extend.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z

<Section heading="Decanter / Tailwind Overrides">
The Decanter Design System uses Tailwind CSS as a base. This means that you can use almost all of the Tailwind utilities in your project. You can also override the default Decanter Tailwind configuration to suit your needs. Decanter has overriden and not extended the following Tailwind configuration:
* Font Family - [Documentation](https://tailwindcss.com/docs/font-family#customizing-your-theme) | [Source](https://github.com/SU-SWS/decanter/blob/v7/src/plugins/theme/fontFamily.js)
* Screens - [Documentation](https://tailwindcss.com/docs/screens#overriding-the-defaults) | [Source](https://github.com/SU-SWS/decanter/blob/v7/src/plugins/theme/screens.js)
* Spacing - [Documentation](https://tailwindcss.com/docs/customizing-spacing#overriding-the-default-spacing-scale) | [Source](https://github.com/SU-SWS/decanter/blob/v7/src/plugins/theme/spacing.js)
* CSS Reset - [Documentation](https://tailwindcss.com/docs/preflight) | [Source](https://github.com/SU-SWS/decanter/blob/v7/src/plugins/base/base.js)
* Font Family - [Documentation](https://tailwindcss.com/docs/font-family#customizing-your-theme) | [Source](https://github.com/SU-SWS/decanter/blob/main/src/plugins/theme/fontFamily.js)
* Screens - [Documentation](https://tailwindcss.com/docs/screens#overriding-the-defaults) | [Source](https://github.com/SU-SWS/decanter/blob/main/src/plugins/theme/screens.js)
* Spacing - [Documentation](https://tailwindcss.com/docs/customizing-spacing#overriding-the-default-spacing-scale) | [Source](https://github.com/SU-SWS/decanter/blob/main/src/plugins/theme/spacing.js)
* CSS Reset - [Documentation](https://tailwindcss.com/docs/preflight) | [Source](https://github.com/SU-SWS/decanter/blob/main/src/plugins/base/base.js)
</Section>

<Section heading="Extending Decanter Tailwind Configuration">
Expand All @@ -25,4 +25,4 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z

You can create your own preset as well! Read the tailwindcss documentation on how to create your own preset. This would be a great way of bundling your own custom components and utilities for your projects and keeping them separate from the Decanter Design System.

</Section>
</Section>
6 changes: 3 additions & 3 deletions content/for-developers/installation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ lastUpdatedDate: 2022-12-31T12:00:00.000Z
---

<Section>
[Decanter v7](https://github.com/SWS/decanter/tree/v7) customizes Tailwind CSS for you to generate utility classes that works with our design system. Before you begin, please read and review the installation process on the official [Tailwind CSS website](https://tailwindcss.com/docs/installation). Please also become familiar with [Tailwind CSS presets](https://tailwindcss.com/docs/presets) as Decanter uses this functionality to make it even easier for you to use.
[Decanter v7](https://github.com/SWS/decanter/tree/main) customizes Tailwind CSS for you to generate utility classes that works with our design system. Before you begin, please read and review the installation process on the official [Tailwind CSS website](https://tailwindcss.com/docs/installation). Please also become familiar with [Tailwind CSS presets](https://tailwindcss.com/docs/presets) as Decanter uses this functionality to make it even easier for you to use.
</Section>

<Section heading="Frameworks">
Expand Down Expand Up @@ -36,7 +36,7 @@ If you are adding Decanter to an existing project please have a review of the [F
}
```

4. **Install fonts**
4. **Install fonts**

It is recommended that you follow your framework's convention for installing fonts. You'll want to install Source Sans 3, Source Serif 4, Roboto Slab, and Roboto Mono from Google Fonts and include the ligature font for the Stanford Logo if you are using it. Here is an example or file you can include in your build to install the fonts.

Expand All @@ -61,7 +61,7 @@ If you are adding Decanter to an existing project please have a review of the [F
<div className="children:children:rs-mb-4">
1. **Install Decanter Tailwindcss**

The easiest way to add Decanter to your project is to use the npm package manager.
The easiest way to add Decanter to your project is to use the npm package manager.
Copy link
Contributor Author

Choose a reason for hiding this comment

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

It's 2024 and I'm submitting PRs removing trailing whitespace.

Copy link
Member

Choose a reason for hiding this comment

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

https://github.com/mattcone/markdown-guide/blob/master/_basic-syntax/line-breaks.md#line-break-best-practices

You can use two or more spaces (commonly referred to as "trailing whitespace") for line breaks in nearly every Markdown application, but it's controversial. It's hard to see trailing whitespace in an editor, and many people accidentally or intentionally put two spaces after every sentence. For this reason, you may want to use something other than trailing whitespace for line breaks. If your Markdown application supports HTML, you can use the
HTML tag.

So you should be replacing the two spaces with a<br /> in this case.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

TIL

```
npm install -D decanter
npx tailwind init
Expand Down
8 changes: 4 additions & 4 deletions content/for-developers/strategies-and-conventions.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
</Section>

<Section heading="Colors" id="colors">
We have [customized the Tailwind theme](https://github.com/SWS/decanter/blob/v7/src/plugins/theme/colors.js) to include [all the colors from the Stanford Identity Guide](https://identity.stanford.edu/design-elements/color/) to generate all the color-related utility classes your projects need, e.g., `bg-cardinal-red`, `text-black`, `border-palo-alto`.
We have [customized the Tailwind theme](https://github.com/SU-SWS/decanter/blob/main/src/plugins/theme/colors.js) to include [all the colors from the Stanford Identity Guide](https://identity.stanford.edu/design-elements/color/) to generate all the color-related utility classes your projects need, e.g., `bg-cardinal-red`, `text-black`, `border-palo-alto`.

**Light and dark variants:** For colors from the identity guide with light and dark variants, add `-light` or `-dark` to the end of the class name, e.g., `bg-digital-red-light`, `text-lagunita-dark`.

Expand Down Expand Up @@ -66,11 +66,11 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
</Section>

<Section heading="Centered container and screen edge" id="centered-container-and-screen-edge">
In Decanter, we use a fluid “[centered container](https://github.com/SWS/decanter/blob/v7/src/plugins/components/layout/centered-container.js)” (`cc` class) to constrain the width of the content area on a website by setting proportional “screen edge” at each breakpoint.
In Decanter, we use a fluid “[centered container](https://github.com/SU-SWS/decanter/blob/main/src/plugins/components/layout/centered-container.js)” (`cc` class) to constrain the width of the content area on a website by setting proportional “screen edge” at each breakpoint.

Screen edge is the minimal amount of space between the outside edge of this centered container and the edge of the browser window. Its margins are set at each breakpoint, up to and not including the largest breakpoint (2XL). The total width of the centered container is not fixed, but rather expands (fluid) as the viewport expands up to 1700px. At which point, the centered container reaches its maximum width of 1500px with screen edge of 100px margin on either side of the container.

[Screen edge values](https://github.com/SWS/decanter/blob/9442bddc27bd699acdb25c25a1b84b07f905245a/src/plugins/theme/decanter.js#L47) are curated and do not follow a mathematical pattern:
[Screen edge values](https://github.com/SU-SWS/decanter/blob/main/src/plugins/theme/decanter.js#L47) are curated and do not follow a mathematical pattern:
- XS: **20px**
- SM: **30px**
- MD: **50px**
Expand All @@ -79,7 +79,7 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
</Section>

<Section heading="Grid and grid gaps" id="grid-and-grid-gaps">
We have [curated grid gaps](https://github.com/SWS/decanter/blob/v7/src/plugins/theme/gap.js) that are proportional within each breakpoint range. Our current values:
We have [curated grid gaps](https://github.com/SU-SWS/decanter/blob/main/src/plugins/theme/gap.js) that are proportional within each breakpoint range. Our current values:
- XS to MD: **20px**
- LG: **36px**
- XL: **40px**
Expand Down
2 changes: 1 addition & 1 deletion content/for-developers/tailwindcss-plugins.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ lastUpdatedDate: 2023-05-17T12:00:00.000Z
---

<Section>
Tailwind allows you to register official or third-party plugins with Tailwind that can be used to generate extra utilities, components, base styles, or custom variants. Decanter [makes use](https://github.com/SWS/decanter/blob/v7/tailwind.config.js) of some of these plugins, and you can add additional plugins to your project in its `tailwind.config` file. Full information regarding plugins can be found in the [Tailwind docs](<https://tailwindcss.com/docs/plugins>).
Tailwind allows you to register official or third-party plugins with Tailwind that can be used to generate extra utilities, components, base styles, or custom variants. Decanter [makes use](https://github.com/SU-SWS/decanter/blob/main/tailwind.config.js) of some of these plugins, and you can add additional plugins to your project in its `tailwind.config` file. Full information regarding plugins can be found in the [Tailwind docs](<https://tailwindcss.com/docs/plugins>).
</Section>

<Section heading="Official Tailwind plugins used in Decanter v7">
Expand Down
Loading