Pasting one line of code can make your Rails app look beautiful
Using the SimpleCSS framework - without knowing HTML/CSS
If you’ve started your Rails journey by following the Getting Started guide on the Rails website, chances are that your web app looks something like this:
That’s embarrassing!
It looks like a website struggling to load on the free public airport WiFi. And don’t even try to see the mobile version of this.
What if you could paste a line of code and make it look like a real website before you asked your friends to check it out?
“Pop in the simple css straight from the cdn”
I knew this was possible when I watched DHH’s demo of Rails 7. He created a demo blog just like the above screenshots at the beginning but then he goes - “Pop in the simple css straight from cdn”. And in less than 10 seconds, VIOLA!
But the problem was that this was not explained in the Getting Started guide.
So I tried to decipher the details from that one line of instruction DHH gave - “Pop in the simple css straight from the cdn”. I didn’t know what these words meant - “simple css”, “cdn” or “how to pop it in”.
I just knew that CSS (Cascading Style Sheets) can make web pages look beautiful. I didn’t exactly know what it is or how it works. But if it is as easy as DHH made it seem, I had to learn it!
If you are in a similar place, the rest of this article will help you get up to speed.
CSS
CSS (Cascading Style Sheets) is a language that is used to style a webpage. It abstracts away extensive formatting from HTML so that we don’t have to specify the format inside each HTML tag. Instead, we can specify the formatting for each type of tag or a bunch of tags in a separate CSS file.
You can then link to that CSS file in your HTML page to apply the style. You can also link to CSS files made by others in your HTML file, aka “popping them in”.
The first five chapters (~10 min read) of W3Schools CSS Tutorial helped me in understanding these basics.
Simple.css
In the Rails 7 demo, DHH pops in the ‘Simple.css’ framework.
Ok. But what is a CSS Framework?
A CSS framework makes designing webpages easier. Just like Ruby on Rails is a framework that makes developing web apps easier.
The Simple.css homepage explains why this framework is simpler than other complex frameworks like the Bootstrap framework - the most popular CSS framework ever.
TLDR:
Bootstrap framework is 144KB vs Simple.css which is just 4KB!
Simple.css and Bootstrap don’t compare in terms of their functionality - Bootstrap has many more features. But Simple.css allows you to spin something up very quickly that looks good and needs very little work.
Simple.css really shines when it comes to building simple websites like a personal blog, an about page, or the basis of a new website.
It is responsive - meaning it automatically adjusts sizes of different elements to make them look good on all devices from smartphones to tablets to desktops.
Also automagically flips to dark mode!
The one line you need to paste in your code
Now that you understand the concepts, you can confidently add the Simple.css framework to your own web app. Here’s the getting started guide for Simple.css that tells you how to install it.
But wait, don’t read it! You only need to know this part right now:
What’s the CDN?
CDN (Content Delivery Network) is file hosting service for common libraries and frameworks. They make your application faster by offering location cached files so no matter where your users are, they receive the files from geo locations close to them.
Also choosing the CDN option above means that whenever the creator of Simple.css releases an update to the code, your application will automatically get it too.
What are “Minified” and “Unminified” versions?
At the time of popping in Simple.css you face a decision to choose between two versions - Minified or Unminified.
Minification removes whitespaces from the file and replaces long variable names with short ones.
Whitespaces and long variable names increase readability for developers but provide no functional benefit. Rather, removing those reduces the file size significantly. And smaller file size helps in serving the webpage better.
So I chose the Minified version.
This means I just pasted the following line of code in the <head>
section of the application layout file (app > views > layouts > application.html.erb) below the stylesheet_link_tag
-
<%= stylesheet_link_tag "https://cdn.simplecss.org/simple.min.css" %>