407 reads

A Recipe For A Checkerboard Styled Page

by seth zeaJuly 9th, 2020

Too Long; Didn't Read

A Recipe For A Checkerboard Styled Page is a Ruby on Ruby on Rails application. 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) The result is a checkerboard styled page.

featured image - A Recipe For A Checkerboard Styled Page

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...