iwant-style

iwant-style library imports ready styles using CSS in JS to be used in conjunction with styled-components.

Screenshot

Contents

• Getting Started
• Usage
• Components

Getting Start

npm install iwant-style

npm install styled-components

Usage

  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>
  ...

Components

Comment

Usage

  import styled from 'styled-components';

  import { comment } from 'iwant-style';

  const Comments = styled.div`
    ${comment}
  `;

  ...
   <Comments>
      <section>
        <h1>Petter</h1>
        <h2>C0-Founder</h2>
        <p>
          Sit cupidatat commodo sit reprehenderit reprehenderit irure aliquip do
          occaecat id.
        </p>
      </section>
      <div>
        <img
          src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample5.jpg'
          alt='profile-sample5'
        />
      </div>
    </Comments>
  ...

Properties

Name	Parameter	Default
${comment}		default

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)}	"round"

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>Card Title</h1>
        <p>
          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.
        </p>
      <hr />
      <div>
        <a href='#'>This is a link</a>
        <a href='#'>This is a link</a>
      </div>
     </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

If you liked this project, contribute improvements or give a star ⭐️ on GitHub.

Thanks!