https://github.com/web-atoms/data-styles
Easy to use Data Styles
https://github.com/web-atoms/data-styles
Last synced: 6 months ago
JSON representation
Easy to use Data Styles
- Host: GitHub
- URL: https://github.com/web-atoms/data-styles
- Owner: web-atoms
- License: apache-2.0
- Created: 2023-04-17T05:47:08.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-10T04:51:55.000Z (9 months ago)
- Last Synced: 2024-12-11T07:17:59.893Z (7 months ago)
- Language: TypeScript
- Size: 236 KB
- Stars: 4
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Web Atoms Data Styles
Data styles utilizes data attributes to specify some easy styles. `data-styles.d.ts` provides intellisense to add corresponding data attributes in JSX.
# Installation
1. You can directly reference `data-styles.css`.
2. Or you can import SystemJS module `data-styles.js`.
# Usage
## Multiple attributes on single node.
```tsx
```
## Change attribute based on condition
```tsx
```
# Why?
1. Data Styles are composable, you can combine multiple attributes on single node.
# Why not style attribute?
1. Style attribute is heavy, there is additional CSSStyleDeclaration created and associated with each element along with actual style that to be displayed.
2. Style attribute requires parsing every time the style has been set, where else when set in data attribute, all styles are already parsed and they are associated with element quickly.
3. Style attribute is not customizable, for example, we have a styled call `data-layout="accent-button"`. When you are creating reusable components, you can specify initial styles using data attributes. And end user can customize styles based on desired design needs. Inline style does not allow other customizations such as media queries, pseudo elements, hover, active etc.
# Layouts
We have created some basic layouts that are reusable and customizable.
1. row - a single flex row with gap and padding of 5px (customizable through variables).
2. flex-wrap - flex wrap with gap and padding of 5px.
3. command-row - same as row but with some additional background and styling for container buttons.
4. button - button with flex to contain and position icons correctly, there are various buttons such as accent-button, go-button (green), reject-button (dark red), stop-button (red), accept-button (blue).
5. link - a simple link with text decoration set to none and on hover text decoration is set to underline. Colors are customizable.
6. warning - a warning flex box with default border, radius and warning background color.