Sinatra Project

Nerly Ton
2 min readSep 19, 2020

I enjoyed working on this project this week. The ability to be able to see your work come to life makes it addicting to be honest. I didn’t want to put it down, I didn’t want to go to bed. But as fun as it was it definitely came with its set of challenges. One that took me too long for me to admit was a design feature. I created my project with the Corneal gem with came with a set design. I of course wanted to venture off from that and play around with other options. I was told that bootstrap is a great place to start because of its “simplicity” but to be honest when you aren’t even sure where to start it gets pretty tricky.

I searched, googled, and YouTubed my day away. Finally, I was able to find two useful videos to get started. Heres what I learned.

  1. When you go to the main bootstrap website they give you the option to download or copy and paste a specific code to begin using the bootstrap css framework. I chose the copy and paste option. I pasted this code in my layout page in which my whole projects design feature is grabbed from.
  2. Bootstrap it self has “Example” templates in which you are able to use for a whole page or even just bits and pieces of it. I went to one of the examples that interested me and right clicked and selected “source code”. I copied and pasted the part I wanted into my layout as well as other erb files that needed it.
  3. In the source code for the example template exist the link for the css. I copied and pasted the whole code into a new .css file in my stylesheets folder and I made sure I referenced the new file in my layout page.
  4. From here is just a matter of trial and error and playing around with different code to make it the way you want it.

Again bootstrap is simple -now that I know the process. But I also know that I scratched the surface. I hope this post helped you if you are also new to css frameworks.

--

--