https://github.com/jeffersonmourak/nicobar
Javascript package for theming layouts
https://github.com/jeffersonmourak/nicobar
css3 custom-properties react styled-components
Last synced: 3 months ago
JSON representation
Javascript package for theming layouts
- Host: GitHub
- URL: https://github.com/jeffersonmourak/nicobar
- Owner: jeffersonmourak
- License: mit
- Created: 2017-08-01T18:27:26.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-03-07T16:46:23.000Z (about 7 years ago)
- Last Synced: 2024-04-25T05:01:44.839Z (about 1 year ago)
- Topics: css3, custom-properties, react, styled-components
- Language: JavaScript
- Size: 1020 KB
- Stars: 10
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Nicobar
> Javascript package for theming layouts.
[](https://www.npmjs.org/package/nicobar)
[](https://travis-ci.org/jeffersonmourak/nicobar)
## Install
Make sure you have `node` and `npm` installed.
`$ npm install nicobar`
## Using
### Vanilla JS
Create or update your code as normal using your CSS, but if something has to change, use CSS Custom properties to set a variable.
**Like this**
```css
.some-class {
display: inline-block;
background: var(--background, #f00);
}
```
then in JS your code.
```javascript
nicobar.set('.some-class', { background: '#0f0' });
```
you can use it how many times you want.
**nicobar.set(target, data)**
the `set` method accept `String` or `HTMLElement` (for while).
and the `data` is a `Object` with key as custom-property name.
### React
Inject nicobar in your project
```javascript
import { Nicobar } from 'nicobar'
// or
const Nicobar = require('nicobar').Nicobar;
```
then init on your component
**Wrapper Constructor**
```javascript
class MyComponent extends React.Component {
render() {
return
...
}
}
```
Inject nicobar in your project
```javascript
import { component } from 'nicobar'
// or
const component = require('nicobar').component;
```
**using Component Builder**
```javascript
const MyElement = component('className', { styleObj }, MyOtherElement)
// or
const MyElement = component.div('className', { styleObj }) // <- You can use any dom element.
class MyComponent extends React.Component {
render() {
return
}
}
```
when it is done you can only change the property `style` and everything will run as expected.
## Contributing
1. Fork
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Submit a pull request
>Feature branch (`git checkout -b my-new-feature`) | commit (`git commit -m 'Add some feature'`) | push (`git push origin my-new-feature`).
## License
[MIT License](http://opensource.org/licenses/MIT)