When the World Wide Web was invented, developers had in mind to create something functional (and that’s about it). You can see an example here:
In just a few years, this has shifted towards creating a website that is not only functional, but also “eye candy”.
Imagine that you are developing a website with the sole purpose of selling cosmetic products. Assuming it’s fully functional (visualizing products, order and paying), what will make your website stand out in a market of thousands of other similar projects? If you don’t know yet, let me tell you: it’s the design!
How it all started
Twitter (which was launched in 2006) is one of the fastest growing social networks in the world. In 2010, Twitter developers decided it was high time they updated the design – that’s when the new Twitter Bootstrap framework was born. This is now one of the most active repositories on GitHub.
Bootstrap is a CSS, HTML and JS framework which was created in order to remove any inconsistencies when it comes to design. When you develop a large application or website, you need to keep in mind the fact that your project needs to offer consistency when it comes to design elements.
Say hello to my little design (Twitter Bootstrap)
The Twitter Bootstrap framework uses various methods of integration into your website, such as using compiled and minified source files, or directly downloading the Less or Sass stylesheets and compiling them. In my honest opinion, the most straight-forward method of integrating the Twitter Bootstrap is to download the compiled and minified CSS, HTML and JS files.
As an example of this integration, we will use a simple HTML file in which the downloaded files need to be included:
Step 1. Download the files from: http://getbootstrap.com/getting-started/#download (just click “Download Bootstrap”)
Step 2. Create an empty HTML file
Step 3. Include JQuery in your HTML file (either download the files or simply reference them with an URL).
Step 4. Add the “css”, “js” and “fonts” folders downloaded in Step 1 and the files they contain next to your .html file
Step 5. Reference the bootstrap.css stylesheet and the bootstrap.js file in your HTML (Remember: the JQuery library needs to be included before the bootstrap.js file).
Step 6. Follow the templates and set a class from bootstrap to your HTML tags (you can view a wide range of options at http://getbootstrap.com/components/ ) and have fun !
See below how a Boostrap template looks like – thank you http://themeforest.net for the template.
Now, imagine how much time it would take you to create from scratch a stylesheet that mimics the bootstrap design. Quite a time saver, don’t you think? 🙂
