iwant-style
v0.4.0
Published
Import ready styles using CSS in JS to be used in conjunction with stylized components.
Downloads
7
Maintainers
Readme
Import ready styles using CSS in JS to be used in conjunction with stylized components.
Contents
Getting Start
npm install iwant-style
npm install styled-components
Usage
import styled from 'styled-components';
import { preloader } from 'iwant-style';
const Preloader = styled.div`
${preloader};
`;
...
<Preloader>
<div />
<div />
<div />
</Preloader>
...
Components
PreLoader
Usage
import styled from 'styled-components';
import { preloader } from 'iwant-style';
const Preloader = styled.div`
${preloader};
`;
...
<Preloader>
<div />
<div />
<div />
</Preloader>
...
Properties
| Name | Parameter | Default |
| -------------------- | --------- | --------- |
| ${preloader}
| | bubbles
|
| ${preloaderCircle}
| | circle
|
Preloader Circle
import styled from 'styled-components';
import { preloaderCircle } from 'iwant-style';
const Preloader = styled.div`
${preloaderCircle};
`;
...
<Preloader>
<div />
</Preloader>
...
Avatar
Usage
import styled from 'styled-components';
import { avatar } from 'iwant-style';
const Avatar = styled.img`
${avatar};
`;
...
<Avatar src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample9.jpg' />
...
Properties
| Name | Parameter | Default |
| ----------- | --------- | -------- |
| ${avatar}
| | person
|
Button
Usage
import styled from 'styled-components';
import { btn } from 'iwant-style';
const Button = styled.button`
${btn};
`;
...
<Button>Start</Button>
...
Properties
| Name | Parameter | Default |
| --------------- | ----------- | -------- |
| ${btn}
| | square
|
| ${btn(param)}
| "disable"
| |
| ${btn(param)}
| "float"
| |
Input
Usage
import styled from 'styled-components';
import { input } from 'iwant-style';
const Input = styled.div`
${input};
`;
...
<Input>
<input type='text' required />
<span />
<label>Name</label>
</Input>
...
Dark
import styled from 'styled-components';
import { inputDark } from 'iwant-style';
const Dark = styled.form`
${inputDark};
`;
...
<Dark action='' method=''>
<input type='search' placeholder='What are you looking for?' />
<button>Search</button>
</Dark>
...
Properties
| Name | Parameter | Default |
| ---------- | --------- | ----------- |
| ${input}
| | animation
|
Card
Usage
import styled from 'styled-components';
import { card } from 'iwant-style';
const Card = styled.div`
${card};
`;
...
<Card>
<h1>Title</h1>
<p>lorem inpson</p>
</Card>
...
Properties
| Name | Parameter | Default |
| --------- | --------- | ------- |
| ${card}
| | info
|
Pagination
Usage
import styled from 'styled-components';
import { pagination } from 'iwant-style';
const Pagination = styled.ul`
${pagination};
`;
...
<Pagination>
<li>
<a href='#'><</a>
</li>
<li>
<a href='#'>1</a>
</li>
<li>
<a href='#'>2</a>
</li>
<li>
<a href='#'>3</a>
</li>
<li>
<a href='#'>></a>
</li>
</Pagination>
...
Properties
| Name | Parameter | Default |
| --------------- | --------- | ------- |
| ${pagination}
| | arrow
|
Contributing
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
Author
Contributors
| | | --------------------------------------------------------------------------------------------------------------------- |
License
This project is licensed under the MIT License - see the LICENSE.md file for details