New Color Scheme Props For Bushido-strap!!!
Tags: react, npm, javascript, webdev
Published: 2020-01-05 19:39:26

Some of you may remember when I posted, [I Created A Style Library](https://dev.to/jimmymcbride/i-created-a-style-library-1mn2). 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: 

```react
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:
```react
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:
```react
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>
)
```
![default with no props](https://thepracticaldev.s3.amazonaws.com/i/e2bjx0sz5s98qso2vrdk.png)

Color scheme props:
```react
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>
)
```
![with color scheme props added](https://thepracticaldev.s3.amazonaws.com/i/bstc77cvx732oqi5je78.png)

### 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:
```react
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! :heart: