• Stars
    star
    103
  • Rank 333,046 (Top 7 %)
  • Language
    Ruby
  • License
    MIT License
  • Created over 16 years ago
  • Updated almost 15 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

The UberKit is a Rails plugin with a set of UI tools to ease common development.

Uberkit¶ ↑

The Uberkit is a set of helpers to ease the development of common UI practices.

Installation¶ ↑

Uberkit is available both as a gem and as a traditional plugin. To use it as a gem, add this to your environment.rb:

config.gem 'uberkit'

To install it as a plugin (Rails 2.1 or later):

script/plugin install git://github.com/mbleigh/uberkit.git

UberForms¶ ↑

UberForms provide a simple context for building forms in a DRYer manner by abstracting the markup into a simple, CSS-styleable format. It is available as a form builder as Uberkit::Forms::Builder, but is likely more useful when used in one of the helper forms: uberform_for or remote_uberform_for.

Basic Example¶ ↑

<% uberform_for :user do |f| %>
  <%= f.text_field :login %>
  <%= f.password_field :password %>
  <%= f.submit "Submit"%>
<% end %>

Becomes…

<form method="post" class="uberform" action="/users">
  <div class="field_row">
    <label for="user_login">Login:</label>
    <input type="text" size="30" name="user[login]" id="user_login" class="text_field"/>
    <br/>
  </div>
  <div class="field_row">
    <label for="user_password">Password:</label>
    <input type="password" size="30" name="user[password]" id="user_password" class="password_field"/>
    <br/>
  </div>
  <button type="submit">Submit</button>
</form>

Labels, Help, and Descriptions¶ ↑

You can pass options into a given field to set a custom label, some help text, or a description of the field.

<%= f.text_field :login, :label => "Username", 
                     :help => "Only a-z and underscores.", 
                     :description => "The name you will use to log in." %>

Becomes…

<div class="field_row">
  <label for="user_login">Username:</label>
  <input type="text" size="30" name="user[login]" label="Username" id="user_login" help="Only a-z and underscores." description="The name you will use to log in." class="text_field"/>
  <span class="help">Only a-z and underscores.</span>
  <span class="description">The name you will use to log in.</span>
  <br/>
</div>

Custom Fields¶ ↑

Maybe the built-in form helpers won’t do it for you. In that case, you can use the custom helper to insert arbitrary HTML that still plays nice with the rest of UberForms:

<% f.custom :label => "State", :for => "user_state" do |f| %>
  <%= state_select :user, :state %>
<% end %>

Becomes…

<div class="field_row">
  <label for="user_state">State:</label>
  <div class="pseudo_field">
    <select id="user_state">...</select>
  </div> 
  <br/>
</div>

UberMenu¶ ↑

UberMenu is the simplest way to generate the markup for CSS menus, including state representation and special hooks for cross-browser advanced CSS needs.

Basic Example¶ ↑

<% ubermenu do |m| %>
  <% m.action 'Home', '/' %>
  <% m.action 'Users', users_path %>
  <% m.action 'Log Out', logout_path, :class => "special" %>
<% end %>

Becomes…

<ul>
  <li class="first current first_current"><a href="/">Home</a></li>
  <li><a href="/users">Users</a></li>
  <li class="special last"><a href="/logout">Log Out</a></li>
</ul>

Submenus¶ ↑

You can nest ubermenus for subnavigation using the ‘submenu’ method. If you pass :delegate instead of a url to the submenu option, it will automatically pick up the url of the first action in the submenu instead.

<% ubermenu 'nav' do |m| %>
  <% m.action 'Home', home_path %>
  <% m.submenu 'Services', services_home_path do |s| %>
    <% s.action 'Service A', service_path('a') %>
    <% s.action 'Service B', service_path('b') %>
  <% end %>
<% end %>

State¶ ↑

UberMenus automatically retain state using the current_page? helper. You can specify further by passing a :current boolean expression to evaluate whether or not the menu item is selected:

<% ubermenu 'nav' do |m| %>
  <% m.action 'Users', users_path, :current => controller.controller_name == 'users' %>
<% end %>

Method Listing¶ ↑

  • action - like link_to with additional options (see below)

    :current - a boolean expression to determine whether this menu option is selected,
        works with current_page? (if current_page? is true this will be true regardless)
    :force_current - boolean expression that ignores the current_page?
    :disabled - adds 'disabled' to class and forces non-current
  • remote_action - like link_to_remote

  • custom_action - only builds the outer <li>, accepts block for contents

  • submenu - accepts a block yielding a new menu object

Copyright © 2010 Michael Bleigh and Intridea, Inc., released under the MIT license

More Repositories

1

acts-as-taggable-on

A tagging plugin for Rails applications that allows for custom tagging along dynamic contexts.
Ruby
4,972
star
2

seed-fu

Advanced seed data handling for Rails, combining the best practices of several methods together.
Ruby
1,221
star
3

subdomain-fu

A new plugin approach to attempting to solve the usage of subdomains in linking and routing in Rails projects.
Ruby
590
star
4

