mabtie

Mabtie

Credits

Basic, default styles for rails applications

Installation & Upgrading

Mabtie is a Rails engine. It works with versions of Rails greater than 3.0.

Mabtie is recommended to be run as a gem and included in your Gemfile:

gem "mabtie"

After you've bundled, run the installer:

rake mabtie:install

The installer will copy the mabtie stylesheets into assets/stylesheets

Once Mabtie is installed, with your application running (not in production environment) you can browse to /styleguides. This will present you with many standard markup elements that are present in a Rails application, in your default application layout.

Click on the "Default styles" link to view the same markup with a barebones layout that only contains the Mabtie stylesheets. Click on "Application styles" to view the markup in your application layout.

To upgrade, bump the gem version in your Gemfile, and then run 'rake mabtie:install' again to get the latest changes moved into your application.

Usage

Mabtie registers a :flutie shortcut for stylesheets, so in your layout you can do...

bc. <%= stylesheet_link_tag :flutie, 'admin', :cache => true %>

...this will include all the flutie stylesheets, then the 'admin' stylesheet, and it will cache them all into one file.

Sass

If you use Sass, Rails 3.1 does by default, in your application, the flutie stylesheets are also available as scss files, installed in public/flutie/sass. This location is automatically added to your Sass template load path. These files can be imported into your own sass files for use with the following:

@import "flutie";

You'll want to import flutie before any of your own styles so that you can do things like extend your classes with flutie classes.

Custom Styles

To add custom styles to the styleguide add partials to the app/views/styleguides directory. For example:

app/views/styleguides/_todo_item.erb:

<ol>
  <li class="todo">This is a todo item</li>
</ol>

Plugin authors can also add to the styleguide by ensuring that their view path is in ActionController::Base.view_paths and by placing a partial under the styleguides directory. For example:

ActionController::Base.append_view_path(File.join(File.dirname(__FILE__), 'views'))

my_awesome_plugin/views/styleguides/_pagination.erb:

<div class="pagination">
  <a href="#prev">Previous</a>
  <a href="#next">Next</a>
</div>

Using Grid System

Using the Grid System

To start using the grid system do:

If you like more info on using the system please see this set of sildes.

Suggestions, Bugs, Refactoring?

Fork away and create a "Github Issue":http://github.com/mab879/mabtie/issues. Please don't send pull requests.

Development

The actual stylesheet source files are sass, so edit the files in app/assets/stylesheets/sass. To rebuild the normal scss run:

sass -C --update app/assets/stylesheets/sass:app/assets/stylesheets

Credits

Mabie is forked from thoughtbot, inc

Thank you to all the contributors!

The names and logos for thoughtbot are trademarks of thoughtbot, inc.

The form styleing is from formalize

The Grid System is from 960 Grid System

License

FLutie is Copyright © 2010-2011 thoughtbot. It is free software, and may be redistributed under the terms specified in the LICENSE file.

Mabtie is Copyright © 2011 Matthew Burket.