All threads / New website design!

Ask A Question

Notifications

You鈥檙e 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!

This looks great, great work!

Stellar job. Super impressed with how everything looks.

Love the new design Chris. Great work!

Nice Work Chris!

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

Nice 馃懆馃徎鈥嶐煄↖ love it! Great work with the new look and feel

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.

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

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!

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

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!

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

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

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!

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?

@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.

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/

@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.

Join the discussion

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

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

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

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2021 GoRails, LLC. All rights reserved.