twitter-auth

Standard authentication stack for Rails using Twitter to log in.
Ruby
358
star
5

princely

A simple Rails wrapper for the PrinceXML PDF generation library.
Ruby
233
star
6

omniauth-jwt

An OmniAuth strategy that uses JSON Web Token for Single Sign-On
Ruby
99
star
7

mbleigh.github.com

My blog and website.
Ruby
72
star
8

mash

Mash is a Hash with the ability to read, write, and test for the presence of arbitrary attributes using method calls.
Ruby
61
star
9

ruby-github

A Ruby library for getting information from the GitHub API.
Ruby
58
star
10

canonical-url

Rails plugin to take advantage of the new Canonical URL support of search engines.
Ruby
50
star
11

pwas-on-firebase

Demos and related material for Google I/O Progressive Web Apps on Firebase talk.
HTML
50
star
12

colorist

A Ruby library built to handle the easy conversion and manipulation of colors with a special emphasis on W3C standards and CSS-style hex color notation.
Ruby
48
star
13

acts-as-readable

A simple plugin that allows a user to mark anything as 'read.' Common usage would include forum posts, news items, etc.
Ruby
44
star
14

escapable-amp

TypeScript
30
star
15

conf_ask

A simple demonstration app built to show off Grape
JavaScript
26
star
16

fetches

A Rails plugin to simplify the fetching and memoization of records for parameter-based finds.
Ruby
25
star
17

persistence-smoothie

The source code (and slides in the Downloads section) for my talk "Persistence Smoothie: Blending SQL and NoSQL"
Ruby
21
star
18

marky

A Markdown rendering wrapper for the EtherPad collaborative editor.
JavaScript
17
star
19

twisteners

Who's listening to you? Find out with this Twitter app coded live at RailsConf 2009.
JavaScript
17
star
20

relates-to

Rails Plugin to provide simple polymorphic relationships between models.
Ruby
16
star
21

github-unfuddle

A web hook that takes GitHub commits and turns them into Unfuddle changesets posting using the Unfuddle API.
Ruby
15
star
22

from_param

Rails plugin that adds a from_param class method to ActiveRecord::Base for simple URL-based fetching.
Ruby
14
star
23

web-components-in-action

Examples and exercises for Web Components in Action workshop from Fluent 2014
CSS
13
star
24

cors-talk-example

Ruby
12
star
25

needy-controllers

Include stylesheets and scripts in a before_filter-esque fashion, and set up simple memoized methods for record fetches.
Ruby
12
star
26

browserized-styles

Automatic inclusion of browser and OS-specific stylesheets with a simple naming convention.
Ruby
11
star
27

bootstrap-polymer

An implementation of Bootstrap 3 components in Polymer.
JavaScript
10
star
28

polishing-rubies

Polishing Rubies: A Guide to Ruby Open Source Development
9
star
29

omniauth-box

Box.net strategy for OmniAuth
Ruby
9
star
30

railsconf-tweetups

Twitter app to see who's going to what at RailsConf!
Ruby
9
star
31

twitterdispatch

A simple Twitter API wrapper that gets out of your way.
6
star
32

commitbit

A web-based tool to help abandoned GitHub repos transfer to new maintainers.
CSS
6
star
33

present-future-of-oauth

Slides and code for "The Present Future of OAuth" given at RailsConf 2010.
Ruby
5
star
34

pictle

Drawing with Wordles
TypeScript
5
star
35

hooktastic

Merb-based application to make webhooks super-easy.
Ruby
5
star
36

jquery-pageselect

A jQuery plugin to handle selection of text on the page (not in a textarea).
4
star
37

jquery.navigable

A jQuery plugin for simple keyboard navigation.
JavaScript
4
star
38

css3-for-sass

A set of mixins to apply CSS3 rules to SASS.
4
star
39

cors-talk

JavaScript
4
star
40

bleightiful

The WordPress theme I hastily crafted for my personal site.
PHP
3
star
41

wedding-website

My wedding website!
JavaScript
2
star
42

rails-is-the-new-rails

Slides for a talk given at Ruby Midwest 2011
JavaScript
2
star
43

open-source-marketing

JavaScript
2
star
44

partay

Source for Partay games (for now, just Phraseology).
TypeScript
2
star
45

nodelin

Noodlin' around with Node.js to prep for the KO
JavaScript
2
star
46

callable-run-demo

HTML
2
star
47

schemer

Create JSON Schemas from Go data structures
Go
2
star
48

tinypage

A simple demo of the Firebase Hosting REST API.
JavaScript
2
star
49

omniauth-from-the-ground-up

OmniAuth: From the Ground Up Talk Content
Ruby
2
star
50

codemirror-element

A drop-in web component for source code editing. Utilizes the CodeMirror library.
HTML
2
star
51

dotfiles

Vim Script
1
star
52

puppetry

Ruby
1
star
53

i-am-open-source

I Am Open Source And So Can You (Talk)
1
star
54

let-us-lunch

Ruby
1
star
55

fiberthecrossroads.org

JavaScript
1
star