Before you go, check out these stories!

0
Hackernoon logoA Recipe For A Checkerboard Styled Page by@zeaseth

A Recipe For A Checkerboard Styled Page

Author profile picture

@zeasethseth zea

Last week, as part of an assignment for a Ruby on Rails application, I was given the challenge to create a checkerboard styled page. The design is from Nelson Sakwa and the requirements were as follow:

  • It is a Desktop app (do not worry about mobile friendly)
  • The articles are pulled from the database, ordered by last created and are part of the same category
  • Each row has 4 boxes (image, text, image, text)
  • The following row is the opposite (text, image, text, image)

So immediately I thought that this would a job for the CSS Grid. Having spent a month doing Flexbox and CSS Grid as part of the Microverse Full Stack Web Development Curriculum I thought why not, this is a great time to take those newly acquired skills for a spin.

To set up the main container for the grid:

.cat-container { 
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr;    
  padding-bottom: 45px;
}

And to style each square in the grid:

.text-box { 
  display: flex;    
  padding-left: 15px;  
  padding-right: 15px;    
  padding-bottom: 0;    
  flex-direction: column;    
  justify-content: space-around;
}

After testing my page and seeing that everything was positioned in its right place, the next step was to pull data from the database.

Back in my controller, I make sure that I am pulling all the articles from their respective Category and ordering them in descending order:

def show 
   @articles = Category
     .find(params[:id])
     .articles
     .order('created_at desc')  
end

Next, in my view and with the help of ERB (Embedded Ruby) I can place my images and articles accordingly:

<div class="cat-container"> 
  <% @articles.each do |article| %>
      <div class="image-box" style="background-image: url(<%= image_path "#{article.image}"%>);background-position: center; background-size:
        cover; background-repeat: no-repeat;">
      </div>

      <div class="text-box">
        <h2 class="art-author"><span><%=article.author.name%></span></h2>
        <h2 class="art-title"><%= article.title %></h2>
        <p class="art-text"><%= article.text.truncate(100) %></p>
        <%= vote_or_unvote_btn(article)%> 
      </div>

  <% end %>
</div>

And, so the result is as follow:

I am very happy how this is looking, but it not a checkerboard. I wish to alternate the image and the text for every row...

At this point in my assignment I was starting to run out of time and (having thought of multiple ways of tackling this challenge from styling it in the main CSS file to using functions) I decided to just add a few variables in my .erb file:

<div class="cat-container"> 
  <% x = 0 %>
  <% @articles.each do |article| %>
    <% if x == 4 %>
      <% x = 0 %>
    <%end%>
    <% if x < 2 %>
      <% x += 1%>
      <div class="image-box" style="background-image: url(<%= image_path "#{article.image}"%>);background-position: center; background-size:
        cover; background-repeat: no-repeat;">
      </div>

      <div class="text-box">
        <h2 class="art-author"><span><%=article.author.name%></span></h2>
        <h2 class="art-title"><%= article.title %></h2>
        <p class="art-text"><%= article.text.truncate(100) %></p>
        <%= vote_or_unvote_btn(article)%> 
      </div>
    <% else %>
      <% x += 1%>
      <div class="text-box">
        <h2 class="art-author"><span><%=article.author.name%></span></h2>
        <h2 class="art-title"><%= article.title %></h2>
        <p class="art-text"><%= article.text.truncate(100) %></p>
        <p class="vote"><%= link_to('VOTE', article_votes_path(article_id: article.id), method: :post) %></p>
      </div>
      <div class="image-box" style="background-image: url(<%= image_path "#{article.image}"%>);background-position: center; background-size:
        cover; background-repeat: no-repeat;">
      </div>
    <% end %>

  <% end %>
</div>

And so the resulting page looks as follow:

I am super happy by the way this is looking and ready to continue with testing the main Rails application and to get it ready to deploy into Heroku...

Tags

The Noonification banner

Subscribe to get your daily round-up of top tech stories!