Introducing SaladCSS

I made a CSS stylesheet! » SaladCSS

SaladCSS is a custom CSS stylesheet that currently includes: Buttons, Badges, and Dropdowns. They even scale with the text, and you can make the text bold! If you don’t like the colors then change them, SaladCSS is fully customizable. Give me suggestions of what to add to this in the comments below. Use this to start using SaladCSS today » <link rel="stylesheet" href="">


Maybe make a website showcasing the style sheet. :smiley:

1 Like

@MiloCat SaladCSS above is the showcase of the items. » Just run the example to see the different items being used.

1 Like

Cool! I like that color! What if you also added a shade of purple for purple lettuce.

This is pretty cool! Good job @SalladShooter! I’m excited to see some new additions later on.

@bobastley you got any suggestions of things to add?

@MiloCat you could customize it yourself if you wanted to.

1 Like

Possibly something with <div>? I always have trouble with aligning and stuff, but I’m not very seasoned in CSS.


@bobastley what kinds of things with <div>?

It’s great! Though I’d recommend making it a deeper shade of green, as the buttons look like they’re disabled.

@OmegaOrbitals Ok I’ll change it.

Possibly a border and background color? The border would also be cool with circular corners.

@bobastley could you provide an image of what your thinking it could look like.

It’s kinda bland, you should add more elements

I don’t really have a good idea for Salad.css specifically, but it should probably use border-radius, and select a color for your border and a background color that blends well with your other elements.

1 Like

@MrVoo1 thats why I’m asking for your suggestions of elements.

@bobastley it already uses border-radius it curves for rounded and a bit for square. There already is a color forestgreen and green. When in a Repl you can customize it using the different element tags: dropdown-round, badge-square, etc. You just change the color in Repl like:

.badge-round {
    background-color: <color>
1 Like