<% @page_title = 'Polaris View Helpers' %>

A collection of Rails helpers to make it easy to style a Shopify app.

 

 

 

<%= polaris_heading "Installing" %>

Add this to your Gemfile.

 gem 'polaris_view_helpers'

 

 

 

<%= polaris_heading "Including the Polaris CSS" %>

Add this to the <head> of your layouts/application.html.erb and/or layouts/embedded_app.html.erb.

 <%= polaris_css %>

 

If you need to specify a particular version of the CSS you can do so:

 <%= polaris_css '1.0.3' %>

 

 

 

<%= polaris_heading "Setting up your page" %>

In layouts/application.html.erb and/or layouts/embedded_app.html.erbyou'll want to replace the conent between the <body> tags with something like this.

  <%= polaris_page do %>
    <%= polaris_page_header @page_title %>
    <%= polaris_page_content do %>
      <%= yield %>
    <% end %>
  <% end %>

 

You can set the @page_title variable either in a controller action or in a template to get a header for each page.

 

 

 

<%= polaris_heading "Headings" %> <%= demo_partial 'headings' %>

 

 

 

<%= polaris_heading "Choice List" %> <%= demo_partial 'choice_list' %>

 

 

 

<%= polaris_heading "Links" %> <%= demo_partial 'links' %>

 

 

 

<%= polaris_heading "Button links" %> <%= demo_partial 'button_links' %> <%= demo_partial 'button_links_with_modifiers' %>

 

 

 

<%= polaris_heading "Button tag" %> <%= demo_partial 'button_tag' %>

 

 

 

<%= polaris_heading "Tabs" %> <%= demo_partial 'tabs' %>

 

 

 

<%= polaris_heading "Banners" %> <%= demo_partial 'banner' %> <%= demo_partial 'banner_success' %>

 

 

 

<%= polaris_heading "Text fields" %> <%= demo_partial 'text_field' %>

 

 

 

<%= polaris_heading "Text area" %> <%= demo_partial 'text_area' %>

 

 

 

<%= polaris_heading "One column layout with a card" %> <%= demo_partial 'one_column_layout' %>

 

 

 

<%= polaris_heading "Two column layout" %> <%= demo_partial 'two_column_layout' %>

 

 

 

<%= polaris_heading "Annotated Section" %> <%= demo_partial 'annotated_section' %>

 

 

 

<%= polaris_heading "Annotated Section Text Field" %> <%= demo_partial 'annotated_section_text_field' %>

 

 

 

<%= polaris_heading "Annotated Section Input" %> <%= demo_partial 'annotated_section_input' %>

 

 

 

<%= polaris_heading "Resource List" %> <%= demo_partial 'resource_list' %>

 

 

 

<%= polaris_heading "Description List" %> <%= demo_partial 'description_list' %>

 

 

 

<%= polaris_heading "Model errors" %> <%= demo_partial 'model_errors' %>

 

 

 

<%= polaris_heading "Page actions" %> <%= demo_partial 'page_actions' %>

 

 

 

<%= polaris_heading "Footer help" %> <%= demo_partial 'footer_help' %>