Documentation pages rework

[asvae]

Following the standard - all pages should be reworked one by one.
This could be done by different developers.
Pages should go through editing process.
Issues that are touching components functionality - you're advised to move to different issue, while also linking in this one, so that we can observe the process.

Could be implemented in full after #2850

[aluarius]

@m0ksem write a few words about css variables examples in components docs pages.

[aluarius]

Related: #2857

[m0ksem]

Basically, CSS variables almost do not mentioned in our examples, so it is not obvious how to use them, etc. I would like to have some style examples in education purpose.

[m0ksem]

Here are grades per page based on my personal opinion:

// 10/10 means it visually looks good and contain correct information

Introduction

• Overview (2/10) - boring
• Meet the team (10/10)
• Roadmap (8/10)
• Browser support (8/10)
• Accessibility guide (6/10)

Getting started

• Installation (8/10)(lot of text, but I don't know how to minimize it)
• Configuration (8/10) (large code examples, hard to read)
• TreeShaking (10/10)
• Nuxt integration (10/10)
• SSR (9/10) Vitise can be moved out of there, better write about useHead.
• Kitchensink (10/10)
• Web components (10/10)
• Testing (10/10)

Styles

• Colors (9/10) - it feels great, but the topic is complex, so it is always possible to make it easier for newbies.
• Css Variables (10/10)
• Typography (10/10)
• Grid (3/10)
• Tailwind Integration (8/10) - looks good, but hard to read.
• Smart Helpers (4/10) - visually bad and hard to read
• CSS Reset (8/10) - we want to remove this page and feature in general

UI Elements

• Alert (10/10)

• Avatar (10/10)

• Badge (7/10) - "color" and "without content" examples looks bad, no accessibility block

• Button (7/10) - "text color" example looks bad, no accessibility block.

• Button dropdown (6/10) - poor mobile look

• Button group (9/10)

• Button toggle (10/10)

• Carousel (10/10)

• Chip (10/10)

• DataTable (6/10) - large and complex examples, hard to read. Maybe fixed with demo controls feature.

• Icon (9/10) - in default example icons not really aligned. Better just show 3 icons.

• Image (9/10) - need demo controls in status demo

• Modal (9/10) - no accessibility block

• Table (10/10)

• Checkbox (9/10) - no accessibility block

• ColorInput (7/10) - must be reworked with new color picker anyway.

• Counter (10/10)

• DateInput (10/10)

• DatePicker (10/10) - but loading is slow, it is a different bug

• FileUplaod (10/10)

• Form (9/10) - no accesibility

• Input (7/10) - visually good, but a lot of examples, hard to read

• Options List (9/10) - not really visually appealing without example controls

• Popover (9/10) - capitalize text in popover content in examples, remove extra color examples

• Radio (10/10) - (in develop)

• Rationg (8/10) - rating icon looks bad, remove extra slider from "number" example.

• Select (9/10) - a lot of examples

• Slider (10/10)

• Switch (8/10) a lot of switches in examples, visually hard to read

• TimeInput (8/10) - missing description in api block, examples not really aligned

• TimePicker (9/10)

• Accordion (9/10) - page looks good, but component - not

• Aspect Ratio (10/10)

• Card (8/10) - examples doesn't have "wow" effect

• Collapse (9/10) - same as accordion

• Divider (7/10) - large and messy examples

• List (9/10)

• Scroll container - (10/10)

• Skeleton (9/10) - no accessibility block

• Split (10/10)

• Breadcrumbs (9/10) - separator demo looks strange

• Navbar (8/10) - shape demo must be removed, add accessibility block

• Pagination (10/10)

• Sidebar (9/10) - maybe make a demo so sidebar looks super different (how to customize it)

• Sidebar item (10/10)

• Stepper (8/10) - "Customized with slots" can be so much better done

• Tabs (8/10) - broing, content demo can be so much better, need variations

• Config (10/10) - but there is a bug in i18n config.

• Dropdown (5/10) - prevent-overflow demo is broken

• Hover (10/10)

• Spacer (10/10)

• Value (8/10) - inline editing demo icons looks miss aligned

• Affix (9/10) - no wow effect

• App bar (4/10) - visually bad

• Backtop (6/10) - on large example with a lot of controls, must be a lot of small examples.

• Color Palette (9/10) - no wow effect

• Confirm (10/10)

• Infinite Scroll (8/10) - disabled button must be removed, I don't understand "Custom scroll target container" example, make it easier

• Inner Loading (10/10)

• Parallax (10/10)

• Progress Bar (6/10) - controls looks bad, complex demos.

• Progress Circle (8/10) - complex demos

• Toast (7/10) - not interesting demos, they're hidden at the bottom

• Tree view (10/10) - color pallete can be removed to simplify demo

• Virtual Scroller (10/10)

Contribution

• Guide (6/10) - a lot of extra information, not actually says how to start contribute.
• UI Element Requirement (4/10) - feels empty
• Structure (10/10)
• Documentation guide (8/10) - visually good.
• Requirements for Treeshaking (9/10) - can be renamed to requirements or styleguide and added more info

Services

• Global Config (9/10) - a lot of code hard to read, but Idk how improve it
• Components config (8/10) - examples can be prettier
• Icons config (9/10) - fix align in playground example
• ColorConfig (9/10) - must be link to Styles/Colors page
• Color Classes (8/10) - bad example with red bg.
• Breakpoint Service (10/10)
• i18n (10/10)

Integrations

• AG Grid (9/10) - maybe move installation below default example, remove extra controls
• UnoCss (9/10) - would be nice to add some usage examples