Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mariorodeghiero/iwant-style
iwant-style library imports ready styles using CSS in JS to be used in conjunction with styled-components.
https://github.com/mariorodeghiero/iwant-style
css cssinjs style styled-components
Last synced: about 6 hours ago
JSON representation
iwant-style library imports ready styles using CSS in JS to be used in conjunction with styled-components.
- Host: GitHub
- URL: https://github.com/mariorodeghiero/iwant-style
- Owner: mariorodeghiero
- License: mit
- Created: 2018-12-24T18:25:18.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-01-07T16:40:20.000Z (almost 6 years ago)
- Last Synced: 2024-10-05T19:18:06.941Z (about 1 month ago)
- Topics: css, cssinjs, style, styled-components
- Language: JavaScript
- Homepage:
- Size: 265 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
iwant-style
iwant-style library imports ready styles using CSS in JS to be used in conjunction with styled-components.
[](https://github.com/mariorodeghiero/iwant-style/issues)
[](https://github.com/mariorodeghiero/iwant-style/issues?q=is%3Aopen+is%3Aissue+label%3Afeature-request+sort%3Areactions-%2B1-desc)
[](https://github.com/mariorodeghiero/iwant-style/issues?utf8=✓&q=is%3Aissue+is%3Aopen+label%3Abug)
[](http://npm-stat.com/charts.html?package=iwant-style)
[](http://opensource.org/licenses/MIT)
## Contents
- [Getting Started](#getting-started)
- [Usage](#usage)
- [Components](#components)
- [Comment](#Comment)
- [Preloader](#Preloader)
- [Avatar](#Avatar)
- [Button](#Button)
- [Input](#Input)
- [Card](#Card)
- [Pagination](#Pagination)
- [Navbar](#Navbar)
- [Background](#Backgound)
- [How to Contribute](#Contributors)
## Getting Start
```bash
npm install iwant-style
```
```bash
npm install styled-components
```
## Usage
```javascript
import styled from 'styled-components';
import { inputDark } from 'iwant-style';
const Dark = styled.form`
${inputDark};
`;
...
Search
...
```
## Components
### Comment
##### Usage
```javascript
import styled from 'styled-components';
import { comment } from 'iwant-style';
const Comments = styled.div`
${comment}
`;
...
Petter
C0-Founder
Sit cupidatat commodo sit reprehenderit reprehenderit irure aliquip do
occaecat id.
...
```
##### Properties
| Name | Parameter | Default |
| ----------- | --------- | -------- |
| `${comment}` | | `default` |
### PreLoader
##### Usage
```javascript
import styled from 'styled-components';
import { preloader } from 'iwant-style';
const Preloader = styled.div`
${preloader};
`;
...
...
```
##### Properties
| Name | Parameter | Default |
| -------------------- | --------- | --------- |
| `${preloader}` | | `bubbles` |
| `${preloaderCircle}` | | `circle` |
## Preloader Circle
```javascript
import styled from 'styled-components';
import { preloaderCircle } from 'iwant-style';
const Preloader = styled.div`
${preloaderCircle};
`;
...
...
```
### Avatar
##### Usage
```javascript
import styled from 'styled-components';
import { avatar } from 'iwant-style';
const Avatar = styled.img`
${avatar};
`;
...
...
```
##### Properties
| Name | Parameter | Default |
| ----------- | --------- | -------- |
| `${avatar}` | | `person` |
### Button
##### Usage
```javascript
import styled from 'styled-components';
import { btn } from 'iwant-style';
const Button = styled.button`
${btn};
`;
...
Start
...
```
##### Properties
| Name | Parameter | Default |
| --------------- | ----------- | -------- |
| `${btn}` | | `square` |
| `${btn(param)}` | `"disable"` | |
| `${btn(param)}` | `"round"` | |
### Input
##### Usage
```javascript
import styled from 'styled-components';
import { input } from 'iwant-style';
const Input = styled.div`
${input};
`;
...
Name
...
```
## Dark
```javascript
import styled from 'styled-components';
import { inputDark } from 'iwant-style';
const Dark = styled.form`
${inputDark};
`;
...
Search
...
```
##### Properties
| Name | Parameter | Default |
| ---------- | --------- | ----------- |
| `${input}` | | `animation` |
### Card
##### Usage
```javascript
import styled from 'styled-components';
import { card } from 'iwant-style';
const Card = styled.div`
${card};
`;
...
Card Title
Veniam elit commodo culpa sunt adincididunt nisi minim amet qui
sit pariatur occaecat. Veniam elitcommodo culpa sunt ad
incididunt nisi minim amet qui sitpariatur occaecat. sit pariatur
occaecat.
...
```
##### Properties
| Name | Parameter | Default |
| --------- | --------- | ------- |
| `${card}` | | `info` |
### Pagination
##### Usage
```javascript
import styled from 'styled-components';
import { pagination } from 'iwant-style';
const Pagination = styled.ul`
${pagination};
`;
...
<
1
2
3
>
...
```
##### Properties
| Name | Parameter | Default |
| --------------- | --------- | ------- |
| `${pagination}` | | `arrow` |
## Contributing
Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
## Author
- [Mário Antônio do Amaral Rodeghiero](https://github.com/mariorodeghiero)
## Contributors
| [](https://github.com/mariorodeghiero) |
| --------------------------------------------------------------------------------------------------------------------- |
| [Mário Rodeghiero](https://github.com/mariorodeghiero)
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details