New Bushido-strap React Style Library Update!

I'm happy to announce that bushido-strap has just received a pretty big update! Check out the doc's for an in-depth guide on each component!

I would love to go over some of the most exciting changes here on my blog with y'all! ❤️

New style Maps!

So, just like before, you can use justify="space-between" on a bushido-strap component. But now you can also do jc_between for the same effect! Adding stretch to a component will make it's width 100% and it doesn't stop there! You can turn Card box-shadows off with the noshadow prop and add a box-shadow to Box, Col, and Row with the shade prop. And, of course, you can still set a custom box-shadow by giving a value to the shadow props.

New Style Props And Prop Names!

There is now a sqr prop and all components that have a width and height prop. When you give a value to the sqr prop it adds that value to width AND the height at the same time. So <Box sqr="5rem" bg="crimson" /> will be a box that is 5rem heigh, 5rem wide and a background color of crimson.

Margin and padding can be quickly added now with some easy style maps.
xsm = margin: 1rem; | xsp = padding: 1rem;
sm = margin: 2rem; | xsp = padding: 2rem;
mm = margin: 3rem; | mp = padding: 3rem;

lm = margin: 4 rem; | lp = padding: 4 rem;
xlm = margin: 5rem; | xlp = padding: 5rem;

A lot of prop names have been shorted.

• width is now w
• height is now h
• padding is now p
• margin is now m
• background is now bg

Example:

export default MyComponent() {
  return (
    <Card w="40rem" noshadow jc_center>
      <Col jc_around stretch>
        <Row xsp xsm stretch jc_center shade bg="crimson">
          Text 1
        </Row>
        <Row xsp xsm stretch jc_center shade bg="royalblue">
          Text 2
        </Row>
      </Col>
    </Card>
  )
}

Would look something like:

Here's a picture of some basic components:

And here's a pic of the portfolio I'm working on now using my library.

Thanks for reading!

For a deep dive into what this library has to offer, check out my docs!

For an easy way to bootstrap a React project with this library, already integrated, set up, and ready to go: create-react-app app-name --template bushido-lite. You can find the docs for my template here.