Example of extracting the UI framework specific markup to components

_element_button.html.erb

<%
cls = "button"
cls += " expanded" if is_expanded
%>
<button type="<%=type %>" class="<%= cls %>">
  <%= yield %>
</button>

_grid_left_sidebar.html.erb

<%= render partial: 'components/grid/row' do %>
  <div class="columns mediumlarge-4 large-3">
    <%= yield :sidebar %>
  </div>
  <div class="columns mediumlarge-8 large-9">
    <%= yield %>
  </div>
<% end %>

_grid_right_sidebar.html.erb

<%= render partial: 'components/grid/row' do %>
  <div class="columns section view-side mediumlarge-4 mediumlarge-push-8 large-3 large-push-9">
    <%= yield :sidebar %>
  </div>
  <div class="columns mediumlarge-8 mediumlarge-pull-4">
    <%= yield %>
  </div>
<% end %>

_grid_row.html.erb

<div class="row">
  <%= yield %>
</div>