https://github.com/nitin42/glamorous-stylus
Use Stylus with glamorous
https://github.com/nitin42/glamorous-stylus
Last synced: 4 months ago
JSON representation
Use Stylus with glamorous
- Host: GitHub
- URL: https://github.com/nitin42/glamorous-stylus
- Owner: nitin42
- Created: 2017-09-18T17:00:28.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-09-18T17:13:03.000Z (over 7 years ago)
- Last Synced: 2024-10-03T12:12:22.262Z (9 months ago)
- Language: JavaScript
- Size: 33.2 KB
- Stars: 6
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# glamorous-stylus 💄
> Use glamorous to style React components with Stylus
## Install
```
npm install glamorous-stylus
```
After you're done with the installation, place this in your `index.html`.
> IMPORTANT - This is required for client side usage of Stylus
```
```
## API Reference
### glamorous.stylus(code, { displayName })
Creates a stylus component with the stylus `code` and accepts an optional argument `displayName`.
**Example**
```js
const Button = glamorous.stylus(
`
button-styles(radius, size, color, type)
border-radius radius
border size type color
color mistyrose
background-color white
button
button-styles(3px, 2px, mistyrose, solid)
`,
{ displayName: 'ButtonComponent' }
);
```
### fontFace(code)
Loads the given font-face and returns the font family name
**Example**
```js
const Fira = glamorous.fontFace(`
@font-face
font-family FiraCode
font-style normalize
src url(./FiraCode-Retina.ttf)
`);
const Name = glamorous.stylus(`
h2
font-family ${Fira}
`, { displayName: 'Name' });
```
### keyframes(code)
loads the animation keyframes and returns an animation name
**Example**
```js
const fadeIn = glamorous.keyframes(`
animation-name = fadeIn
@keyframes animation-name
for i in 0..10
{10% * i}
opacity (i/10)
`);
const FadeInButton = glamorous.stylus(
`
button
animation ${fadeIn} 4s ease-out
`,
{ displayName: "FadeInButton" }
);
```
## Documentation
Similar to [stylus-in-react](https://github.com/nitin42/stylus-in-react) 😄
## License
MIT