Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gugutz/stylord
Javascript styles made easy
https://github.com/gugutz/stylord
Last synced: 27 days ago
JSON representation
Javascript styles made easy
- Host: GitHub
- URL: https://github.com/gugutz/stylord
- Owner: gugutz
- License: mit
- Created: 2017-03-17T14:18:19.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-02-07T13:33:50.000Z (almost 6 years ago)
- Last Synced: 2024-04-27T01:03:17.008Z (8 months ago)
- Language: JavaScript
- Homepage:
- Size: 169 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Stylord
[](https://www.npmjs.com/package/stylord)
[](https://travis-ci.org/gugutz/stylord)
[](https://coveralls.io/github/gugutz/stylord?branch=master)
[](https://github.com/sindresorhus/xo)
> Javascript styles made easy.
Stylord provides a simple way to declare your stylesheets inside the JavaScript files without [worrying about](http://i.imgur.com/Q3cUg29.gif) the CSS global scope.
- Declare your CSS as simple [Object literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Object_literals).
- Works like a charm with any framework or just [vanilla JavaScript](http://vanilla-js.com/).
- Full support of [pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) like `:hover` and [pseudo-elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) like `::after`.
- Autoprefixer out-of-box.
- Easy to use [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries), [keyframes animation](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes) and [font-face](https://developer.mozilla.org/pt-BR/docs/Web/CSS/@font-face).
## Table of Contents
- [Install](#install)
- [Usage](#usage)
- [Media Queries](#media-queries)
- [Pseudo-classes and pseudo-elements](#pseudo-classes-and-pseudo-elements)
- [Keyframes animation](#keyframes-animation)
- [Font-face](#font-face)
- [Globals](#globals)
- [Support](#support)
- [API](#api)
- [Contributing](#contributing)
- [License](#license)
## Install
This project uses [node](http://nodejs.org) and [npm](https://npmjs.com).
Go check them out if you don't have them locally installed.
```sh
$ npm install --save-dev stylord
```
## Usage
```jsx
import {createStyles} from 'stylord'
import React, {Component} from 'react'
const style = createStyles({
app: {
color: 'blue',
fontSize: '20px'
}
})
class App extends Component {
render() {
return
Hello World
}
}
```
### Media queries
```jsx
import {createStyles} from 'stylord'
import React, {Component} from 'react'
const style = createStyles({
app: {
color: 'blue',
'@media screen and (min-width: 300px)': {
color: 'red'
},
'@media screen and (min-width: 600px)': {
color: 'pink'
},
'@media screen and (min-width: 900px)': {
color: 'yellow'
}
}
})
class App extends Component {
render() {
return
Hello World
}
}
```
### Pseudo-classes and pseudo-elements
```jsx
import {createStyles} from 'stylord'
import React, {Component} from 'react'
const style = createStyles({
app: {
color: 'blue',
position: 'relative'
':hover': {
color: 'red'
},
'::before': {
backgroundColor: 'green',
content: '""', // You must provide the content as it will be in the css
display: 'block',
left: 0,
position: 'absolute',
top: 0
}
}
})
class App extends Component {
render() {
return
Hello World
}
}
```
### Keyframes animation
```jsx
import {createStyles, createKeyframes} from 'stylord'
import React, {Component} from 'react'
// Animation taken from https://github.com/daneden/animate.css/blob/master/source/attention_seekers/bounce.css
const animations = createKeyframes({
bounce: {
'from, 20%, 53%, 80%, to': {
animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
transform: 'translate3d(0,0,0)'
},
'40%, 43%': {
animationTimingFunction: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)',
transform: 'translate3d(0, -30px, 0)'
}
'70%': {
animationTimingFunction: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)',
transform: 'translate3d(0, -15px, 0)'
},
'90%': {
transform: 'translate3d(0,-4px,0)'
}
}
})
const style = createStyles({
app: {
animationDuration: '1s',
animationFill-mode: 'both',
animationName: animations.bounce,
transformOrigin: 'center bottom'
}
})
class App extends Component {
render() {
return
Hello World
}
}
```
### Font-face
```jsx
import {createStyles, createFontFace} from 'stylord'
import React, {Component} from 'react'
createFontFace({
fontFamily: 'Roboto',
fontStyle: 'normal',
fontWeight: 400,
src: 'local("Roboto"), local("Roboto-Regular"), url(path/to/font/roboto.woff2) format("woff2")'
})
const style = createStyles({
app: {
color: 'blue',
fontSize: '20px',
fontFamily: '"Roboto", sans-serif'
}
})
class App extends Component {
render() {
return
Hello World
}
}
```
### Globals
Stylord provide a simple way to handle global css rules, it's a very useful feature to reset any unwanted default css properties. But [with great power comes great responsibility](https://youtu.be/nhLyPH_KirE), so use it wisely.
```jsx
import {createStyles, createGlobals} from 'stylord'
import React, {Component} from 'react'
createGlobals({
'*': {
border: 0,
margin: 0,
padding: 0
},
'*, *::after, *::before': {
boxSizing: border-box
}
})
const style = createStyles({
app: {
color: 'blue',
fontSize: '20px'
}
})
class App extends Component {
render() {
return
Hello World
}
}
```
## Support
[](https://saucelabs.com/u/stylord)
## API
### createStyles
Create a stylesheet and inject it to the head of the application.
**Parameters**
- `rules` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** CSS rules to be rendered.
**Examples**
```javascript
// returns {modal: 'modal_hgdfgf', button: 'button_guyhg'}
createStyles({
modal: {
width: '100%'
},
button: {
borderRadius: '2px'
}
})
```
Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** the class names of the css modules created.
### createKeyframes
Create a keyframe animation and inject it to the head of the application.
**Parameters**
- `rules` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** CSS keyframe to be create.
**Examples**
```javascript
// returns {fade: 'fade_hgdfgf'}
stylord({
fade: {
from: {
opacity: 1
},
to: {
opacity: 0
}
}
})
```
Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** the names of the keyframes created.
### createFontFace
Create a font-face and inject it to the head of the application.
**Parameters**
- `rules` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** CSS font-face rules to be rendered.
**Examples**
```javascript
createFontFace({
fontFamily: 'MyHelvetica',
src: 'local("Helvetica Neue Bold"), url(MgOpenModernaBold.ttf)',
fontWeight: 'bold'
})
```
### createGlobals
Create a global css and inject it to the head of the application.
**Parameters**
- `rules` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** CSS global rules to be rendered.
**Examples**
```javascript
createGlobals({
'*': {
border: 0,
boxSizing: 'inherit',
margin: 0,
padding: 0,
outline: 0,
verticalAlign: 'baseline'
},
body: {
boxSizing: 'border-box',
lineHeight: 1.5
}
})
```
## Contributing
See the [contributing file](CONTRIBUTING.md).
## License
[MIT License](LICENSE.md) © [Gustavo P Borges](https://gugutz.github.io/)