Skip to content

Instantly share code, notes, and snippets.

@panych
Last active December 26, 2015 07:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save panych/7115325 to your computer and use it in GitHub Desktop.
Save panych/7115325 to your computer and use it in GitHub Desktop.
ERB vs Slim vs Haml
<div class="dev-diagram">
<% steps.each_with_index do |step, index| %>
<% if index.even? %>
<% step_class = 'dev-diagram__step dev-diagram__step_right' %>
<% else %>
<% step_class = 'dev-diagram__step dev-diagram__step_left' %>
<% end %>
<div class="#{step_class}">
<div class="dev-diagram__ic">
<ins class="ic-big_#{step[:ic_name]}"></ins>
</div>
<a class="dev-diagram__title" href="#{step[:url]}"><%= step[:name] %></a>
<p class="dev-diagram__descr"><%= step[:description] %></p>
<span class="dev-diagram__progress">
<span class="dev-diagram__progress-dot">
<span class="dev-diagram__progress-line">
</span>
</div>
<% end %>
</div>
.dev-diagram
- steps.each_with_index do |step, index|
- if index.even?
- step_class = 'dev-diagram__step dev-diagram__step_right'
- else
- step_class = 'dev-diagram__step dev-diagram__step_left'
%div{class=step_class}
.dev-diagram__ic
%ins{class="ic-big_#{step[:ic_name]}"}
%a.dev-diagram__title{href=step[:url]}
= step[:name]
%p.dev-diagram__descr
= step[:description]
%span.dev-diagram__progress
%span.dev-diagram__progress-dot
%span.dev-diagram__progress-line
.dev-diagram
- steps.each_with_index do |step, index|
- if index.even?
- step_class = 'dev-diagram__step dev-diagram__step_right'
- else
- step_class = 'dev-diagram__step dev-diagram__step_left'
div( class=step_class )
.dev-diagram__ic
ins( class="ic-big_#{step[:ic_name]}" )
a.dev-diagram__title( href=step[:url] )
= step[:name]
p.dev-diagram__descr
= step[:description]
span.dev-diagram__progress
span.dev-diagram__progress-dot
span.dev-diagram__progress-line
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment