Combining Sinatra, Bootstrap, SASS and Compass. I recently made two new websites which had to be done fairly quickly (but still look good), be simple technically, be responsive, and be dynamic.
There are many ways to do this but I settled on using Sinatra, Bootstrap, SASS and Compass, and this is how I stitched that together. This isn’t groundbreaking, but it can be time-consuming to piece together different parts and work out what the conventions are and what sensible configuration is. So it might be useful for someone who wants to do something similar. You can see a skeleton of the project, with a few example pages, on GitHub. Get a copy and run it with: $ git clone $ cd example-sinatra-site $ compass watch . And in a new window, from the same directory: The first command (compass watch .) makes Compass monitor the SASS files (in public/sass/) for changes, at which point it compiles new CSS files (into public/css/).
Let’s look at each part. Sinatra Some notes on the structure and how it works: The :layout is optional. Bootstrap _base.scss. Uno! Use Sinatra to Implement a REST API. The REpresentational State Transfer (REST) architecture provides a very convenient mechanism to shuttle data between clients and servers.
Web services and protocols, like HTTP, have been using the REST architecture for many years, so it is a well-tested and mature concept. Sinatra can be used to effectively implement the REST architecture. Sinatra’s DSL (Domain Specific Language) seems custom-tuned to the spirit of REST. In fact, Sinatra’s routing language includes the same verbs used by HTTP, including GET, POST, PUT and DELETE. Because these REST API transactions look and behave very much like HTTP, network devices will treat your REST transactions in virtually the same way. Just Do It: Learn Sinatra, Part Four. Welcome to the last part of this series.
The aim of this series of tutorials has been to take somebody who has never used Sinatra from creating an app to deploying it. You can find the other parts of the series at the following links: After those three parts, we have now finished most of the main functionality of our To Do List app. In this final part we are going to look at using Sass for the CSS before deploying the app on the Heroku cloud hosting service.
A Logo Every self respecting app needs a logo, so I’ve created a simple ‘tick’ logo that you can find on Github. (Note – in case you haven’t noticed, you will need to add a class of ‘logo’ to the h1 element in layout.slim for this to work) I’ve also used the logo to create a favicon which you can also find on Github. Getting Sassy Sass (Syntactically Awesome Stylesheets) is a CSS templating language, which means that you write your styles in Sass which then gets compiled on the server side into the CSS that is sent to the browser. Just Do It: Learn Sinatra, Part Three.
In Part 2 of this tutorial, we used DataMapper to save tasks to a database back end and created a web front end that used Sinatra to show, add, delete and complete tasks.
In this tutorial we will make it look a bit better and add some extra functionality by letting you create multiple lists of tasks. Adding Some Style At the moment our app is functioning fine, but looks a bit clunky. Let’s sort that out by creating a stylesheet. Check that you have the following line of code in the ‘layout.slim’ file: Now create a file called ‘styles.css’ and save it in the public folder, then add the following lines of CSS: Reload the page and you’ll see that it looks much nicer and much more like an actual list of tasks.
The key line here is at the top, which uses the ternary operator to check if the task is completed and add class of completed if it has been. Lists of Tasks. Just Do It: Learn Sinatra, Part Two. In part one of this tutorial, we set Sinatra up and displayed some pages.
Now the fun really starts – we will be using a database to store our tasks in. In this tutorial we will be using SQLite for the local database. As its name suggests, this is a lightweight file-based database that doesn’t require any configuration. If you haven’t already got this installed, then see this page for some simple instructions. In order to interact with the database, I will be using DataMapper. In order to use DataMapper with SQLite, the following gems will need to be installed: Next, we need to make sure that the DataMapper gem is required at the top of the main.rb file: Just Do It: Learn Sinatra, Part One. In this 4-part series of tutorials, I’m going to take you through the process of creating a fully functioning To Do List app called ‘Just Do It’, using Sinatra and DataMapper.
Hopefully, this will help to demonstrate just how quick and easy it easy to use Sinatra. Let’s begin with the basics of Sinatra. Installing Sinatra To get started with Sinatra, you’ll need to have Ruby installed. I would recommend using RVM for this (you can follow this great guide by Glenn Goodrich if you need help). A Basic Application To start with, open up your favorite text editor and save the following as main.rb.