Our project has finally come full-circle. We initially started by trying to take the Kukui Cup site and revamp it with a responsive user interface, or RUI. Our team started out well with some "basic" responsiveness added to the site. We quickly realized that our site did not respond all that well aesthetically speaking, so we diverted from responsive design to focus on the style of the site. After finding some pleasing styles which were above threshold, we decided to refactor our CSS files to improve readability and ease of modification. Now, we have finally come back to the beginning with a new approach to making the site responsive.
This time, we plan to do things in an easier and structured way, which is to use a framework for the HTML and CSS files, using Twitter's Bootstrap. First of all, Bootstrap has a couple tutorials which can allow anyone with little-to-no experience in HTML or CSS to jump right in and get started. The first two tutorials deal with Bootstrap 1.4, but the third one introduces Bootstrap 2.0 and all of the RUI elements it contains. After completing all three tutorials, I have gained a good understanding of using Bootstrap. Secondly, Bootstrap has pages and sections for everything that you will need to customize and incorporate any responsive elements from overall layout, typography, components such as buttons and navigation, and even an extensive list of usable Javascript plugins to name just a few. Each area has descriptions of what the element does, how to use it, and even sample code that you can copy and paste into your own custom CSS files. In fact, you can utilize anything from their site as they use the liberal Apache 2.0 License, which only requires that you credit Twitter Bootstrap for the content that you decide to use. Lastly, you can even create a custom CSS file with all of the components which you think you might need in your site. You simply check off the components and JQuery plugins which you want to add, customize all your variables for each element, and then click the download button to get a fully robust yet streamlined CSS file. With all of these features, Twitter's Bootstrap makes our next task simple and straightforward.
Bootstrap is built with LESS, which is a CSS preprocessor, and allows you to easily customize and extend Bootstrap's existing framework. One thing LESS makes easier is the ability to utilize variables when coding, which any coder can tell you is a near necessity! Variables allow you to change values across your style-sheet by changing only one line of code. Another thing LESS allows you to do is to use "Mixins" which allow you to imbed one class into other classes, giving them all of that class's properties. You can even pass the imbedded class parameters, which is even cooler! Yet another feature of LESS is the ability to nest selectors, eliminating the need to construct long selector names to specify inheritance. Furthermore, you can use LESS to do operations on colors and property values, which lets you set up relationships between the various elements in your site. The LESS site has all of this information and more, including examples of code and how it looks after it has been compiled into CSS. This will make our project much easier to customize, enabling us to easily build upon the Bootstrap framework and easily adjust style-sheet elements across the site.
In conclusion, now that we are about to dive back into the responsive design aspect of the project, it is really exciting and encouraging to have the prospect of using the tools and flexibility of Bootstrap and LESS. The site's style-sheets and HTML should become more easily wielded and manipulated. And the best thing is that Bootstrap 2.0 can be utilized to incorporate an already fully responsive user interface!
No comments:
Post a Comment