Projectception
The goal for my third project for Flatiron School’s Software Engineering program was to create a central hub for students in my program to share their projects. Very meta. The platform is called Flatiron Project Mode, and lets users upload their previous project content and interact with other users’ content, both from their cohort and other cohorts within the Flatiron organization. Users can log in through Google and like/comment on projects from students studying the same programming languages.
The platform was built with Ruby on Rails and leverages Bootstrap for styling and form/button interactivity. As there was limited time to complete the project, I wanted to be sure that I spent minimal time on styling and the majority of my time on the technical requirement. However, I tend to naturally prioritize design and try to implement styles that offer a low impact/effort ratio. For this blog post, I’d like to run through some of the highest valueuses of Bootstrap in my project along with the Rails code that powers it.
Dark mode
With Bootstrap, transforming a project into dark mode is as simple as setting the background color of your HTML’s body class and adjusting a few other layout-wide elements. It’s so simple to do that I accidentally enabled it when altering the style of my footer. IMO a dark mode project instantly transforms minimalist web design into chic simplicity. Be warned that not all elements will inherit the proper text/background color, especially if they related to on-page interactions.
<html lang="en" class="h-100">
...
<body class="d-flex flex-column h-100 text-center text-white bg-dark">Carousel
Bootstrap offers a very cool carousel feature that allows you to automatically cycle through a series of content. While I don’t know if it’s typically used for videos, it worked out great for a user’s profile page where I needed the ability to post multiple videos with limited real estate. The caption and previous/next controls overlay on top of the video by default, so some custom css was needed to push them down below the video.
app/views/users/show.erb<%= render partial: 'carousel', locals: {projects: @user.projects} %>
app/views/users/_carousel.html.erb
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<% projects.each_with_index do |project, i| %>
<div class="carousel-item <%= "active" if i == 0 %>" data-bs-interval="2000"
<div class="ratio ratio-16x9"
<iframe class="d-block" src='https://www.youtube.com/embed/<%= youtube_id(project) %>?rel=0' allowfullscreen></iframe>
</div>
<div class="carousel-caption mb-4 d-none d-md-block">
<%= content_tag(:h5, project.name) %>
</div>
</div>
<% end %>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"> </span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"> </span>
<span class="visually-hidden">Next</span>
</a>
</div>css
.carousel-caption {
position: relative;
left: 0;
top: 0;
}.carousel-control-prev {
left: 0;
top: 72%;
}.carousel-control-next {
right: 0;
top: 72%;
}
Cards
Bootstrap cards were the heart of the project. After building a thorough project card partial, I was able to reuse it very easily across the application by combining Bootstraps responsive ratios for videos.
ProjectMode/app/views/projects/_project.html.erb
<div class="card border-0 text-reset text-white bg-dark">
<div class="ratio ratio-16x9">
<iframe class="card-img-top" src='https://www.youtube.com/embed/<%= youtube_id(project) %>?rel=0' allowfullscreen></iframe>
</div>
<div class="card-body pt-0">
<div class='row'>
<div class="d-flex justify-content-between align-items-center">
<div class="d-grid gap-2 d-md-flex align-items-center">
<%= render partial: "likes/button", locals: {project: project} %>
|
<button type="button" class="btn text-white px-0" data-bs-toggle="modal" data-bs-target="#exampleModal">
<%= fa_icon "comment" %>
</button>
</div><div class="d-grid gap-2 d-md-flex align-items-center">
<%= content_tag(:small, class: %w(card-text text-muted)) do %>
<%= likers_modal(project) %>
|
<%= commenters_modal(project) %>
<% end %>
</div>
</div>
</div>
</div>
<div class="d-flex flex-column align-items-start ps-2">
<%= content_tag(:h5) do %>
<%= link_to project.name, project_path(project), class: "text-reset text-decoration-none" %>
<% end %>
<div class='row'>
<div class='col-2'>
<%= display_avatar(project.owner) %>
</div>
<div class='col-10'>
<div class='text-start ps-2'>
<%= link_to display_name(project.owner), user_path(project.owner), class: "text-reset text-decoration-none" %>
<%= content_tag(:p, project.owner.cohort.focus, class: "text-reset text-decoration-none") || "BUG!!!!!" %>
</div>
</div>
</div>
</div><div class="d-flex justify-content-between ps-2">
<%= link_to display_phase_pill(project.phase), phase_path(project.phase) %>
<div>
<%= link_to project.github_link, class: "text-white text-decoration-none" do %>
<%= fa_icon "github" %>
<% end %>
<%= link_to project.blog_link, class: "text-white text-decoration-none" do %>
<%= fa_icon "rss" %>
<% end %>
</div>
</div>
</div>
Form-controls
Nothing makes building forms more fun that Bootstrap’s form-controls. This registration form makes uses of floating labels and flex-grid organization.
ProjectMode/app/views/projects/_form.html.erb
<%= form_for([@phase, @project]) do |f| %>
<%= content_tag(:div, class: "row g-3 text-dark") do %>
<%= content_tag(:div, nil, class: "col-md-3") %>
<%= content_tag(:div, class: %w(form-floating mb-3 col-md-6)) do %>
<%= f.text_field :name, class: "form-control", placeholder: "My awesome project"%>
<%= f.label :name, "Project Name" %>
<div class="invalid-feedback">
Please add a name for your project.
</div>
<% end %>
<%= content_tag(:div, nil, class: "col-md-3") %>
<%= content_tag(:div, nil, class: "col-md-3") %>
<%= content_tag(:div, class: %w(form-floating mb-3 col-md-6)) do %>
<%= f.text_area :desc, class: "form-control h-100", placeholder: "Loved every minute of it" %>
<%= f.label :desc, "Description" %>
<% end %><%= phase_form_fields(f) %><%= content_tag(:div, nil, class: "col-md-3") %>
<%= content_tag(:div, nil, class: "col-md-3") %>
<%= content_tag(:div, class: %w(form-floating mb-3 col-md-6)) do %>
<%= f.text_field :youtube_link, class: "form-control", placeholder: "https://www.youtube.com/watch?v=kWEqGoTSEYs" %>
<%= f.label :youtube_link %>
<% end %>
<%= content_tag(:div, nil, class: "col-md-3") %>
<%= content_tag(:div, nil, class: "col-md-3") %>
<%= content_tag(:div, class: %w(form-floating mb-3 col-md-6)) do %>
<%= f.text_field :blog_link, class: "form-control", placeholder: "https://medium.com/@FlatironSchool" %>
<%= f.label :blog_link %>
<% end %>
<%= content_tag(:div, nil, class: "col-md-3") %>
<%= content_tag(:div, nil, class: "col-md-3") %>
<%= content_tag(:div, class: %w(form-floating mb-3 col-md-6)) do %>
<%= f.text_field :github_link, class: "form-control", placeholder: "https://github.com/flatiron-school" %>
<%= f.label :github_link %>
<% end %>
<%= content_tag(:div, nil, class: "col-md-3") %>
<%= content_tag(:div, nil, class: "col-md-3") %>
<%= content_tag(:div, class: %w(col-md-6)) do %>
<%= f.submit nil, class: "form-control btn btn-primary" %>
<% end %>
<%= content_tag(:div, nil, class: "col-md-3") %>
<br><br><br>
<% end %>
<% end %>
Modals
Clicking on ‘4 likes’ pulls up:
Last but not least, modals were added to each project card to render lists of users who have liked or commented on the specific project. Although a bit tricky to get right without any custom Javascript, the interaction significantly elevates the quality of the application.
Thanks for checking it out! Link to the github repo here.
