Getting Started

1. Installation

Go through the installation instructions.

2. Setup

Get your page running with defaults:

in your view:

<%= simple_form_for @user do |f| %> <%= f.input :username %> <%= f.input :password %> <%= f.button :submit %> <% end %>

This setup should give you some basic links that are working

go ahead and commit right now :)

3. Create your Custom Tachyons Simpleform Config!

Inside config/initializers create a file called simple-form-tachyons.rb

SimpleForm.setup do |config| help_block = 'br0 ba pv1 ph2 mb2 white b--dark-red bg-light-pink' config.error_notification_class = help_block config.button_class = 'b mv3 ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib' config.boolean_label_class = 'pa0 ma0 lh-copy f6 pointer' config.default_form_class = 'measure center' config.wrappers :vertical_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| b.use :html5 b.use :placeholder b.optional :maxlength b.optional :pattern b.optional :min_max b.optional :readonly b.use :label, class: 'db fw6 lh-copy f6' b.use :input, class: 'pa2 input-reset ba bg-transparent w-100 measure' b.use :error, wrap_with: { tag: 'div', class: help_block } b.use :hint, wrap_with: { tag: 'div', class: help_block } end config.wrappers :vertical_file_input, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| b.use :html5 b.use :placeholder b.optional :maxlength b.optional :readonly b.use :label, class: 'db fw6 lh-copy f6' b.use :input b.use :error, wrap_with: { tag: 'div', class: help_block } b.use :hint, wrap_with: { tag: 'div', class: help_block } end config.wrappers :vertical_boolean, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| b.use :html5 b.optional :readonly b.wrapper tag: 'div', class: 'pa0 ma0 lh-copy f6 pointer' do |ba| ba.use :label_input end b.use :error, wrap_with: { tag: 'div', class: help_block } b.use :hint, wrap_with: { tag: 'p', class: help_block } end config.wrappers :vertical_radio_and_checkboxes, tag: 'div', class: '', :error_class => 'error' do |b| b.use :html5 b.wrapper :tag => 'div', :class => '' do |ba| ba.wrapper :tag => 'label', :class => '' do |bb| bb.use :input bb.use :label_text, class: 'pa0 ma0 lh-copy f6 pointer' end ba.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' } ba.use :hint, :wrap_with => { :tag => 'div', :class => help_block } end end config.default_wrapper = :vertical_form config.wrapper_mappings = { check_boxes: :vertical_radio_and_checkboxes, radio_buttons: :vertical_radio_and_checkboxes, file: :vertical_file_input, boolean: :vertical_boolean, } end

And restart your server!

At this point you should refresh the page and see a big pink pagination bar setup!

4. Customize the Config

This should get your pretty darn close to the tachyons simpleform config that you’re looking for.

I highly suggest tweaking the styles in this config and restarting your server to get it closer to your liking.

Hopefully this will get you moving in the direction you’re looking for.

If these methods stop working, go ahead and let me know!

Simple Form Tachyons Config