Skip to content

Commit

Permalink
README copy edits [ci skip]
Browse files Browse the repository at this point in the history
  • Loading branch information
@JuanitoFatas
JuanitoFatas committed Mar 19, 2016
1 parent 3791c04 commit 996bdbf
Showing 1 changed file with 115 additions and 52 deletions.
167 changes: 115 additions & 52 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,116 +1,173 @@
# Rails Utils
# Rails Utils [![Gem Version][version-badge]][rubygems] [![Build Status][travis-badge]][travis]

[![Gem Version](https://badge.fury.io/rb/rails_utils.svg)](http://badge.fury.io/rb/rails_utils)
[![Build Status](https://travis-ci.org/winston/rails_utils.svg)](https://travis-ci.org/winston/rails_utils)

Rails helpers based on opinionated project practices. Currently useful for structuring CSS and JS.
Rails helpers based on opinionated project practices. Useful for structuring CSS and JavaScript,
display title of the page, and flash messages with Bootstrap.

## Installation

Add rails_utils to your application's Gemfile:

gem 'rails_utils'

And then execute:

$ bundle

Or install it yourself as:

gem install 'rails_utils'

## Usage

## #`page_class`
### #`page_class`

This helper method returns controller name and action name as a single string value,
which can be used to target CSS styles specifically for this controller or action.

For example, when controller and action is `animes#show`,
you can use `page_class` to include the controller name and action name as CSS classes on the page.

%body{ class: page_class }
```html+erb
<body class=<%= page_class %>>
...
</body>
```

becomes

<body class='animes show'>
```html
<body class='animes show'>
...
</body>
```

Then in your CSS, you can either target your styles specific to controller and/or action.

body.animes
background: black
```css
body.animes {
background: black;
}

body.animes.show
font-size: 24px
body.animes.show {
font-size: 24px;
}
```

Usually, when the `create` or `update` actions render, the `new` or `edit` views will be rendered due to a form error.
Usually, when the `create` or `update` actions render, the `new` or `edit` views will be rendered
due to a form error.

Therefore the `page_class` helper converts `create` to `new` and `update` to `edit`
so that you only need to write CSS to target `new` and `edit`, and not all four actions.

For finer grained control, you can also choose the use the 2 methods that are used to build `page_class` individually.
For finer grained control, you can also choose the use the 2 methods that are used to build
`page_class` individually.

The two methods are `page_controller_class` and `page_action_class`.

## #`page_title`
### #`page_title`

This helper method returns page title based on controller name and action name.

When controller and action is `animes#show`
you can easily use `page_title` like
When controller and action is `animes#show` you can easily use `page_title` like:

.page-title= page_title
```html+erb
<div class="page-title">
<%= page_title %>
</div>
```

becomes

<div class='page-title'>Animes Show</div>
```html
<div class="page-title">
Animes Show
</div>
```

Besides, it supports I18n and interpolation:

en:
animes:
show:
title: Showing anime of: %{anime_name}
```yaml
en:
animes:
show:
title: Showing anime of: %{anime_name}
```
Pass in `anime_name`:

.page-title= page_title(anime_name: 'Frozen')
```html+erb
<div class="page-title">
<%= page_title(anime_name: "Frozen") %>
</div>
```

becomes

<div class='page-title'>Showing anime of: Frozen</div>
```html
<div class="page-title">
Showing anime of: Frozen
</div>
```

## #`javascript_initialization`
### #`javascript_initialization`

This helper method attempts to initialize JavaScript classes and methods based on a standard structure.

With this standard structure, calling your JavaScript has never been easier.

Add `javascript_initialization` to the bottom of your layout.

= javascript_initialization
Add `javascript_initialization` to the bottom of your layout:

When application is MyApp, and controller/action is `animes#show`, `javascript_initialization` compiles to:
```erb
<%= javascript_initialization %>
```

<script type="text/javascript">
//<![CDATA[
MyApp.init();
if(MyApp.animes) {
if(MyApp.animes.init) { MyApp.animes.init(); }
if(MyApp.animes.show && MyApp.animes.show.init) { MyApp.animes.show.init(); }
}
//]]>
</script>
When application is `MyApp`, and controller/action is `animes#show`, `javascript_initialization`
compiles to:

```html
<script type="text/javascript">
//<![CDATA[
MyApp.init();
if(MyApp.animes) {
if(MyApp.animes.init) { MyApp.animes.init(); }
if(MyApp.animes.show && MyApp.animes.show.init) { MyApp.animes.show.init(); }
}
//]]>
</script>
```

By looking at the compiled JavaScript output, it should be apparent on how you should structure your JavaScript.
By looking at the compiled JavaScript output, it should be apparent on how you should structure
your JavaScript:

As similar to `page_class`, `create` is mapped to `new` and `update` is mapped to `edit`.
```JavaScript
// Sample application.js
window.MyApp = {
init: function() {
console.log("Init!")
}
}
```

// Sample CoffeeScript to get you started
window.MyApplication =
init: ->
console.log("Init!")
As similar to [`page_class`](#page_class), `create` is mapped to `new` and `update` is mapped to `edit`.

## #`flash_messages`
### #`flash_messages`

This helper method prints Rails flash messages with classes that correspond to Bootstrap's convention.

Just invoke `flash_messages` anywhere within `layout/application`.

= flash_messages
```html+erb
<%= flash_messages %>
```

Suppose there's a `flash[:success]`, you should see:

<div class="alert alert-success fade in">
<button class="close" data-dismiss-alert="alert" type="button">x</button>
<p>flash is success</p>
</div>
```html
<div class="alert alert-success fade in">
<button class="close" data-dismiss-alert="alert" type="button">x</button>
<p>flash is success</p>
</div>
```

You can also:

Expand All @@ -119,7 +176,7 @@ You can also:

## Configuration

Override any of these defaults in `config/initializers/rails_utils.rb`
Override any of these defaults in `config/initializers/rails_utils.rb`:

```ruby
RailsUtils.configure do |config|
Expand All @@ -142,3 +199,9 @@ Rails Utils is maintained by [Winston Teo](mailto:winstonyw+rails_utils@gmail.co
## License

Copyright © 2014 Winston Teo Yong Wei. Free software, released under the MIT license.


[version-badge]: https://badge.fury.io/rb/rails_utils.svg
[rubygems]: https://rubygems.org/gems/rails_utils
[travis-badge]: https://travis-ci.org/winston/rails_utils.svg
[travis]: https://travis-ci.org/winston/rails_utils

0 comments on commit 996bdbf

Please sign in to comment.