Adding CSS to your Sinatra Project
What’s a cool new site without a little style?
Learning about Sinatra made me think — “Wow! I’m going to be able to build web sites so quickly now!”
While that’s kind of the point of frameworks like Sinatra, I definitely got a little ahead of myself.
Sinatra provides some easy to use features to get started on a ruby web app. It essentially acts as the bridge between your code and the requests & responses of a user. More specifically, Sinatra is a model, view, controller (MVC) framework — utilizing a controller to take in and direct the inputs to the user or the application.
Almost instantly after learning about Sinatra, I was excited to try my hand at adding some front-end flair.
I took a basic lab (building a static website for a bowling alley) and tried to link a stylesheet to the HTML. In this case, we’re using an embedded ruby (erb) file which is basically an HTML file with injected ruby magic/logic. Back to the linking — seems right, so let’s try it!
<link rel="stylesheet" href="/css/application.css">Inside the <head></head> tags of index.erb, I put the <link> tag, thinking my Sinatra app would function like any HTML document. Well, success! However, most apps have a LOT of different erb files…
Public Folders
Sinatra uses a public folder to store various media files like images and stylesheets. It automatically looks in the public folder for media files and seems to get a little confused if when they’re somewhere else.
So, if I store my css files in the public folder maybe some kind of Sinatra/linking magic will happen? Sadly, no. Ok, on to the important stuff…
Layout
Enter layout.erb. Basically a parent.erb, our other erb files will inherit all the code that is written in layout.erb. So, we write a bunch of helpful, basic code for the ENTIRE website — AND — we avoid repeating ourselves. Win-win.
What’s useful to include in layout.erb?
- Header
- Navigation
- Links to media folders
- Footer
When any get request is called, Sinatra searches for layout.erb first. If it finds the layout, it reads it. Like other times in ruby, inheritance has a special keyword that signals to other files that some functionality needs to be shared.
Yield
Inside <body> tags of layout.erb, place <%= yield %>. Yield is written inside an embedded ruby tag <%= %>. This means that it’s really evaluating a piece of ruby code and not HTML. The <%= %> tag both evaluates and outputs the result.
We’ve seen yield before while working with methods and blocks. As a brief reminder, yield injects some code into a method. Here, yield takes in a separate file and injects the written HTML into layout.erb.
Simply put, any get request goes to layout.erb first, reads and interprets the file, finds yield, and moves on to interpret the file that matches the specific get request.
Back to Linking CSS
Just like originally planned, link the CSS stylesheet to layout.erb and it serves as a standard style for the entire website! Awesome.
With all of our navigation and header information in layout.erb, we can focus more on individual pages and make unique content stand out.
