iwant-style

    0.4.0 • Public • Published

    iwant-style

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

    contributions welcome npm version Feature Requests Bugs npm downloads The MIT License

    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='#'>&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

    Contributors

    Mário Rodeghiero

    | Mário Rodeghiero

    License

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

    Install

    npm i iwant-style

    DownloadsWeekly Downloads

    1

    Version

    0.4.0

    License

    MIT

    Unpacked Size

    318 kB

    Total Files

    21

    Last publish

    Collaborators

    • mariorodeghiero