front_man

Frontman

A gem for easier front-end development in Ruby.

Installation

Add this line to your application's Gemfile:

gem 'front_man'

And then execute:

$ bundle

Middleman

If you're using middleman, add this line to config.rb:

activate :front_man

Usage

Import front_man in your application.scss:

@import 'front_man';

Or if you want to import components manually:

@import 'front_man/z-index';

Make sure the application.scss file has .scss extension (or .sass for Sass syntax). If you have just generated a new Rails app, it may come with a .css file instead. If this file exists, it will be served instead of Sass, so rename it:

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

Helper methods

The front_man gem includes several helper methods.

inline_svg(filename)

Renders svg file in a hidden div for later referencing of it's elements; usually used to load a single svg file that consists of all svg files concatenated together.

Example (you can put this at the bottom of your layout (application.html.erb) file:

<%= inline_svg('icons.svg') %>

sprite_tag(filename, options = {})

Works together with inline_svg to serve specific svg file from concatenated file.

Example:

<%= sprite_tag('icon-home', class: 'svgIcon svgIcon-40') %>

You can use css classes to style the icon:

.svgIcon-40 {
  width: 40px;
  height: 40px;
  fill: $base-color; // use fill instead of color
}

All the options passed to sprite_tag are passed on to svg content_tag.

image_set_tag(filename, options = {})

Used to set srcset attribute on img tag.

Example:

image_set_tag('http://placehold.it/1200x600',
  srcset: {
    'http://placehold.it/300x150' => '300w',
    'http://placehold.it/600x300' => '600w',
    'http://placehold.it/1200x600' => '1200w'
  }
)

If you would like to support lazy loading, in conjunction with lazySizes, you just need to add the class lazyload as follows:

image_set_tag('http://placehold.it/1200x600',
  srcset: {
    'http://placehold.it/300x150' => '300w',
    'http://placehold.it/600x300' => '600w',
    'http://placehold.it/1200x600' => '1200w'
  },
  class: 'lazyload'
)

N.B. You would need to ensure the lazySizes script is installed for this to work

Kudos

The conventions laid out in the asset files here were based upon those discussed in the article below. Kudos to @fat.

https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06

Development

After checking out the repo, run bin/setup to install dependencies. Then, run rake spec to run the tests. You can also run bin/console for an interactive prompt that will allow you to experiment.

To install this gem onto your local machine, run bundle exec rake install.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/DVELP/front_man. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

License

The gem is available as open source under the terms of the MIT License.

Seoable was created and is maintained by DVELP Ltd.

If you like what you see and would like to hire us or join us, get in touch!