Below are just some CSS examples for various purposes. Please feel free to use this page for inspiration, take and use any of the examples directly, etc.

General Minimalist CSS Properties/Guidelines

When trying to create CSS styling for a minimalist design, there are a few CSS properties I keep in mind that I usually alter to create that minimalist feel.

• Borders
• For input fields, it's often a good idea to play with the borders so that not all borders are visible. In a lot of minimalist websites, you might notice that there is only a bottom border on most input fields; you'll even see that in the create and edit document pages in this website.
• Even for elements that don't traditionally have borders, like the <blockquote> tag, it might be more aesthetically appealing to get creative with a partial border.
• Border Radius/Corners
• Nice thing about adjusting border radius for a minimalist design is that you can really go with whatever you think fits your look. I would just advice to keep the border radius of various elements like buttons, text areas, etc consistent. I personally prefer more sharper corners, but the nice thing is with transition effects, you can actually combine both styles: rounded and sharp corners (more on that below).
• As sort of mentioned above, don't think border radius is something to play with for just buttons. There are so many ways you can adjust border radius to add a really unique look to your buttons, divs, code blocks, inputs, and so many elements that I myself have yet to experiment with. This is just a really cool way to make your website look truly unique.
• Transition Effects
• First and foremost, always remember that transition effects are for way more than just color transitions. Yes, you can use transition effects to slowly transition the color of something when it is hovered over, but you can get way more creative than just that. Back when I was writing about combining both sharp and rounded corners when playing with border radius, this is what I meant. You can have a div or button with rounded corners, and when that element is hovered over, change that element to have sharp corners (border radius of 0); all with a smooth transition. I'll try to show an example of this in the CSS examples below.

In general, you probably want to avoid anything too visually disruptive. These could include any of the below effects.

• Too many moving components. This could be moving animations for images, text, fields, etc. Sure, they might look cool the first time, but people might get pretty annoyed with them as they keep visiting those animations. If you want to have moving components (which in a minimal level is totally fine for a minimalist design), just keep them short and fast.
• A lot of alerts or messages. I myself actually struggle with balancing enough alerts for users, but it's pretty clear to everyone that too many alerts become annoying quickly. To be completely honest, I don't know too much about when it is necessary to provide alerts and messages for users. Should we provide alerts for only errors or immediate warnings (like the user is about to delete their account), or should be use alerts for suggestions as well? Again, I honestly can't give you a professional answer, but I currently am using alerts for just things that are more immediate.

Basically what I want you to take from this, is that these are CSS properties that are very easy to play around with, and I feel that these are very easy ways for you to create styling that'll make your website feel like your very own.

CSS Form Examples

Here are CSS examples for form inputs, labels, and other form related elements you might find helpful.

Form Fields

Here are some CSS examples for <input> fields.

This first example is a very easy one to implementation and change.

React/JSX/HTML

<div className="Create__form-group">
        <label>Name: </label>
        <input
                type="text"
                id="name"
                className="input-short-field"
                value={name} // Change to whatever your value needs are.
                onChange={(e) => setName(e.target.value)} // Change to whatever your needs are.
                required
        />
</div>

CSS

.input-short-field {
        border-radius: 0;
        background: transparent;
        border: none;         
        border-bottom: 1px solid #090e16; 
        color: #090e16;     
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
        padding-top: 0;
        outline: none;
        width: 45%;
        font-size: 20px;
}

As you might have noticed, these are actually some of the fields I use in the forms on this website. Play with any of these CSS property values as needed. Again, you can take these direclty, or just use these as inspiration for ideas. I just like these one for its ease of implementation; yet it looks pretty good.

This second example is a bit more work for implementation, but it adds a really neat moving component. Something that isn't too extravagant at all and very smooth. This requires more than just adding CSS to the input field.

React/JSX/HTML

// For this to work, you need all three components: div, input, and label.
<div className="Auth__input-container">
        <input
                type="text"
                value={email} // Change to meet whatever value needs you might have.
                onChange={(e) => setEmail(e.target.value)} // Change to whatever your needs are.
                required
        />
        <label>E-mail Address</label>
