DEV Community: Weston Walker 📚

Free Tailwind CSS Site Templates For Your Your Next Project

Weston Walker 📚 — Sat, 12 Nov 2022 20:20:37 +0000

I love Tailwind CSS. A lot of people love Tailwind CSS.

So I made a site to share my Tailwind CSS site templates I've made over the years.

Use them on your next project, to learn, to showoff off to your friends and pretend you made it. Doesn't matter to me. Enjoy :)

https://tailwindsites.com/

7 Spicy Tailwind CSS Buttons

Weston Walker 📚 — Sat, 08 Oct 2022 17:23:49 +0000

Buttons. Ahhh boring buttons. The most basic element we love to neglect. But buttons don't have to be boring. Here are 7 spicy button designs using Tailwind CSS.

1) Icon

Adding an icon to a button is a nice cherry on top of it's design and can add some context for its intended action.

2) Solid

Standard button to draw a user’s attention to action. Great for primary actions.

3) Outlined

Draws attention but not to much. Great for secondary actions.

4) Dark & Square

Square buttons should only be used if the rest of your design is lacking border radiuses. Usually meant for a more business-like theme.

5) Fully Rounded

A fully rounded button is meant for more light-hearted designs. Again, if your using rounded buttons, keep the rest of your design consistent with it.

6) Raised

Raised buttons give depth to the page and make the element appear closer to the user, giving it a sense of purpose.

7) Smooth

Smooth buttons are great for secondary actions. Their designs don't draw as much attention as a solid primary button.

Beautiful Tailwind CSS Landing Pages

If you enjoyed this, consider checking out my new project - Tailwind Sites

There you will find Expertly crafted Tailwind CSS landing pages. Get a head start on your next big idea. Beautifully designed. Expertly coded.

Redesigning Bootstrap CSS Components

Weston Walker 📚 — Wed, 20 Jul 2022 12:00:34 +0000

One of the best things about Bootstrap CSS is that it comes with component examples in its documentation.

But these examples have flaws. Design flaws.

Luckily, they can easily be fixed with a little design know how and out of the box Bootstrap classes.

1) Rework pills for a warmer, softer feel

Bootstrap pill colors are harsh. You can use the --bs-bg-opacity CSS variable that comes with Bootstrap. This will soften the background color to create better contrast.

<span class="badge rounded-pill text-primary bg-primary" style="--bs-bg-opacity: .20;">Primary</span>
<span class="badge rounded-pill text-secondary bg-secondary" style="--bs-bg-opacity: .20;">Secondary</span>
<span class="badge rounded-pill text-success bg-success" style="--bs-bg-opacity: .20;">Success</span>
<span class="badge rounded-pill text-danger bg-danger" style="--bs-bg-opacity: .20;">Danger</span>

2) Throw list groups out the window

They are ugggggly. Use standard HTML lists. You can even add SVGs instead of standard list bullets to draw more attention.

<div class="card border-0 shadow p-2">
    <div class="card-body">
        <h3 class="fs-5">Some items we sell</h3>
        <ul class="" style="list-style: none; list-style-position: outside; padding-left: 0px;">
            <li class="d-flex align-items-center mb-1">
                <svg xmlns="http://www.w3.org/2000/svg" class="me-2 text-primary" height="16" width="16" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                </svg>
                An item
            </li>
            <li class="d-flex align-items-center mb-1">
                <svg xmlns="http://www.w3.org/2000/svg" class="me-2 text-primary" height="16" width="16" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                </svg>
                A second item
            </li>
            <li class="d-flex align-items-center mb-1">
                <svg xmlns="http://www.w3.org/2000/svg" class="me-2 text-primary" height="16" width="16" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                </svg>
                A third item
            </li>
        </ul>
    </div>
</div>

3) Give dropdowns a shadow and some room to breathe.

Add shadows with the shadow class to dropdowns. This gives it depth and the appearance that it's closer to the user. Add a small margin with mt-2 to keep the list from overlapping the button.

<div class="bg-white p-4 shadow d-flex justify-content-center" style="height: 200px;">
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
          Dropdown
        </button>
        <ul class="dropdown-menu shadow mt-2" aria-labelledby="dropdownMenuButton1">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
    </div>
</div>

4) Use shadows and extra padding on cards

Card borders often feel clunky. Shadows emphasize elements and give the page depth. Use the shadow class to add a shadow to your class and increase the padding with the p-2 class to give it some more internal spacing.

<div class="card border-0 shadow p-2">
    <div class="card-body">
        <h5 class="card-title fs-5">Collaborate</h5>
        <p class="card-text">
            Share your work with hundreds of like minded individuals around the world!
        </p>
    </div>
</div>

5) HTML tables don't have to be boring

