Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/amaui-org/amaui-style
JS CSS framework agnostic solution
https://github.com/amaui-org/amaui-style
amaui back-end backend browser cascading-style-sheets css css-in-js front-end frontend javascript js library node nodejs style styling typescript utils web
Last synced: about 2 months ago
JSON representation
JS CSS framework agnostic solution
- Host: GitHub
- URL: https://github.com/amaui-org/amaui-style
- Owner: amaui-org
- License: mit
- Created: 2022-03-31T08:52:19.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-19T21:37:11.000Z (9 months ago)
- Last Synced: 2024-11-02T00:48:42.974Z (2 months ago)
- Topics: amaui, back-end, backend, browser, cascading-style-sheets, css, css-in-js, front-end, frontend, javascript, js, library, node, nodejs, style, styling, typescript, utils, web
- Language: TypeScript
- Homepage: https://docs.amaui.me/library/style
- Size: 1.36 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
amaui Style
JS CSS framework agnostic solution
MIT license
Production ready
UMD 35.3kb gzipped
100% test cov
Browser and Nodejs
Very simple code
Modern code
Junior friendly
Typescript
Made with :yellow_heart:
## Getting started
### Add
```sh
yarn add @amaui/style
```
### Use
```javascript
import { style } from '@amaui/style';
const styles = style(theme => ({
'@keyframes a': {
'0%': {
color: 'white',
},
'40%': {
color: 'yellow',
},
},
body: {
'@pure': true,
margin: 40,
},
main: {
'@p': true,
margin: 40,
},
'@pure': {
a: {
margin: 4,
},
},
a: {
width: 100,
'max-width': 100,
// Simple
background: '#faa',
margin: '0 14px 4px 40px',
// rtl
marginLeft: 41,
float: 'left',
// sort
paddingLeft: 41,
padding: 40,
// prefixes
position: 'sticky',
transition: 'all .4s ease',
maskOrigin: 'inherit',
maskImage: 'linear-gradient(rgba(0, 0, 0, 1.0), transparent)',
maskPosition: '40% 74%',
// animation
animation: '$a .4s ease',
},
// Additionaly nested
a1: {
color: 'yellow',
'& .a14': {
color: 'white',
'& > a': {
color: 'yellow',
'&:active': {
color: 'orange',
// rtl
marginLeft: 40,
float: 'left',
// sort
padding: 40,
paddingLeft: 41,
// prefixes
position: 'sticky',
transition: 'all .4s ease',
maskOrigin: 'margin-box',
maskImage: 'linear-gradient(rgba(0, 0, 0, 1.0), transparent)',
maskPosition: '40% 74%',
}
}
},
},
a2: {
// Function
background: props => props.a === 1 ? 'yellow' : 'orange',
},
a3: props => props.a === 1 ? {
width: 100,
// animation
animation: '$a .4s ease',
} : {
width: 100,
'max-width': 100,
// Simple
background: 'orange',
},
}));
// Add
const response = styles.add();
// At this moment all the static sheets and instances of dynamic ones
// have been added to the DOM and in response
// you have all their made classNames, classes and keyframes
// values to add to your html, vue, react elements, etc.
// Response
// {
// ids: {
// static: [
// '1b2b0876-238b-416e-b10b-c01f8dbdfd76'
// ],
// dynamic: [
// '4a4e395b-2db7-4619-ad12-f17737a0d3d1'
// ]
// },
// classNames: {
// a: 'a-0',
// a1: 'a1-1',
// a2: 'a2-2',
// a3: 'a3-3'
// },
// classes: {
// a: 'a-0',
// a1: 'a1-1',
// a2: 'a2-2',
// a3: 'a3-3'
// },
// keyframes: {
// a: 'a-0'
// }
// }
```
### Dev
Install
```sh
yarn
```
Test
```sh
yarn test
```
### Prod
Build
```sh
yarn build
```