Satis

Tailwind CSS based UI framework for Rails. We use:

• TailwindCSS
• TailwindUI
• FontAwesome 7
• ViewComponent
• HotWired
• BEM

• From 2.3.0 onwards, we will no longer ship Fontawesome free. It conflicts with Fontawesome Pro. You can easily add the javascript files, you can download them from here: https://fontawesome.com/download. Use the files from the js folder. Put these in a folder which is in your manifest and it should just work.

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.