All Projects → joeybeninghove → freshbarks-tailwind-demo

joeybeninghove / freshbarks-tailwind-demo

Licence: other
Tailwind demo using the FreshBooks Clients page as an example

Programming Languages

ruby
36898 projects - #4 most used programming language
javascript
184084 projects - #8 most used programming language
HTML
75241 projects
CSS
56736 projects

Projects that are alternatives of or similar to freshbarks-tailwind-demo

Mobi.css
A lightweight, scalable, mobile-first CSS framework
Stars: ✭ 2,348 (+10108.7%)
Mutual labels:  flexbox
Chartboard
Simple dashboard to show widget chart
Stars: ✭ 23 (+0%)
Mutual labels:  flexbox
flexboxes
CSS flexbox framework with pure flexbox grid ability
Stars: ✭ 27 (+17.39%)
Mutual labels:  flexbox
Griddle
A CSS Grid Framework
Stars: ✭ 215 (+834.78%)
Mutual labels:  flexbox
Semantic Ui
Semantic is a UI component framework based around useful principles from natural language.
Stars: ✭ 49,729 (+216113.04%)
Mutual labels:  flexbox
boba
A lightweight, modular CSS framework.
Stars: ✭ 47 (+104.35%)
Mutual labels:  flexbox
Reactsimpleflexgrid
A way to quickly add a Grid Layout to your React app 🚀
Stars: ✭ 181 (+686.96%)
Mutual labels:  flexbox
cice-playground
CICE Full Stack Web Course
Stars: ✭ 12 (-47.83%)
Mutual labels:  flexbox
react-twitter-clone
MaterialUI (for icons and flexbox), React (for building), CSS (for styling), Firebase (for deploying online), npm (for animations in tweet)
Stars: ✭ 25 (+8.7%)
Mutual labels:  flexbox
VTree
VirtualDOM for Swift (iOS, macOS)
Stars: ✭ 89 (+286.96%)
Mutual labels:  flexbox
Flexml
🚀基于Litho的Android高性能动态业务容器。
Stars: ✭ 225 (+878.26%)
Mutual labels:  flexbox
Ragrid
Intrinsic first auto-layout flexbox grid
Stars: ✭ 249 (+982.61%)
Mutual labels:  flexbox
csslayout
A collection of popular layouts and patterns made with CSS. Now it has 100+ patterns and continues growing!
Stars: ✭ 7,297 (+31626.09%)
Mutual labels:  flexbox
Core Layout
Flexbox & CSS-style Layout in Swift.
Stars: ✭ 215 (+834.78%)
Mutual labels:  flexbox
react-facebook-friends
👍Web app to rank, quantify your FaceBook friendship with React
Stars: ✭ 26 (+13.04%)
Mutual labels:  flexbox
Grd
A CSS grid framework using Flexbox. Only 321 bytes (Gzipped).
Stars: ✭ 2,210 (+9508.7%)
Mutual labels:  flexbox
stacks-11ty
Open source 11ty theme with personality
Stars: ✭ 21 (-8.7%)
Mutual labels:  flexbox
rails-rest-api
A simple RoR 5 REST API demo with JWT authentication.
Stars: ✭ 25 (+8.7%)
Mutual labels:  rails5
react-devise-token-auth-sample
React on Rails using devise_token_auth for authentication
Stars: ✭ 25 (+8.7%)
Mutual labels:  rails5
11r
America's favorite Eleventy blog template.
Stars: ✭ 135 (+486.96%)
Mutual labels:  flexbox

Freshbarks - Tailwind Demo

This is just a quick demo of Tailwind 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 normal view

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 to view the page.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].