</div>

CSS

.Auth__input-container{
        position:relative;
        margin-bottom:25px;
}

.Auth__input-container label{
        position:absolute;
        top: 0px;
        left: 0px;
        font-size:16px;
        color:#fff;     
        pointer-events:none;
        transition: all 0.2s ease-in-out;
}

.Auth__input-container input{ 
        border:0;
        border-bottom:1px solid #555;  
        background:transparent;
        width:100%;
        padding:8px 0 5px 0;
        font-size:16px;
        color:#fff;
}

.Auth__input-container input:focus{ 
        border:none;    
        outline:none;
        border-bottom:1px solid #6b9ce7;        
}

.Auth__input-container input:focus ~ label,
.Auth__input-container input:valid ~ label{
        top: -12px;
        font-size: 12px;
}

Again, please feel free to experiment with changing any of the values. This is actually what I used in the login and register page of this website. This provides a really neat moving transition for the label of the inputs. As mentioned previously though, I would not use this input/label animation in all my inputs. Using animations everywhere might look really cool at first, but it can get dull pretty quickly.

Transition Effects for Border Radius and Sliders

Most people know about and use the idea of changing colors of something when it's hovered over. Not that it's bad at all, but keep an open mind; as there are so many creative ways to implement the transition property.

This first example looks at gently transitioning the border radius property of a div as it is hovered over.

React/JSX/HTML

<div className="HomePage__create-container">
    <h3 className="light" style={{ color: "#090e16" }}>Create</h3>
</div>

CSS

.HomePage__create-container {
        height: 225px;
        width: 225px;
        background-color: white; // You may need to change this to see it if your background is already white.
        border-radius: 10px; // Feel free to add more of a rounded edge.
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin-top: 50px;
        cursor: pointer;
        transition: border-radius 0.3s ease-in-out; // Adjust the seconds to make the animation faster or slower.
}


.HomePage__create-container:hover {
        border-radius: 0;
}

I hope what you take away from this is that there are so many different ways to use transitions and on hover effects; other than just changing colors on hover.

Just a quick side note though (as you probably already know) I really wouldn't make any transitions last long at all. In my opinion, something like 0.8 seconds is already plenty.

Please feel free to use this directly, or as inspiration to try other things! Maybe a full or partial border that eases in and out on hover, or changing in font style directly like making the text in a button bold or italics. Just another way to creatively make your styles and your website your very own.

The second example uses a sort of slider animation for true/false toggles. Unfortunately, these are pretty tricky; despite being very necessary. You definitely want a cool way for users to simply select "Yes" or "No". This example below is actually the same as the toggles used in the create document and modify document pages of this website.

React/JSX/HTML

<button 
    className="btn btn-primary GetQuote__button"
    type="submit"
>
    Submit
</button>

CSS

.GetQuote__button {
    position: relative;
    overflow: hidden;
    background-color: #4874b7 !important;
    border: 0 !important;
    color: white;
    transition: background-color 0.5s;
    text-align: center; 
    border-radius: 0 !important;
    display: block !important;
    margin: auto !important;
}


.GetQuote__button::before {
    content: '→';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #365789;
    color: white;
    font-size: 16px;
    display: flex;
    align-items: center; 
    justify-content: center; 
    transition: left 0.5s;
}


.GetQuote__button:hover::before {
    left: 0;
}


.GetQuote__button:hover {
    background-color: #4874b7;
    color: transparent; 
}

All of those properties may not be necessary, but I got this one from a freelance website I made but never really launched. You might notice a lot of !important markers on several of the properties. That's because I was trying to override some of the Bootstrap CSS properties for buttons. Again, not all of those will be necessary; if you're not using Bootstrap, I don't think any of those markers are necessary.

These are some CSS examples I thought were cool to share with whomever reads this. If I come up with any more I think are cool, I'll be sure to share them.

Again, please feel free to use these examples as is, but I really would recommend looking at these as just inspiration to trigger even more brilliant ideas from your own mind!