react-stylux-tableslists
v0.3.1
Published
The tables, cards, and list mechanic of react-stylux
Downloads
9
Readme
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
- React - The library used
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