Tables don't have to be a direct 1-1 representation of your database. If it makes sense, combine columns and hide headers. This makes it feel less like a database and more like a UI component.

<div class="border-0 shadow bg-white rounded">
    <h3 class="fs-5 px-3 pt-3">Users</h3>
    <div class="px-2 pt-2">
        <table class="table table-borderless fs-6">
            <tbody>
                <tr>
                    <td>Mark Otto</td>
                    <td class="text-end text-muted">@mdo</td>
                </tr>
                <tr class="bg-light rounded-4">
                    <td>Jacob Thornton</td>
                    <td class="text-end text-muted">@fat</td>
                </tr>
                <tr>
                    <td>Larry the Bird</td>
                    <td class="text-end text-muted">@twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="p-3 bg-light rounded d-flex justify-content-end">
        <buttons class="btn btn-link text-secondary text-decoration-none">Cancel</buttons>
        <buttons class="btn btn-primary">View</buttons>
    </div>
</div>

More Bootstrap Tips??

If you enjoyed this, consider checking out my new project - Better Bootstrap

There you will find a free book containing 15 Bootstrap design tips. The full book will be coming out later this year.

Bootstrap CSS is still the sh*t. But we can make it better.

Weston Walker 📚 — Fri, 01 Jul 2022 10:56:01 +0000

Bootstrap is an amazing CSS framework for those who struggle with design, css, or need to build something quickly.

But the Bootstrap components you copy and paste from the documentation have flaws.

These flaws are holding back your designs!

Here are 5 design tips to correct those flaws and improve Bootstrap.

1) Bring attention to alerts

Add dark borders and svg icons to draw user's attention.

<div class="alert alert-primary rounded-0 border-0 border-start border-primary border-4" role="alert">
    <p class="fs-6 mb-0 d-flex align-items-center">
        <!-- https://heroicons.com/ light-bul-->
        <svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
            <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z" />
        </svg>
        <span>A simple primary alert—check it out!</span>
    </p>
</div>

2) Tables don't have to match your database

HTML tables don't have to be a copy of your database structure. Remove column names, id's, and combine fields when it makes sense.

<div class="border-0 shadow bg-white rounded">
    <h3 class="fs-5 px-3 pt-3">Users</h3>
    <div class="px-2 pt-2">
        <table class="table table-borderless fs-6">
            <tbody>
                <tr>
                    <td>Mark Otto</td>
                    <td class="text-end text-muted">@mdo</td>
                </tr>
                <tr class="bg-light rounded-4">
                    <td>Jacob Thornton</td>
                    <td class="text-end text-muted">@fat</td>
                </tr>
                <tr>
                    <td>Larry the Bird</td>
                    <td class="text-end text-muted">@twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="p-3 bg-light rounded d-flex justify-content-end">
        <buttons class="btn btn-link text-secondary text-decoration-none">Cancel</buttons>
        <buttons class="btn btn-primary">View</buttons>
    </div>
</div>

3) Secondary buttons don't need a background color

Giving primary actions a background color and secondary actions no background color will establish a heirarchy of importance.

<div class="card border-0 shadow p-2">
    <div class="card-body">
        <h5 class="card-title">Special offer</h5>
        <p class="card-text">Are you sure you want to cancel your subscription? We have a special offer if you want to stick around!</p>

        <buttons class="btn btn-primary">View Details</buttons>
        <buttons class="btn btn-link text-secondary text-decoration-none">Cancel</buttons>
    </div>
</div>

4) Stop labeling everything!

Devs love to label values. Stop it! Display information as if it were a sentence in a book, not a key value pair.

<div class="card border-0 shadow">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
        <h1 class="card-title fs-5">Rocky Mount, MI</h1>
        <h2 class="card-title fs-6 text-muted fw-light">100 miles away</h2>
        <p class="card-text fw-light"><span class="fw-bold">$150</span> night</p>
    </div>
</div>

5) Shadows > Borders

Card borders often feel clunky. Shadows emphasize elements and give the page depth, making the element feel closer to the user.

<div class="card border-0 shadow p-2">
    <div class="card-body">
        <h5 class="card-title fs-5">Collaborate</h5>
        <p class="card-text">
            Share your work with hundreds of like minded individuals around the world!
        </p>
    </div>
</div>

More Bootstrap design tips??

If you enjoyed this, consider checking out my new project - Better Bootstrap

There you will find a free book containing more Bootstrap design tips like the ones in this article.

Hacking Bootstrap CSS for Better Looking Websites

Weston Walker 📚 — Sat, 21 May 2022 17:11:34 +0000

Bootstrap has held a lot of fullstack devs hands when it comes to creating sites. A lot of us don’t know how to use Figma, are unsure of what good “design” is, and are not proficient with CSS properties.

