Skip to content

CodeOfficer/silky-buttons-for-rails

Repository files navigation

SilkButtons 
===========

  TO INSTALL:

  1. script/plugin install git://github.com/CodeOfficer/silky-buttons-for-rails.git
  2. script/generate silky_buttons
  3. put <%= stylesheet_link_tag 'silky_buttons.css' %> in your layouts


  Some SilkyButton Helper methods were installed into your app/helpers folder.

  Browse them at your leisure, or try these examples in your view:

    <%= silk_image('pencil.png') %> outputs ...
      <img alt="Pencil" src="/images/silk/icons/pencil.png?1227089564" />


    <% form_tag(root_path, {:method => :get, :class => "form"}) do %>
      <%= submit_button('ordinary') %> outputs ....
      <button class="button " type="submit">
        <img alt="Tick" src="/images/silk/icons/tick.png?1227089564" /> ordinary
      </button>

      <%= submit_button('creative', :class => 'positive') %> outputs ....
      <button class="button positive" type="submit">
        <img alt="Tick" src="/images/silk/icons/tick.png?1227089564" /> creative
      </button>

      <%= submit_button('harmful', :class => 'negative') %> outputs ....
      <button class="button negative" type="submit">
        <img alt="Tick" src="/images/silk/icons/tick.png?1227089564" /> harmful
      </button>
    <% end %>


    <%= show_button(Post.first) %> outputs ....
    <a href="/posts/1" class="button ">
      <img alt="Eye" src="/images/silk/icons/eye.png?1227089564" /> Show Post
    </a>

    <%= new_button(Post.new) %> outputs ....
    <a href="/posts/new" class="button positive ">
      <img alt="Add" src="/images/silk/icons/add.png?1227089564" /> New Post
    </a>

    <%= edit_button(Post.first) %> outputs ....
    <a href="/posts/1/edit" class="button ">
      <img alt="Pencil" src="/images/silk/icons/pencil.png?1227089564" /> Edit Post
    </a>

    <%= destroy_button(Post.first) %> outputs ....
    <a href="/posts/4" class="button negative " onclick="if (confirm('Are you sure?')) { var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var m = document.createElement('input'); m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method'); m.setAttribute('value', 'delete'); f.appendChild(m);var s = document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token'); s.setAttribute('value', '88f86d3f9ef9d62c7f74ccca942577aa277bc781'); f.appendChild(s);f.submit(); };return false;">
      <img alt="Delete" src="/images/silk/icons/delete.png?1227089564" /> Delete Post
    </a>

  You'll need to include the buttons styles into your layout first.

    <%= stylesheet_link_tag 'silky_buttons.css' %>

  Enjoy ...

About

a generator plugin that will copy image assets and view helpers into your app for some sexy button action

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published