Satis

Tailwind CSS based UI framework for Rails. We use:

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

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': {}
  }
}

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|

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.

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

= 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

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

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

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

Add this line to your application's Gemfile:

gem 'satis'

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