But damn are we good at whipping up a database schema, building our controllers and models, slapping a bootstrap theme we found on Google on our views, and calling it a day.

The end result usually leaves a person satisfied with the efficiency they created their site but unsatisfied with the result.

“It looks ok but not like that awesome site from some amazing designer I saw recently” -- generic fullstack dev.

This article is a tutorial of actionable design tips to achieve satisfaction with the look of your bootstrap themed site.

Setup

I’m going to be starting with this free bootstrap theme. Now lets improve it!

Expand your colors

Update your color palette

Bootstrap comes with a whole color pallet you might not have known about. Take advantage of it to look different than the other cookie cutter bootstrap sites.

To get access to these color, we just need to add them to our scss/_variables.scss bootstrap file.

$theme-colors: (
  "primary":    $teal-300,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
) !default;

Or if your using an npm setup for Bootstrap, update your custom sass file that gets compiled.

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
$custom-colors: (
    primary: $teal-300,
);
$theme-colors: map-merge($theme-colors, $custom-colors);
@import "../node_modules/bootstrap/scss/bootstrap";

Now we can update that gross bootstrap primary blue to a nice soft teal for our get started button. We’ll also want to change the text from white to black by removing the text-white class on it. This is for readability on the lighter background color.

Add a color hint to the top of your hero section

We can add a small border to the top of the nav to bring some extra life to our page with the new teal primary color via border-primary.

Text

Change line heights for common elements

A subtle change a lot of people don’t know about is reducing your line heights the larger the text is. Let's override the default line heights for common html elements in our css file.

h1 {
    line-height: 1.1;
}

h2 {
    line-height: 1.125;
}

h3 {
    line-height: 1.25;
}

p {
    line-height: 1.5;
}

Update Letter Spacing

Large headlines generally have to much letter spacing by default. Condense the letter spacing of your h1 and h2 tags by updating our css file like we did for line height.

h1 {
    line-height: 1.1;
    letter-spacing: -0.05em;
}

h2 {
    line-height: 1.125;
    letter-spacing: -0.025em;
}

Heavier headline supporting text

Now we can beef up the supporting text in the hero. The contrast between it and the H1 tag is to extreme. We'll remove the lead class and give it a fs-5 class. This comes with a thicker font-weight.

Summary

Where were at so far...

I wanted to do this theme refactor in 1 blog post but it's just to much content. So i'm splitting it up into several articles.

Check back next week for article 2 or subscribe to my Newsletter at thefullstackdev.net. I'll be updating the feature section of the theme and will have some 🔥 tips for you.

I also highly recommend checking out Refactoring UI. It completely changed my perspective on design as a dev.

✌️

You can create a great looking website while sucking at design

Weston Walker 📚 — Sat, 14 May 2022 17:12:50 +0000

Does this sound familiar - You have a great idea, you build that idea, you start looking at the final outcome and think... This looks terrible.

And the worst part, you don’t know how to even fix it. We are developers after all, not designers.

Luckily, you don’t have to be an amazing designer. You just have to be resourceful and understand a couple of simple design tips. The internet is full of free tools and resources to supplement your lack of design skills.

I’m going to show you how to take advantage of those resources to create something that you can be proud of.

This guide will cover the tools, techniques, and resources I use for designing websites. It is not the end all be all but it is a great guideline for people who struggle with design. We are going to build an application called DesignDo. It will be a collection of design tips and resources (so meta!). Everything we use will be 100% free. To keep our focus on the point of this post, we won’t be using a front end framework. Just static HTML.

Planning

Use a CSS Framework

Have you ever been bowling with someone who is terrible at it? They put those bumpers in the lane so they can't throw a gutter ball? A CSS framework is your bumpers. It’s almost impossible to throw a “gutter ball” with them. They will give you a great starting point and also provide constraints that a dev who struggles with design needs.

I would recommend Tailwind CSS. It uses classes that are abstractions of CSS properties. It serves as training wheels to learn CSS plus it’s easy to make great-looking sites with it.

Read the docs here → https://tailwindcss.com/

Also, if you are not using a front-end framework like React or Vue, I would suggest using alpine js. It’s great for simple UI changes like turning your nav into a hamburger menu when on mobile devices.

Colors

Keep it simple.

Use a white background and black or dark gray text. If you have black text in an area with a darker background color, like a button, change it to white.

1 primary color for your logo and call to action buttons. Use it sparingly for things you want to “stand out” in your design.

Secondary colors should be a light color to make cards stand out from the white background. The simplest way is to just use various light grays for this. They go with everything.

Determine the personality of your site

Every site has a personality. They can serious and business-like. They can also be fun and light-hearted. Figure out what you want the personality of your site to be. It will determine a couple of CSS properties you will use.

