docs: various anu features highlighted

docs/.vitepress/config.ts

@@ -43,7 +43,10 @@ export default defineConfig({
         {
           text: 'Features',
           items: [
-            { text: 'Sizing', link: '/guide/features/sizing' },
+            { text: 'Presets', link: '/guide/features/presets' },
+            { text: 'DX Focused', link: '/guide/features/dx-focused' },
+            { text: 'Arbitrary Sizes', link: '/guide/features/arbitrary-sizes' },
+            { text: 'Spacing', link: '/guide/features/spacing' },
           ],
         },
         {

docs/guide/features/arbitrary-sizes.md

@@ -0,0 +1,34 @@
+# Arbitrary Sizes
+
+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 <i class="i-fluent-emoji-infinity"></i> 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.
+
+<ABtn class="text-[0.95rem]" variant="outline">Button</ABtn>
+
+```vue{3}
+<template
+  <ABtn
+    class="text-[0.95rem]"
+    variant="outline"
+  >
+    Button
+  </ABtn>
+</template>
+```
+
+:::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.
+:::
+
+:::tip Predefined Sizes
+You can also create your own predefined sizes like `size` prop in other frameworks using custom class & shortcuts.
+
+```vue
+<template>
+  <ABtn class="size-xl">Button</ABtn>
+</template>
+```
+
+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.
+:::

docs/guide/features/dx-focused.md

@@ -0,0 +1,156 @@
+<script lang="ts" setup>
+const items = [
+  {
+    title: 'Electronics',
+    avatarProps: { icon: 'i-bx-mobile-alt' },
+  },
+  {
+    title: 'Fashion',
+    avatarProps: { icon: 'i-bx-closet' },
+  },
+  {
+    title: 'Decor',
+    avatarProps: { icon: 'i-bx-home' },
+  },
+  {
+    title: 'Sports',
+    avatarProps: { icon: 'i-bx-football' },
+  },
+]
+</script>
+
+# DX Focused
+
+> _DX => Developer Experience_
+
+Frameworks are nice, they helps you write more maintainable and less code. In 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.
+
+<div class="cards-demo-container">
+  <ACard>
+    <AList
+      :items="items"
+      icon-append
+      class="[--a-list-item-gap:1rem]"
+    />
+  </ACard>
+</div>
+
+<br>
+
+**With other frameworks you certainly have to repeat the markup:**
+
+```vue{24-31}
+<script lang="ts" setup>
+const items = [
+  {
+    title: 'Electronics',
+    avatarProps: { icon: 'i-bx-mobile-alt' },
+  },
+  {
+    title: 'Fashion',
+    avatarProps: { icon: 'i-bx-closet' },
+  },
+  {
+    title: 'Decor',
+    avatarProps: { icon: 'i-bx-home' },
+  },
+  {
+    title: 'Sports',
+    avatarProps: { icon: 'i-bx-football' },
+  },
+]
+</script>
+
+<template>
+  <List>
+    <ListItem v-for="item in items" :key="item.title">
+        <Avatar
+          icon="item.avatarProps.icon"
+          size="small"
+        >
+        </Avatar>
+        <ListItemTitle>{{ item.title }}</ListItemTitle>
+    </ListItem>
+  </List>
+</template>
+```
+
+**With Anu it is so simple <i class="i-fluent-emoji-smiling-face-with-sunglasses"></i>**
+
+```diff
+- icon: 'i-bx-football'
++ icon: ['i-bx-mobile-alt', 'text-2xl']
+```
+
+<br>
+
+```vue{5,9,13,17}
+<script lang="ts" setup>
+const items = [
+  {
+    title: 'Electronics',
+    avatarProps: { icon: ['i-bx-mobile-alt', 'size-2xl'] },
+  },
+  {
+    title: 'Fashion',
+    avatarProps: { icon: ['i-bx-closet', 'size-2xl'] },
+  },
+  {
+    title: 'Decor',
+    avatarProps: { icon: ['i-bx-home', 'size-2xl'] },
+  },
+  {
+    title: 'Sports',
+    avatarProps: { icon: ['i-bx-football', 'size-2xl'] },
+  },
+]
+</script>
+
+<template>
+  <div class="cards-demo-container">
+    <ACard>
+        <AList
+          :items="items"
+          icon-append
+          class="[--a-list-item-gap:1rem]"
+        />
+    </ACard>
+  </div>
+</template>
+```
+
+## Atomic
+
+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.
+
+```vue
+<template>
+  <ADialog
+    v-model="isDialogShown"
+    title="Dialog title"
+    subtitle="Chocolate cake tiramisu donut"
+  />
+</template>
+```
+
+## Easy Customization On The Fly
+
+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.
+
+```vue
+<template>
+  <ABtn class="px-6" >
+</template>
+```
+
+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`
+
+> _More to come..._

docs/guide/features/presets.md

@@ -0,0 +1,44 @@
+# 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.
+
+With presets feature, You can even replicate Bootstrap or Material design <i class="i-fluent-emoji-exploding-head"></i>
+
+Below is 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.
+
+1. Anu (`presetAnu`)
+2. Theme Default (`presetThemeDefault` )
+
+`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.
+
+:::info
+Actually, [presets](https://github.com/unocss/unocss#presets) feature is from UnoCSS. Anu leverages this to provide component styles in separate preset so you can customize the framework however you like.
+:::
+
+## 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.
+
+`presetThemeDefault` have various shortcuts that styles the component. You can overrides these shortcuts to change the look & feel of the component.
+
+```ts
+presetThemeDefault({
+  shortcutOverrides: {
+    btn: 'px-[0.75em] py-[0.375em] rounded-[0.375em] gap-x-[0.375em] whitespace-nowrap',
+  },
+})
+```
+
+## How to create your own preset?
+
+Creating your own UnoCSS preset is really simple. We recommend you first checkout the UnoCSS documentation on [presets](https://github.com/unocss/unocss#presets).
+
+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._

docs/guide/features/spacing.md

@@ -0,0 +1,18 @@
+# Spacing
+
+There might be cases where using component libraries introduces several restrictions. Assume you want to reduce the overall spacing of the button but don't want to reduce the font size of it. With other frameworks, you have to manually adjust the padding, margin, height, etc to get the desired result.
+
+However, Anu provides `spacing` prop to adjust the spacing of any component that supports this feature.
+
+<ABtn :spacing="80" variant="outline">Button</ABtn>
+
+```vue{3}
+<template
+  <ABtn
+    :spacing="80"
+    variant="outline"
+  >
+    spacing-80
+  </ABtn>
+</template>
+```