The Problem: My Website Looks Terrible
I'm finally starting to get my ruby apps connected to web browsers and they look terrible. So far it's just simple forms that tie back into a database (fun stuff), but as far as aesthetics, there's nothing there. I know some basic HTML and CSS so that I can give my site some color, some background images, and maybe even some columns (though it would probably take me a bit of time). I really don't want to invest the time to build everything out making columns, remembering to use clear-fix or the box-in-box method. Lucky for us, there is Bootstrap.
The Solution: Bootstrap
Getting Bootstrap CSS and JS Implemented
After a bit of work it was easy enough to get the CSS and JS to work with the website that I built with Sinatra. You just have to make sure that the CSS and JS files are stored in a folder titled 'public' on the top level of your directory and then just require the CSS sheets in your HTML file:
It's great to have access to such a robust CSS, but it still left me with implementing it. The Boostrap CSS file stylizes HTML tags, so just adding it to my site made a small improvement. Fonts and buttons now looked a little more modern, but I wasn't really feeling the magic yet. To really get a nice looking site with Bootstrap I would still have to go through adding columns, nav bars, headers, footers.... Again, I really wasn't looking to spend all that much time on this. Again, lucky for us, there are Bootstrap themes.
Using Bootstrap Themes
Googling around yielded many pre-built Bootstrap themes available for download. After finding one that looked nice I was able to download the pre-built page and work with it. Again, I had to make sure that my dependant files such as CSS and JS were in my 'public' folder. In addition, I also made an 'images' folder inside my 'public' folder to store any images that would be used on the site. This was finally the solution that I was looking for. With a small amount of work, I am now able to make simple web pages that aren't too bad to look at.
Further (Simple) Customization - Pingendo
After doing a bit of work with my first Bootstrap site, Austin Gilmour tipped me off to a program called Pingendo. Pingendo allows the user to visually build a website by dragging and dropping elements into a matt. This allows the user to quickly and easily add/remove objects such as a full width picture, nav bar, header, text sections, etc.... While I haven't yet gotten the chance to use the program, it looks like a great program to try out next.
Pros and Cons of Bootstrap
- Easy to set up and get going
- Developer is not required to be a designer to get a nice looking site off the ground
- Website start to look the same if some one doesn't eventually go in to customize.
- Re-working the design and keeping it clean and readable can be difficult given the amount of CSS that comes with Bootstrap files.