Ask A Question

Notifications

Youโ€™re not receiving notifications from this thread.

New website design!

Chris Oliver asked in General

It took me several weeks to redesign everything and it was a TON of work. The main chunk of work was moving from Bootstrap to TailwindCSS and that's quite a lot of effort because you have to rewrite basically every line of HTML and re-implement all the Javascript functionality for modals, tabs, etc. It's finally complete enough to launch, so I'm super excited! ๐Ÿ™Œ

If there's anything I missed, please let me know!

Reply

This looks great, great work!

Reply

Stellar job. Super impressed with how everything looks.

Reply

Love the new design Chris. Great work!

Reply

Nice Work Chris!

I'm curious: why did you migrate away from Bootstrap?

Reply

Nice ๐Ÿ‘จ๐Ÿปโ€๐ŸŽจI love it! Great work with the new look and feel

Reply

Thanks guys!

@Matthias, the main reason to move away from Bootstrap is that while it's good to get something up quick, it's really hard to undo all their styles to build something custom with it. At a certain point you might as well build it from scratch. Since Tailwind works in reverse, you can implement virtually any design without having to write custom CSS which is nice. Check out Adam Wathan's videos on YouTube where he re-implements several popular sites like Coinbase in like an hour with Tailwind. Really great tool if you want to implement your own designs. TailwindUI is great for kind of bridging the gap between Bootstrap and Tailwind. That's what I used here.

Reply

Hi, Chris! As I see youโ€™re using alpinejs on this site instead of stimulus from your videos. Is there any reason to switch from stimulus to alpine?

Reply

Oh simply because that's what TailwindUI was using and I wanted to ship the site instead of porting their examples to Stimulus. I forgot I still need to convert those!

Reply

What do you think - which one is more perspective to use in projects? Alpine or Stimulus?

Reply

Hi Chris,

I was curious if you're considering doing a video on how to implement Alpine.js or Stimulus with TailwindUI?

I just purchased TailwindUI to help get my current application up and running and now I'm digging into figuring out how to use either Alpine.js or Stimulus to implement the functionality of the designs โ€” and would certainly love any guidance from a video of yours.

Thanks either way and looks great!

Reply

Quick addendum, found this great resource on learning Alpine.js too:

https://scrimba.com/learn/alpinejs/introduction-cV8mRBsp

Reply

TailwindUI does have the Alpine JS examples on the site if you inspect the page I believe. And I agree, will definitely add this to my list of episode ideas!

Reply

Would be interested in hearing how you cut down on the repetitiveness of Tailwind on your new design. I could see using partials to help w/ that quite a bit, but what about other areas? One example that comes to mind is GoRails navbar links. Were the set of classes for those links just entered multiple times given the low # of times you'd reuse those particular set of styles? Or are there other tricks you use here?

Reply

@Luke I'm using Tailwind in a few projects and I am mostly using the Tailwind helper classes and/or TailwindUI examples to mock something up quickly, and then when I'm happy with it, I'll write it in CSS. Something like:

<div class="bg-gray rounded px-3 py-2">Hello</div>

could be reimplemented as:

.gray-badge {
  @apply bg-gray rounded px-3 py-2;
}

At that point you can reuse that class wherever you want. I have found that the @tailwindcss/typography plugin is pretty helpful to get articles or messages formatted easily and quickly. It works pretty well with ActionText, for example.

The new version of Tailwind (2.x) is pretty exciting but I don't think it works with Webpacker until they release a new version that includes PostCSS 8.

Reply

I do use @apply in a few places like buttons, but that's about it. We talked to Adam Wathan on Remote Ruby Episode #97 about this recently and he advised on not using @apply which was interesting. Definitely give that a listen.

For the most part, I've copied a lot of components from TailwindUI and tweaked them without extracting out my own classes. He recommends using partials or something like ViewComponent instead of @apply.

@Mylan, you can use TailwindCSS 2.0 with Wepbacker! You just need to use the master branch for the gem and node module for the time being. I fixed a bug in Webpacker to make it work the day that TailwindCSS 2.0 came out so I could update Jumpstart Pro for it. ๐Ÿ‘

Kieran and I worked on it that night and wrote up our steps: https://www.kieranklaassen.com/upgrade-rails-to-tailwind-css-2/

Reply

@Chris thanks for the tip on Webpacker, I'll take a look. I did notice that they had PostCSS 8 in master, but wasn't sure if it was in a usable state. I'll have to check out that advice on @apply.

Reply

I want the source code of the website can you pls. provide the github link for that : )

Reply
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 83,038+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.