Coder Social home page Coder Social logo

sachiotomita / kickoff_tailwind Goto Github PK

View Code? Open in Web Editor NEW

This project forked from justalever/kickoff_tailwind

0.0 2.0 0.0 56 KB

A rapid Rails 6 application template for personal use bundled with Tailwind CSS

Home Page: https://web-crunch.com

Ruby 11.90% HTML 58.11% JavaScript 2.34% SCSS 27.65%

kickoff_tailwind's Introduction

Rails Kickoff โ€“ Tailwind

A rapid Rails 6 application template for personal use. This particular template utilizes Tailwind CSS, a utility-first CSS framework for rapid UI development.

Need version 5.2.3 support? Check out this branch

Tailwind depends on Webpack so this also comes bundled with webpacker support.

Inspired heavily by Jumpstart from Chris Oliver. Credits to him for a bunch here.

Be sure to also check out Jumpstart Pro to save loads of time creating your next Rails application. Chris, Jason, and I teamed up on it.

Included gems

Tailwind CSS by default

With Rails 6 we have webpacker by default now. Using PostCSS we can install Tailwind as a base CSS framework to harness. I prefer Tailwind due to it's un-opinionated approach.

How it works

When creating a new rails app simply pass the template file through.

Creating a new app

$ rails new sample_app -d <postgresql, mysql, sqlite3> -m template.rb

Once installed what do I get?

  • Webpack support + Tailwind CSS configured in the app/javascript directory.
  • Devise with a new name field already migrated in. The name field maps to the first_name and last_name fields in the database thanks to the name_of_person gem.
  • Enhanced views using Tailwind CSS.
  • Support for Friendly IDs thanks to the handy friendly_id gem. Note that you'll still need to do some work inside your models for this to work. This template installs the gem and runs the associated generator.
  • Optional Foreman support thanks to a Procfile. Once you scaffold the template, run foreman start to initalize and head to locahost:5000 to get rails server, sidekiq and bin/webpack-dev-server running all in one terminal instance. Note: Webpack will still compile down with just rails server if you don't want to use Foreman. Foreman needs to be installed as a global gem on your system for this to work. i.e. gem install foreman
  • A custom scaffold view template when generating theme resources (Work in progress).
  • Git initialization out of the box
  • PurgeCSS configuration to help with CSS file sizes
  • Custom defaults for button and form elements

Boot it up

$ rails server

Boot it up (with foreman)

Run foreman start. Head to locahost:5000 to see your app. You'll have hot reloading on js and css and scss/sass files by default. Feel free to configure to look for more to compile reload as your app scales.

Watch an overview

๐Ÿ“น https://youtu.be/kuKMRl8nj2w - A bit dated now that Rails 6 is out now.

kickoff_tailwind's People

Contributors

justalever avatar arku avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.