iwant-style

Import ready styles using CSS in JS to be used in conjunction with stylized components.

Contents

• Getting Started

• Usage

• Components

  • Preloader
  • Avatar
  • Button
  • Input
  • Card
  • Pagination
  • Navbar
  • Background

• How to Contribute

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='#'>&lt;</a>
            </li>
            <li>
              <a href='#'>1</a>
            </li>
            <li>
              <a href='#'>2</a>
            </li>
            <li>
              <a href='#'>3</a>
            </li>
            <li>
              <a href='#'>&gt;</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

• Mário Antônio do Amaral Rodeghiero

Contributors

| Mário Rodeghiero

License

This project is licensed under the MIT License - see the LICENSE.md file for details