Figure it out? Good.

Now, if you chose serious, I suggest using:

Font: Use the default tailwind CSS fonts. You won’t have to configure anything.

Border Radius: Do not use border-radius. Square buttons and boxes give off serious vibes.

Color: For your primary color, dark blues, greens, grays, and purples are all great choices.

If you chose fun, I suggest using:

Font: Tailwind Default or Outfit → https://fonts.google.com/specimen/Outfit

Border Radius: Use a medium to large border-radius. Pick 1 though. Do not mix different border-radius sizes. Keep it consistent.

Color: For your primary color, you have a lot of options. I would suggest a lighter vibrant color though.

PS: Use 1 font for your application. It’s too hard to find multiple fonts that complement each other, especially if you suck at design.

Find Inspiration

Alright, so you have an idea of what personality your site will take on. Now go find some inspiration to spark your creativity. DO NOT COPY someone's design to the T or their code. Use it as your north start.

Web Design Inspiration Sites

My choices

DesignDo will be a fun/creative site. I’ll be using the default tailwind font and a large border-radius on buttons and cards. I’ll also be using light violet for my primary color.

I'll be using this website template as my inspiration...

It has a nice hero section where I can put some copy about what my site is and a vertical list, which I’ll need to list my design tips and resources.

Work Smarter, Not Harder

Part of getting better at development and design is swallowing your ego. You aren’t a better developer because you build everything from scratch. You are just a slow developer. The same goes with building your site.

Find free components or themes

I never start my HTML from scratch. I always start with some pre-built components and go from there.

Were going to use a great free option, Wicked Blocks.

Wicked Blocks → https://wickedblocks.dev/

Using my inspiration site to guide me, I picked out the following blocks to use.

My Header

Hero

Below the fold content

Footer

Put your blocks together in HTML

Before we start customizing our site, lets put our blocks together in HTML.

It’s a good start but we have a some work left before DesignDo is where we want it.

Logo

Again, keep it simple!

I usually go with a text-based logo for my sites. The name of my site is DesignDo, so that is what my logo will be. I’ll typically use the primary color as a background and use white or black text. The text color is all about readability. So if white text is hard to read on top of your primary color, use black text and vice versa.

You can create your logo either writing HTML or using an image editor.

If you decide to use an image editor, I recommend → https://www.photopea.com/

It’s a knock-off of photoshop, is free, and it’s amazing! You can also upload your own fonts for text.

For the DesignDo logo, I’m just going to use the name as the text with extrabold font. The background will be my primary color.

I’m also adding a slight rotation to the logo to give it a little more character. (Do not do this if your going for a more serious design.

Nav Links

There shouldn’t be much to do with nav links. Make sure the text is gray or black. If you want to add icons along with the text you can. Heroicons is a great free icon library that I use all of the time. I would suggest using this if you're making a more serious site. → https://heroicons.com/

You can also use Heroicons for a fun/creative site. I also like to use emojis for icons if my site's personality is fun and creative.

For DesignDo I only have 1 nav link and I’ll be using the fire emoji to bring some more attention to it.

Hero

Because we used Wickedblocks to give us a headstart, the hero section doesn’t have a lot for us to do.

We just need to update some text. When dealing with large headline tags like ours, structure it in a way where the first line is longer than the second. It’s more appealing to the eye.

We also need to update the color of our Notify me button to our primary color

Content

Once again, we're not far off on how we want our below-the-fold content to look.

I’m not feeling the icons. They don’t go with the personality of the site. So i’m going to reach for heroicons to get something more in line with our theme.

Thats better! I’ll leave the background of the icons alone since it’s a light gray and is a nice contrast with our dark icon and white background. It also is rounded so it follows our theme of large border-radiuses.

The “Short Length Headline” is an H2 but it’s using the same styles as its description below it. We want the headline of the tip to stand out and get the reader's attention. I’m going to increase its size and font weight slightly (we don’t want it larger than the H1 tag above it).

Finally, we will update the cookie-cutter text that came from wicked blocks with our own design tips!

Summary

A lot of people champion for using your own handmade CSS and using design tools like figma to create mockups. I agree, they are both great things. But the truth is, as a developer, I don’t have the time to become an expert in Figma or to write my own custom CSS library that I can carry from project to project.

But I can be resourceful and use free tools and resources on the internet to create good-looking designs at a fast pace.

If you want to check out the project I created in this post, follow these links...

You can find DesignDo here → https://designdo.netlify.app/

The repo for this project → https://designdo.netlify.app/

If you enjoyed this article, feel free to join my newsletter @ https://thefullstackdev.net/. I create programming tips, articles, courses, and videos every week.