Protiviti / SharePoint Blog

SharePoint Blog

October 23
Less Sass – The Importance of Bootstrap

Twitter's Boostrap has made its way to the forefront of front-end web development since being created in 2011. Now that our front-end developers are using this as part of their SharePoint blueprint, an explanation of where Boostrap came from, an overview of how it works, and why we use it is needed.

Boostrap was created in 2011 by two Twitter employees who had some extra time on their hands. It is a framework for front-end and open source development. It works with the four most widely used browsers (Internet Explorer, Firefox, Chrome, and Safari) and also supports responsive web design by being "mobile first". Because Bootstrap is modular and uses LESS and SASS that implement the components of the toolkit that Bootstrap comes with when downloaded. It is highly customizable and provides support for mobile phones (portrait and landscape), tablets (portrait and landscape), and PCs (low and high resolution).

The CSS provided with the download is what makes Bootstrap so vital to modern web development. Pre-defined classes such as the column widths for extra small, small, medium, and large screens make creating page layouts a snap. By having these classes pre-defined and ready to use, a lot of time is saved. Extra small (phones), small (tablets), medium (desktop), and large (for large desktops or televisions) each have widths that are defined for use and to be responsive. For example, if on a phone you wanted a column to be full-width, but on a desktop, you only wanted the column to take up a third of the space, you would use these two classes on the div - .col-xs-12 .col-lg-4 (For more grid examples, visit w3 schools here).

Other pre-defined classes for images are also very useful. Because of the advancement in design and the use of large images in sliders and banners on websites, the class .img-responsive is perfect to use. It automatically resizes images to fit the size of the screen. Even though most front-end developers can do this by adding their own class, now they don't have to because Bootstrap has already done it for us!

Bootstrap saves so much time when developing websites if it is used in the proper way. Because of the use of LESS and SASS (CSS pre-processors), Bootstrap can work efficiently for front-end developers around the world. All in all, Bootstrap is the present and the future (at least for now) of web development.​

Quick Launch

© Protiviti 2020. All rights reserved.   |   Privacy Policy