0.3.1 • Published 6 years ago

react-stylux-tableslists v0.3.1

Weekly downloads
2
License
MIT
Repository
github
Last release
6 years ago

react-stylux-tableslists

This is currently a very alpha stage project, documentation will be lack luster for a few weeks. Please stand by while testing occurs. It should also be noted that no items are responsive, and are only psuedo responsive to the extent that flex-wrap is responsive.

Utilizing three simple component types, this project simplifies layout and front-end considerations for react projects. The three component types are: containers (subject to change), holders, and blocks. Containers (subject to change) define the horizonal space and act as a wrapper for all blocks. Holders then go inside of the container to define the space for the blocks. Holders can go inside of Holders to further define space. Each holder has a pre determinded child length and will render children placed into the holder.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

npm install --save react-stylux-tableslists

How To Use Stylux

Table of Contents

Included in the base version of react-stylux is:

  • Bullet List 1-2
  • Number List 1-3
  • Tables 1-3
  • Cards 1-3

Currently not done:

  • Table 3

Currently almost done:

  • Table 1
  • Table 2
  • NumberList 2
  • Card 1
  • Card 2
  • Card 3

Step by step:

Stylux utilizes three main components and flex-box to handle layouts effectively. As an example, import Container, Holder, and Navbar1:

import {
    Container,
    Holder,
    NavBar1,
} from 'react-stylux';

Now you can use these components like any other component!

<Container>
    <Holder>
        <NavBar1>
            <a href="">Item1</a>
            <a href="">Item2</a>
            <a href="">Item3</a>
        </NavBar1>
        <NavBar1>
            <a href="facebook.com"></a>
            <a href="twitter.com"></a>
            <a href="instagram.com"></a>
        </NavBar1>
    </Holder>
</Container>

Children are passed into the block level component to render based on type. In the example above, NavBar1 is used in conjunction with Holder1. This will create two spaces, and create two navbars center aligned. As a special note, every navbar block is hooked up with a className to psuedo render a logo based on href/to address info using the font awesome library.

props can be passed into every item to further create a custom expierence:

<Container>
    <Holder
        block1="2">
        <NavBar1>
            <a href="">Item1</a>
            <a href="">Item2</a>
            <a href="">Item3</a>
        </NavBar1>
        <NavBar1
            align="flex-end"
            navbarWidth="60%">
            <a href="facebook.com"></a>
            <a href="twitter.com"></a>
            <a href="instagram.com"></a>
        </NavBar1>
    </Holder>
</Container>

This is just a basic example of what can be done with stylux. Basic documentation on the current blocks can be seen below, a more comprehensive website is currently being worked on.

Documentation:

Each element will be shown with an example of the possible props equal to the default props, if no default is set then the prop will have no equals. Each elements will then be shown is an example of children accepted.

List Specific (possible rework expected)

Number List

NumberList1
<NumberList1
    color = 'black'
    font = 'serif'
    size = '1.333em'
    lineHeight = "1.5em"
    weight = '400'
    paddingLeft
    listStyleType = 'decimal'
    listStyleImage = 'none'
    listStylePosition = 'inside'
    id
    className
    >

This accepts unlimited? children split with \

<NumberList1>
    item1\
    item2\
    item3\
</NumberList1>
NumberList2

Not Finished

<NumberList1
    listAmount = '1'
    id
    className
    >

This accepts unlimited? children split by the listAmount

<NumberList2>
    item1
    item2
    item3
</NumberList2>
NumberList3
<NumberList3
    color = 'black'
    font = 'serif'
    size = '1.333em'
    lineHeight = "1.5em"
    weight = '400'
    paddingLeft
    listStyleType = 'upper-roman'
    listStyleImage = 'none'
    listStylePosition = 'inside'
    id
    className
    >

This accepts unlimited? children split with \

<NumberList3>
    item1\
    item2\
    item3\
</NumberList3>

Bullet List

BulletList1

Not Finished

<BulletList1
    color = 'black'
    font = 'serif'
    size = '1.333em'
    lineHeight = "1.5em"
    weight = '400'
    paddingLeft
    listStyleType = 'disc'
    listStyleImage = 'none'
    listStylePosition = 'inside'
    itemPadding
    itemBGImage
    itemBGSize
    id
    className
    >

This accepts unlimited? children split with \

<BulletList1>
    item1\
    item2\
    item3\
</BulletList1>
BulletList2

Not Finished

<BulletList2
    color = 'black'
    font = 'serif'
    size = '1.333em'
    lineHeight = "1.5em"
    weight = '400'
    paddingLeft
    listStyleType = 'square'
    listStyleImage = 'none'
    listStylePosition = 'inside'
    itemPadding
    itemBGImage
    itemBGSize
    id
    className
    >

