https://github.com/sistrall/amcss-rails

Use AMCSS in Rails projects
https://github.com/sistrall/amcss-rails

Last synced: about 9 hours ago
JSON representation

Use AMCSS in Rails projects

• Host: GitHub
• URL: https://github.com/sistrall/amcss-rails
• Owner: sistrall
• License: mit
• Created: 2015-06-17T17:13:14.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-06-19T07:59:03.000Z (over 9 years ago)
• Last Synced: 2024-11-11T06:48:35.255Z (about 2 months ago)
• Language: Ruby
• Size: 121 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# Amcss::Rails

amcss-rails makes [amcss](https://github.com/sistrall/amcss) available in Rails (don't know amcss? Take a look at  [README](https://github.com/sistrall/amcss/blob/master/README.md)).

[![Build Status](https://travis-ci.org/sistrall/amcss-rails.svg)](https://travis-ci.org/sistrall/amcss-rails)

Shortly: you write this...

```haml

= am(:box) do |b|

  = b.am(:header) do

    Header

  = b.am(:content) do

    Body

```

...and get this:

```html



  
Header

  
Content



```


## Installation

Add this line to your application's Gemfile:

```ruby

gem 'amcss-rails'

```

And then execute:

    $ bundle

Or install it yourself as:

    $ gem install amcss-rails

## Usage

amcss-rails allows you to use helper in your views like this:

```erb

<%= am('Calendar', variation: 'flat') do %>

  
Hi, I'm a calendar

<% end %>

```


What you'll get is a `div` with AMCSS attribute:

```html



  
Hi, I'm a calendar



```


It seems nothing, but the interesting part comes when you try to nest blocks and add a little bit of configuration. Take a look.

Create 2 initializer files:

```ruby

# In config/initializers/amcss.rb

Amcss.configure do |configuration|

  configuration.prefix = :data

end

```

```ruby

# In config/initializers/amcss-rails.rb

Amcss::Rails::Engine.configure do |engine|

  engine.config.amcss.style = :bem

  engine.config.amcss.block_element_separator = '__'

end

```

Than write this code in your template:

```erb

<%= am(:calendar, variation: 'flat') do |calendar| %>

  <%= calendar.am(:header, variation: 'padded') do %>

    Header

  <% end %>

  <%= calendar.am(:body) do %>

    Body

  <% end %>

<% end %>

```

This is what you get:

```html



  


  




```


Even easier to read if you are a HAML fan:

```haml

= am(:calendar, variation: 'flat') do |calendar|

  = calendar.am(:header, variation: 'padded') do

    Header

  = calendar.am(:body) do

    Body

```

## Contributing

1. Fork it ( https://github.com/[my-github-username]/amcss-rails/fork )

2. Create your feature branch (`git checkout -b my-new-feature`)

3. Commit your changes (`git commit -am 'Add some feature'`)

4. Push to the branch (`git push origin my-new-feature`)

5. Create a new Pull Request