From 09cd007af82954d0f042718ec6e6cca96e1d1e2b Mon Sep 17 00:00:00 2001
From: Selemondev <106826371+selemondev@users.noreply.github.com>
Date: Wed, 18 Jan 2023 04:55:21 +0300
Subject: [PATCH] docs: fix typo (#121)
---
docs/guide/components/alert.md | 2 +-
docs/guide/components/badge.md | 6 +++---
docs/guide/features/arbitrary-sizes.md | 8 +++----
docs/guide/features/dx-focused.md | 10 ++++-----
docs/guide/features/presets.md | 14 ++++++------
docs/guide/features/theme.md | 8 +++----
docs/guide/getting-started/customization.md | 12 +++++------
docs/guide/getting-started/index.md | 14 ++++++------
docs/guide/getting-started/installation.md | 24 ++++++++++-----------
docs/index.md | 8 +++----
docs/ui/introduction.md | 10 ++++-----
11 files changed, 58 insertions(+), 58 deletions(-)
diff --git a/docs/guide/components/alert.md b/docs/guide/components/alert.md
index 3b225529..08288080 100644
--- a/docs/guide/components/alert.md
+++ b/docs/guide/components/alert.md
@@ -68,7 +68,7 @@ You can customize close icon using `append-icon` prop.
::::card v-model support
-Alert also support `v-model` to show and hide alert based on model value.
+Alert also supports `v-model` to show and hide alert based on model value.
:::code DemoAlertVModelSupport
<<< @/components/demos/alert/DemoAlertVModelSupport.vue{4,9}
diff --git a/docs/guide/components/badge.md b/docs/guide/components/badge.md
index a4211d1e..2378454e 100644
--- a/docs/guide/components/badge.md
+++ b/docs/guide/components/badge.md
@@ -18,7 +18,7 @@ Default variant for badge is `standard`
::::card Content
-Use the prop `content` to pass numeric values, if you want to use other data different than a number use the slot `content` instead
+Use the prop `content` to pass numeric values, if you want to use other data different than a number, use the slot `content` instead
:::code DemoBadgeContent
<<< @/components/demos/badge/DemoBadgeContent.vue{3,8}
@@ -40,7 +40,7 @@ You can use v-model to control hiding/showing the badge
::::card Color
-You can use `color` prop to change the badge color.
+You can use the `color` prop to change the badge color.
:::code DemoBadgeColor
<<< @/components/demos/badge/DemoBadgeColor.vue{5,11,17,23,29}
@@ -86,7 +86,7 @@ Change the `max` prop to cap the numeric value of the content
Use `overlap` prop to adjust the position of the badge, if you need more refined adjustments you can use the `offsetX` or `offsetY` props.
-By default of `overlap` prop is `true`.
+By default `overlap` prop is `true`.
:::code DemoBadgeOverlap
<<< @/components/demos/badge/DemoBadgeOverlap.vue{10,18-19}
diff --git a/docs/guide/features/arbitrary-sizes.md b/docs/guide/features/arbitrary-sizes.md
index 91b88cfa..6c935d08 100644
--- a/docs/guide/features/arbitrary-sizes.md
+++ b/docs/guide/features/arbitrary-sizes.md
@@ -2,7 +2,7 @@
Just like plain CSS or UnoCSS, Anu also provides flexibility with component sizing. You are not limited to sizes like `sm`, `lg`, `xl`, etc. With Anu you can have infinity sizes that auto adjust the font as well.
-Anu mostly uses `em` unit for applying padding, height, width, etc. You can leverage this to create custom size we want just using font size utilities.
+Anu mostly uses `em` unit for applying padding, height, width, etc. You can leverage this to create custom sizes as you want by just using font size utilities.
Button
@@ -18,11 +18,11 @@ Anu mostly uses `em` unit for applying padding, height, width, etc. You can leve
```
:::info
-When using arbitrary font sizes, UnoCSS don't add `line-height` along with `font-size` property so if you have line height issue, do consider adding line height styles as well.
+When using arbitrary font sizes, UnoCSS doesn't add `line-height` along with `font-size` property, so if you have line height issue, do consider adding line height styles as well.
:::
:::tip Predefined Sizes
-You can also create your own predefined sizes like `size` prop in other frameworks using custom class & shortcuts.
+You can also create your own predefined sizes like `size` prop in other frameworks using custom classes & shortcuts.
```vue
@@ -30,5 +30,5 @@ You can also create your own predefined sizes like `size` prop in other framewor
```
-Now, create a new shortcut for this `'btn': '[&.size-xl]-p-8',`. You can also take it further with dynamic shortcuts and other UnoCSS features.
+Now you can create a new shortcut for this `'btn': '[&.size-xl]-p-8',`. You can also take it further with dynamic shortcuts and other UnoCSS features.
:::
diff --git a/docs/guide/features/dx-focused.md b/docs/guide/features/dx-focused.md
index 92b14533..2769265d 100644
--- a/docs/guide/features/dx-focused.md
+++ b/docs/guide/features/dx-focused.md
@@ -23,11 +23,11 @@ const items = [
> _DX => Developer Experience_
-Frameworks are nice, they helps you write more maintainable and less code. In long run, developer experience does matter.
+Frameworks are nice, they help you write more maintainable and less code. In the long run, developer experience does matter.
## Configurable Array
-Assume you have list like below and want to just change the size of the avatar/icon in list.
+Assume you have a list as shown below and you want to just change the size of the avatar/icon in the list.
@@ -127,7 +127,7 @@ const items = [
With Anu's atomic behavior, you can pass the existing props like `title`, `subtitle`, etc to certain components creating UI quickly without extra hassle.
-Below code will create drawer with title & subtitle. This is because `ADrawer` uses `ACard` component that in turns uses `ATypography` component.
+The code below will create a drawer with title & subtitle. This is because `ADrawer` uses `ACard` component that in turns uses `ATypography` component.
```vue
@@ -143,7 +143,7 @@ Below code will create drawer with title & subtitle. This is because `ADrawer` u
As Anu is built on top of utility classes, it has edge over the frameworks that uses SCSS or don't have utility classes.
-Thanks to utility classes at some point if you want to change anything regarding the component once only then utility classes can easily let you perform changes.
+Thanks to utility classes at some point if you want to change anything regarding the component once, only then can utility classes easily let you perform changes.
```vue
@@ -151,6 +151,6 @@ Thanks to utility classes at some point if you want to change anything regarding
```
-This is customization is not limited to top level component. You can use selectors with utility classes to customize the nested component. e.g. `children-[.a-card]-rounded-3xl`
+This customization is not limited to top level component. You can use selectors with utility classes to customize the nested component. e.g. `children-[.a-card]-rounded-3xl`
> _More to come..._
diff --git a/docs/guide/features/presets.md b/docs/guide/features/presets.md
index 1829cedc..dfdcb710 100644
--- a/docs/guide/features/presets.md
+++ b/docs/guide/features/presets.md
@@ -1,19 +1,19 @@
# Presets
-Apart from theming just colors Anu also gives full flexibility on customizing the components. Anu allows defining your own preset that changes how component should look.
+Apart from theming just colors, Anu also gives full flexibility on customizing the components. Anu allows defining your own preset that changes how components should look.
With presets feature, You can even replicate Bootstrap or Material design
-Below is example of buttons customized using preset feature to look like Bootstrap buttons:
+Below is an example of buttons customized using preset feature to look like Bootstrap buttons:
![Bootstrap buttons using anu](/images/guide/anu-bootstrap-btns.png)
-If you have notices in installation section, To use Anu you need to use two presets.
+If you had noticed in the installation section, to use Anu you need to use two presets.
1. Anu (`presetAnu`)
2. Theme Default (`presetThemeDefault` )
-`presetAnu` provides core styles for anu. These styles have nothing to do with visuals of any component.
+`presetAnu` provides core styles for Anu. These styles have nothing to do with visuals of any component.
`presetThemeDefault` is where all the styling magic happens.
@@ -23,9 +23,9 @@ Actually, [presets](https://github.com/unocss/unocss#presets) feature is from Un
## How to customize the theme default preset?
-To change the look of single component, you don't have to create the preset from the scratch or copy-paste the existing preset.
+To change the look of a single component, you don't have to create the preset from scratch or copy-paste the existing preset.
-`presetThemeDefault` have various shortcuts that styles the component. You can overrides these shortcuts to change the look & feel of the component.
+`presetThemeDefault` have various shortcuts that styles the component. You can override these shortcuts to change the look & feel of the component.
```ts
presetThemeDefault({
@@ -41,4 +41,4 @@ Creating your own UnoCSS preset is really simple. We recommend you first checkou
Next, you can refer to our `presetThemeDefault` preset to create you own preset.
-> _If you want more details feel free to let us know that you are building your own preset so we can focus more on this part of documentation._
+> _If you want more details, feel free to let us know that you are building your own preset so we can focus more on this part of documentation._
diff --git a/docs/guide/features/theme.md b/docs/guide/features/theme.md
index 52eddf9f..beabe519 100644
--- a/docs/guide/features/theme.md
+++ b/docs/guide/features/theme.md
@@ -35,7 +35,7 @@ Assume your theme color is `#5563fd`. Just convert it to [hsl](https://developer
Done 🥳
-If you want to change CSS variant in dark theme just update the selector:
+If you want to change the CSS variant in the dark theme, just update the selector:
```diff
- :root
@@ -44,9 +44,9 @@ If you want to change CSS variant in dark theme just update the selector:
## How to create custom theme?
-Creating custom theme is as easy as defining new values for existing CSS variables.
+Creating a custom theme is as easy as defining new values for the existing CSS variables.
-Create new CSS selector for `:root` with theme name (assuming `coffee`) and write down CSS variables with desired values:
+Create a new CSS selector for `:root` with the theme name (assuming `coffee`) and write down the CSS variables with the desired values:
```css
:root.coffee {
@@ -55,6 +55,6 @@ Create new CSS selector for `:root` with theme name (assuming `coffee`) and writ
}
```
-Now just add class `coffee` to html element: `html.coffee`.
+Now just add class `coffee` to the html element: `html.coffee`.
Don't forget to include the CSS file in your entrypoint 😜
diff --git a/docs/guide/getting-started/customization.md b/docs/guide/getting-started/customization.md
index d9c332c8..399b3d35 100644
--- a/docs/guide/getting-started/customization.md
+++ b/docs/guide/getting-started/customization.md
@@ -20,7 +20,7 @@ const updatePrimaryColor = () => {
Anu uses [HSL](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl) color format to define colors. You can configure theme colors via [CSS variables(custom properties)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
-To customize theme color, set CSS variable in your CSS with color name prefixed with `a-` (_e.g. `--a-primary`_). Below is list of colors you can configure.
+To customize theme color, set a CSS variable in your CSS with color name prefixed with `a-` (_e.g. `--a-primary`_). Below is the list of colors you can configure.
Primary
@@ -46,11 +46,11 @@ Interesting ones are listed below:
## Component customization
-All UI configurable styles are applied using theme preset. If you have noticed in installation section there's preset `presetThemeDefault`.
+All the UI configurable styles are applied using theme preset. If you have noticed in installation section there's a preset called `presetThemeDefault`.
-`presetThemeDefault` have various shortcuts that styles the component. You can overrides these shortcuts to change the look & feel of the component.
+`presetThemeDefault` have various shortcuts that styles the component. You can override these shortcuts to change the look & feel of the component.
-To override those shortcuts use `shortcutOverrides` option like below:
+To override those shortcuts use `shortcutOverrides` option as shown below:
```ts
presetThemeDefault({
@@ -63,7 +63,7 @@ presetThemeDefault({
Guess, how our button will look like?
:::details View answer
-It's bootstrap button 🤯
+It's a bootstrap button 🤯
Just change the colors to Bootstrap's color and see the magic 😍
![Bootstrap buttons using anu](/images/guide/anu-bootstrap-btns.png)
@@ -71,7 +71,7 @@ Just change the colors to Bootstrap's color and see the magic 😍
You can refer to available shortcuts in [this](https://github.com/jd-solanki/anu/blob/main/packages/anu-vue/src/presets/theme-default/index.ts) file.
-If you like this simple customization don't forget to give a **star on Github**. If you don't like it give triple star 😉.
+If you like this simple customization don't forget to give a **star on Github**. If you don't like it give a triple star 😉.
diff --git a/docs/guide/getting-started/index.md b/docs/guide/getting-started/index.md
index e3e323ef..7bc58e11 100644
--- a/docs/guide/getting-started/index.md
+++ b/docs/guide/getting-started/index.md
@@ -7,16 +7,16 @@
- Yes, there's UnoCSS, TailwindCSS, etc but they don't provide ready to use components
- DX Focused. You will enjoy writing code 💯
- [Configure UI](/guide/base-components/typography.html#config-array) using array instead of writing component's markup again to override
-- It is for lazy people by lazy person
-- I co-authored premium templates like [Vuexy](https://themeforest.net/item/vuexy-vuejs-html-laravel-admin-dashboard-template/23328599), [Materio](https://themeselection.com/item/materio-vuetify-vuejs-admin-template), etc so you can expect neat & lovable UI from anu.
-- Thanks to UnoCSS, VueUse, etc You can build your desired UI & functionalities in no time using battle tested features.
-- Customization is a piece of cake with anu. It is as simple as overriding an object 🤯
+- It is for lazy people by a lazy person
+- I co-authored premium templates such as [Vuexy](https://themeforest.net/item/vuexy-vuejs-html-laravel-admin-dashboard-template/23328599), [Materio](https://themeselection.com/item/materio-vuetify-vuejs-admin-template), etc so you can expect neat & lovable UI from Anu.
+- Thanks to UnoCSS, VueUse, etc You can now build your desired UI & functionalities in no time using battle tested features.
+- Customization is a piece of cake with Anu. It is as simple as overriding an object 🤯
## Motivation
-I work at [ThemeSelection](https://themeselection.com) and for couple of times I had to build small Vue projects that required UI flexibility. I couldn't use Bootstrap because customization is not straight forward compared to frameworks like UnoCSS, WindiCSS & TailwindCSS.
+I work at [ThemeSelection](https://themeselection.com) and for a couple of times I had to build small Vue projects that required UI flexibility. I couldn't use Bootstrap because customization is not straight forward compared to frameworks like UnoCSS, WindiCSS & TailwindCSS.
-Then there's a guy named [@antfu](https://github.com/antfu) who is great inspiration to me. He built great tools for vue ecosystem and I was using them in my every vue projects. Now the problem was repating the configuration & components in every project and there wasn't any component lib based on frameworks like UnoCSS to provide components for building UI quickly and provide enough flexibility.
+Then there's a man I really look up to by the name of [@antfu](https://github.com/antfu) who is a great inspiration to me. He has built great tools for the Vue ecosystem and I used them in all of my Vue projects. Now the issue at hand was that setup and components had to be repeated in each project, and there was no component library based on frameworks like UnoCSS to offer components for rapidly and sufficiently constructing UI.
Hence, I created this UI lib which provides ready to use beautiful components with utilities to build UI quickly.
@@ -26,4 +26,4 @@ You probably didn't read the UnoCSS [README](https://github.com/unocss/unocss#re
### Why dependencies
-Anu is based on [UnoCSS](https://github.com/unocss/unocss), [VueUse](https://vueuse.org/) & [Floating UI](https://floating-ui.com/). Anu have this dependencies because there's a saying "_Don't reinvent the wheel_".
+Anu is based on [UnoCSS](https://github.com/unocss/unocss), [VueUse](https://vueuse.org/) & [Floating UI](https://floating-ui.com/). Anu is dependent on these dependencies because there is a saying that goes, "_Don't reinvent the wheel_."
diff --git a/docs/guide/getting-started/installation.md b/docs/guide/getting-started/installation.md
index 868a8f75..610d9833 100644
--- a/docs/guide/getting-started/installation.md
+++ b/docs/guide/getting-started/installation.md
@@ -29,7 +29,7 @@
}
```
-2. Create UnoCSS Config file `uno.config.js` in root of the project with below content:
+2. Create the UnoCSS Config file `uno.config.js` in the root of the project with the content below:
```ts
import { presetAnu, presetIconExtraProperties } from 'anu-vue'
@@ -58,7 +58,7 @@
})
```
-3. Update your `main.js` file like below:
+3. Update your `main.js` file as shown below:
```js{3,5-6,8-9,13,11-12,15-16}
import { createApp } from 'vue'
@@ -96,7 +96,7 @@ Now, Just refer to the component in your vue files:
-Probably you might not want to globally register the components. You can also follow below approaches:
+Probably you might not want to globally register the components. You can also follow the approaches below:
### Tree Shaking
@@ -112,7 +112,7 @@ You can also follow À la carte fashion if you don't want to register all the co
.mount('#app')
```
-2. Now, import components individually from `anu-vue`
+2. Now import the components individually from `anu-vue`
```vue