Satis

Tailwind CSS based UI framework for Rails. We use:

• TailwindCSS
• TailwindUI
• FontAwesome 6
• ViewComponent
• HotWired
• BEM

Installation

Your main app needs to have at least the following config/postcss.config.js:

module.exports = {
  parser: require('postcss-comment'),
  plugins: {
    'postcss-mixins': {},
    'postcss-import': {},
    'tailwindcss/nesting': {},
    'tailwindcss': {},
    'autoprefixer': {}
  }
}

Usage

You can use satis helpers in your own helpers:

def mycard(&block)
  sts.card(:profile, icon: 'fad fa-user', title: "Profile", &block)
end

and then in your template:

= mycard do |card|

Fonts

Satis uses font-awesome and includes the free and brand fonts for use in the asset-pipeline:

= javascript_include_tag asset_url("fontawesome.js"), defer: true
= javascript_include_tag asset_url("brands.js"), defer: true
= javascript_include_tag asset_url("solid.js"), defer: true

When you have the pro fonts, you can add them in your own assets/fontawesome folder. Only include what you use, this way it's also easily cachable.

Components

Each component has it's own documentation in the component folder. Other engines can add components to Satis too:

Satis.add_helper :name, ViewComponent::Class

Forms

= sts.form_with model: @user, url: profile_url, class: 'mt-2' do |f|
  = f.input :id, as: :hidden
  = f.input :first_name
  = f.input :last_name
  = f.association :account, collection: policy_scope(Account).with(@user.account_id), as: :dropdown
  = f.input :location_id, url: select_locations_url(format: :html), as: :dropdown, hint: "The user's main location"

  = f.button
  = f.submit
  = f.reset
  = f.continue

Browser detection

Satis now includes browser detection using the browser gem, you can use it in controllers and in your views:

sts.browser.chrome?
sts.browser.mobile?

For more information see the browser gem

TODO

• Sidebar has no small / collapsed version
• Extend new CM6 editor-controller with 'old' features (based on CM5)

HIGH PRIO TODO

• Phonenumber input doesn't work
• Tippy.js css missing

Installation

Add this line to your application's Gemfile:

gem 'satis'

License

The gem is available as open source under the terms of the MIT License.