This accepts unlimited? children split with \

<BulletList1>
    item1\
    item2\
    item3\
</BulletList1>

Tables

Table1

Not Finished

<Table1
    columns="3"
    rows= "3"
    head
    body
    tableId
    mainId
    mainClassName
    tableClassName

    hbordertop
    hborderRight
    hborderBottom
    hborderLeft
    hborder = '1px solid black'
    hvertical = 'center'
    headWidth
    headHeight
    headMargin
    headPadding = '5px'

    dbordertop
    dborderRight
    dborderBottom
    dborderLeft
    dborder = '1px solid black'
    dwidth
    dheight
    dmargin
    dpadding = '5px'

    tbordertop
    tborderRight
    tborderBottom
    tborderLeft
    tborder = '1px solid black'
    tmargin ='5px'
    tpadding
    tableWidth
    tableHeight
    borderCollaspe = 'collaspe'
    >

This accepts unlimited? children and renders based on column and row values

<Table1>
    {'head1'}
    {'head2'}
    {'head3'}
    {'body1'}
    {'body2'}
    {'body3'}
    {'body4'}
    {'body5'}
    {'body6'}
</Table1>
Table2

Not Finished

<Table2
    columns="3"
    rows= "3"
    body
    tableId
    mainId
    mainClassName
    tableClassName

    dbordertop
    dborderRight
    dborderBottom
    dborderLeft
    dborder = '1px solid black'
    dwidth
    dheight
    dmargin
    dpadding = '5px'

    tbordertop
    tborderRight
    tborderBottom
    tborderLeft
    tborder = '1px solid black'
    tmargin ='5px'
    tpadding
    tableWidth
    tableHeight
    borderCollaspe = 'collaspe'
    >

This accepts unlimited? children and renders based on column and row values

<Table2>
    {'head1'}
    {'body1'}
    {'body2'}
    {'head2'}
    {'body3'}
    {'body4'}
    {'head3'}
    {'body5'}
    {'body6'}
</Table2>

Cards

Card1
<Card1
    shadow = '1px 4px 8px 0 rgba(0,0,0,0.2)'
    hovShadow = '1px 8px 16px 0 rgba(0,0,0,0.2)'
    corners
>
  • accepts four children in this order: img, alt tag, h5, p
<Card1>
    {img}
    {'img alt tag'}
    {'Some title that is not styled yet'}
    {'supporting text that is not styled yet'}
</Card1>
Card2
<Card2
    shadow = '1px 4px 8px 0 rgba(0,0,0,0.2)'
    hovShadow = '1px 8px 16px 0 rgba(0,0,0,0.2)'
    corners
    btnClick
    btnText
>
  • accepts four children in this order: img, alt tag, h5, p
<Card2>
     {img}
    {'img alt tag'}
    {'Some title that is not styled yet'}
    {'supporting text that is not styled yet'}
</Card2>
Card3
<Card3
    shadow = '1px 4px 8px 0 rgba(0,0,0,0.2)'
    hovShadow = '1px 8px 16px 0 rgba(0,0,0,0.2)'
    corners
    height = '398px'
    width = '250px'
>
  • accepts 7 children
<Card3>
    {'Some Item'}
    {'$00.00'}
    {'Info'}
    {'Info'}
    {'Info'}
    {'Info'}
    {'Call to action'}
</Card3>

Known Bugs

Will be added soon

Feature Wish List

Will be added soon

Built With

Code of Conduct

a link should go to the code of conduct

Contributing

No Contributions will be accepted outside of the project team until the project is out of full Alpha Testing

Versioning

for a more detailed list of changes, please refer to the changelog

0.3.0

  • works

Authors

  • Christopher Fox -

License

This is licensed under MIT license. If used in any project, please give ackknowledgments to Christoher Fox.

Acknowledgments

  • A Giant Thank you to Dev Mountain for teaching me to code good
  • A big thank you to Morten Rand-Hendriksen for your videos on flex box and the code that allows the className socialness to work
  • Credit to http://meyerweb.com/eric/tools/css/reset/ for use of a reset file
  • Credit to the React-Styles team (used as nestingstyles) for the code to allow for media queries through style
  • Massive credit for the animations to Daniel Eden - animate.css - http://daneden.me/animate
  • A Huge thanks to www.w3schools.com and their awesome tutorials, many first draft items were created with those

Changelog

0.3.1

  • tables now have 5px margin
  • cards added to repo
  • Card 2 and 3 in first draft status

  • Card have borderRadius prop through corners=""

  • Readme updated for changes

0.2.0

  • exists as a mono repo
nestingstylesreactreact-domwebpack
@everything-registry/sub-chunk-2615
0.3.1

6 years ago

0.3.0

6 years ago

0.2.0

6 years ago