New Color Scheme Props For Bushido-strap!!!

Some of you may remember when I posted, I Created A Style Library. I was very excited to roll out my own mini style library. Now, I'm excited all over again about the new color props I have added to my library. So, let's go over this library and try and understand what it's good at, and where it needs to go.

What is bushido-strap good at?

The one thing that bushido-strap does the best is being able to use the components to quickly and efficiently layout your page by only using props on the components. A few things under the surface work together to make this an easy and intuitive experience. The Wrapper component is meant to wrap every single parent component and what it does is set the default size of the page.

Wrapper sets min-height to 100vh, making sure that the smallest length of the wrapper will be at least as tall as the screen your viewing the site on. It also set max-width to 100vw making sure that the parent wrapper never gets wider than the view screen. This makes flexing inner elements inside wrapper a dream.

What is bushido-strap lacking?

In short, bushido-strap had props to quickly change colors and even a list of colors that could be pulled in from theme, but it wasn't a very dry solution. If you wanted to change the color scheme of a button to green your button might look like:

return (
  <Button color="black" background="green" hover_color="white" hover_background="darkgreen">
    Click here!
  </Button>
)

Now, if you wanted 5 green buttons, you would have to copy that button 5 times and it would make your code look ugly as hell.

The solution!

Color scheme props! Now, you can just add a single prop to change the color scheme of the Button, Linkton and Card components.

The color scheme props for Linkton and Button are the same:

• primary = blue
• secondary = purple
• accent = magenta
• success = green
• warning = orange
• danger = red
• invert = // inverts default values

Example:

return (
  <Button primary> // Turns the color scheme on button to blue
    Click Here
  </Button> 
)

The color scheme props for Card are:

• dark = // dark theme
• light = // light theme

Has a medium tone by default.

Example's:

Default:

return (
  <Wrapper>
    <Card>
      <h1>Hello, world!</h1>
      <Linkton to="/counter">
        Redux Counter
      </Linkton>
      <Box height="2rem"></Box>
      <code>console.log("Your code goes here")</code>
    </Card>
  </Wrapper>
)

Color scheme props:

return (
  <Wrapper>
    <Card dark>
      <h1>Hello, world!</h1>
      <Linkton primary to="/counter">
        Redux Counter
      </Linkton>
      <Box height="2rem"></Box>
      <code>console.log("Your code goes here")</code>
    </Card>
  </Wrapper>
)

Don't forget about the new Box component!

I added a new Box component that's just a div with a height and width prop and also set images inside it to have width: 100%; height: auto; to make images size responsively inside it. So you can make an image 50px wide and keep its proportions by simply doing:

return (
  <Box>
    <img src={./image/source.png} alt="an image" />
  </Box>
)

Also, from my code examples above, you can see Box can be used as an easy and convenient spacer between elements.

That's all, for now, folks!

Thank you so much for checking out my blog, I hope you have fun testing out the new color scheme props and have fun with the new box component as well. Have a beautiful day and happy hacking! ❤️