background preloader

Tutorial

Facebook Twitter

Combining Sinatra, Bootstrap, SASS and Compass | Robots and Clouds. 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. . $ 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: Bootstrap styles.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. In this article, we’ll look at a server-side implementation of REST using Sinatra. A quick question before we get started: Why not use Ruby on Rails to move data around?

Setting Up Sinatra Before installing Sinatra, it helps to understand how it works and what is required to make it work. As mentioned above, Sinatra is a DSL. With the above code running on the server under Sinatra, a browser pointed toward the URL would retrieve a simple “Hello World” response. 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. We can use this in the app by setting it as the background image of the main heading.

(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 To incorporate Sass into your your Sinatra project, we need to install the Sass gem: CSS Variables CSS Mixins Nested CSS Heroku. 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 We’re now going to add the ability to add multiple lists of tasks. Adding and Deleting Lists And change it to the following: 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: Now we have to set up the database connection which is just one line of code to tell DataMapper that we will use a SQLite database called ‘development.db’ and it will be saved in the same folder as the app: The Task Model In order to save tasks to the database we will need to create a task class.

Adding Tasks Deleting Tasks Completing Tasks. 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.

Note – If you are using a version of Ruby less than 1.9, you will need to put the line require 'rubygems' at the top of this file. This is about as basic as a Sinatra application can get: You have to require the sinatra gem at the top, then the real action starts on line 3. To check that it’s working, we need to start a Sinatra server. After a couple of seconds, you should see the following message: