Ruby + Middleman Tips

Middleman Ruby Hero

You have to imagine the world as a designer. We understand the programmer thoughts but we don’t think as one of them, sadly.

In my case, the first time when I open the Middleman’s code a couple of questions come to my mind.
In this article, you will find the answers to those questions.

Relative essets

Now, this is a great tool to generate static content. You will love it… until you build!.
On that moment, when you start to think that your compilation (build) will shine on a perfect and static code. You dreams almost come true but you have to check your compilation folder before send to your client, obviously, and… is not working, the CSS paths are broke!

Relax, just open your config.rb and add this code.

configure :build do  
  activate :relative_assets
end

This will remove the “slash” of the paths.
May you said, “Dah… This guy is really dumb…” but in the designer world this isn’t obvious when you start, right? 🤓

HTML minify?

This will help the performance of the website. First you have to add a gem on your Gemfile

gem 'middleman-minify-html'

Then you have to add this code to config.rb.

configure :build do
# This will minify your HTMl code
  activate :minify_html
# By default
  activate :minify_css
  activate :minify_javascript

Middleman let you minify css and js by default.

Compressed images?

Yep, and works great!

gem 'middleman-imageoptim'

Don’t forget run bundle install on the console.

configure :build do
# This will compress you images
  activate :imageoptim do |options|
    options.image_extensions = %w(.png .jpg .gif .svg)
  end

Partials

If you ask me for a comparison, this will be like an orgasm!
You have to imagine a client ask for some changes on his template… a footer or header change… in more than 15 views… Yeah, I know, this is inhuman but I did.
So, this is one of the things that I truly love.

<%= partial "header" %>
 <%= yield %>
 <%= partial "footer" %>

Bonus: What if I have different headers to show?

<% if current_page.path == 'index.html' %>
  <%= partial "header-home" %>
  <% else %>
  <%= partial "header-nav" %>
 <% end %>
 <%= yield %>
 <%= partial "footer" %>

This will show you header-home on your homepage and header-nav in the other views.

Sass

God bless Sass, this is the best invention ever! Less is more, said Steve Krug, and Sass do the honor. It’s like a hero, take a look, this beauty code:

p {  
  font-size: 14pt;
  text-transform: capitalize;
  a {
    color: #f85d5d;
    font-weight: bold;
    i {
      font-style: italic
    }
    &:hover, &:active, &:focus {
      text-decoration: none;
    }
  }
}

Turns on this, repetitive work:

p {  
  font-size: 14pt;
  text-transform: capitalize;
}
p a {  
  color: #f85d5d;
  font-weight: bold;
}
p a i {  
  font-style: italic;
}
p a:hover, p a:active, p a:focus {  
  text-decoration: none;
}

Responsive (Sass)

When you have been worked with responsive more than seven years and then discover this amazing way to write a code, it’s just unbelievable.
You can declare variables with the different kind of screens.
You have two options here, add a bounch of media queries code from here or you can add a global responsive code like this one:

$small: new-breakpoint(max-width 360px);
$mobile: new-breakpoint(max-width 480px);
$tablet: new-breakpoint(max-width 1100px);
$laptop: new-breakpoint(min-width 1280px);
$desktop: new-breakpoint(min-width 1600px);

Now, for use this code you have to call the variable

p {  
  font-size: 14pt;
  color: #f85d5d;
  @include media($desktop) {
    /* css */
  }
  @include media($tablet) {
    /* css */
  }
  @include media($mobile) {
    /* css */
  }
}

Conclusion

In the beginning, I refused to use ruby or middleman to generate my contents, like old school. But, one day an invisible insect bites me and I started to think “Maybe… just maybe… use programmer tools is not so bad…”.
Since that day I think we’re in the middle of something big, really big! Think about it, you can watch a particle on a microscope or space in a telescope… this is a New Age and we have to use wisely what the modern life allows us to use… But, be careful!
My old thoughts are wrong like the abuse of this modern life.