https://github.com/joeybeninghove/freshbarks-tailwind-demo

Tailwind demo using the FreshBooks Clients page as an example
https://github.com/joeybeninghove/freshbarks-tailwind-demo

demo flexbox rails rails5 tailwindcss

Last synced: 8 days ago
JSON representation

Tailwind demo using the FreshBooks Clients page as an example

• Host: GitHub
• URL: https://github.com/joeybeninghove/freshbarks-tailwind-demo
• Owner: joeybeninghove
• Created: 2018-01-11T22:42:05.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-01-11T23:00:42.000Z (almost 7 years ago)
• Last Synced: 2024-10-29T14:15:21.766Z (17 days ago)
• Topics: demo, flexbox, rails, rails5, tailwindcss
• Language: Ruby
• Homepage:
• Size: 94.7 KB
• Stars: 24
• Watchers: 4
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Freshbarks - Tailwind Demo

This is just a quick demo of [Tailwind](https://github.com/tailwindcss/tailwindcss) where I rebuilt one of the FreshBooks pages as my process of actually learning how to use Tailwind.  This is of course not an exact copy, but it's pretty close.  I didn't bother changing the colors to match exactly and some of the spacing isn't exact either.  I also didn't build the table at the bottom of the page.  I did, however, make some improvements to the mobile view, so that'll look a little different from the real, live page.

![mobile view](http://link.joey.io/Q3QpnN/8OssPqCoUd+)

![normal view](http://link.joey.io/nHmh6l/lU47sRrfZG+)

## Things to note

I did make a few tweaks to the `tailwind.js` config file to add a few extra widths and things, but other than that, it's a pretty standard config.  Sorry I didn't commit the initial config so that you could see a diff of my changes, I was being lazy.  :)

## Steps to run

1. `git clone [email protected]:joeybeninghove/freshbarks-tailwind-demo.git`

2. `bundle install`

3. `yarn install`

4. `bundle exec rails db:migrate`

5. `bundle exec webpack`

6. `bundle exec rails server`

Then just visit [http://localhost:3000](http://localhost:3000) to view the page.